Evervault

Overview

Evervault's design system embodies **Crypto-Minimalism with Neon Accents** — a premium aesthetic that marries deep technical sophistication with vibrant, approachable interactivity. The brand serves fintech and payments professionals who demand both security and flexibility; the UI transforms complex encryption concepts into intuitive, confident interactions. The visual language uses a near-black navy foundation (rgb(1, 3, 20)) as a canvas of trust and stability, punctuated by electric purple (hex #6633ee) and hot pink (hex #f92672) accents that signal innovation and control. The emotional response is one of precision without coldness: users feel empowered, not intimidated.

Evervault's voice is direct, technical yet conversational, and unapologetically confident. The brand avoids corporate jargon; instead, it speaks in concrete benefits: "Take control of your payments stack — easily tokenize cards, optimize margins, comply with PCI." Tone is calm but energetic, never breathless. Typography pairs Roobert (a geometric, modern sans-serif) for headlines with Inter for body text, creating a hierarchy that feels both premium and accessible. Example sentence in brand voice: "Tokenization, but with a powerful and flexible encryption model — no lock-in, no compromise."

Colors

The color system is built on a **dark-first, accent-driven** philosophy. The surface stack anchors on deep navy (surface: #010314, surface-container: #0f1428) to evoke security and focus, with progressive lightening toward surface-container-highest (#252d42) for layered depth. On-surface text is set to a cool, readable off-white (rgb(223, 225, 244)) that maintains contrast without harshness.

Primary (hex #6633ee, rgb(102, 51, 238)) is the brand's signature purple — used on all CTAs, interactive states, and accent highlights. It signals innovation and control. Secondary (hex #adc9eb) provides a softer, cooler accent for supporting UI elements and data visualization. Tertiary (hex #f92672, a hot pink) is reserved for alerts, highlights, and premium feature badges, creating visual pop agains

Typography

The type system uses a **geometric-to-humanist pairing**: Roobert (a clean, geometric sans-serif) for display and headlines (56px, 600 weight, -0.02em letter-spacing) conveys modernity and precision, while Inter (a neutral, highly legible humanist sans-serif) for body and labels (16px, 400 weight) ensures accessibility and warmth. Display text (56px, lineHeight 64px) is reserved for hero headlines; headline-lg (40px, 600 weight) for section titles; headline-md (28px, 600 weight) for subsections. Body-lg (18px, 400 weight, 28px lineHeight) is used for long-form copy and descriptions; body-md (16px, 400 weight, 24px lineHeight) for standard UI text. Label-md (14px, 500 weight, 20px lineHeight) and label-sm (12px, 500 weight, 16px lineHeight) are applied to buttons, badges, and form labels. A

Layout

The layout uses a **fluid, mobile-first grid** with a maximum container width of 1200px (enforced at breakpoints 2000px+). The grid is 12 columns on desktop, collapsing to 6 columns on tablet (600–999px) and full-width on mobile (< 600px). Horizontal padding (gutter) is 24px on desktop, 16px on tablet, and 8px on mobile, ensuring breathing room without waste. Section separation uses lg spacing (40px) between major content blocks; card-to-card spacing within sections uses md spacing (24px). The hero section spans full width with a gradient background (purple to pink, 45° angle) and centered content; body copy is constrained to 850px max-width for optimal readability. Vertical rhythm is maintained through consistent use of spacing tokens: xs (4px) for micro-interactions, sm (12px) for compon

Elevation & Depth

Depth is conveyed through **layered transparency and subtle shadows** rather than heavy drop-shadows. Level 1 (Base): The background is a solid deep navy (rgb(1, 3, 20)) with optional animated gradient overlays in hero sections. Level 2 (Standard Card/Container): Cards use a 1px border at rgba(255, 255, 255, 0.1) with a transparent background (rgba(0, 0, 0, 0)) and optional backdrop-filter: blur(1px) for a frosted-glass effect. Hover state elevates to rgba(255, 255, 255, 0.05) background with border at rgba(255, 255, 255, 0.15). Level 3 (Modal/Elevated): Modals and elevated surfaces use a 1px

Shapes

The shape philosophy is **Geometric Precision with Soft Edges** — sharp enough to feel technical and modern, soft enough to feel approachable. Buttons use border-radius: 24px (full pill shape, {rounded.full}) to emphasize action and friendliness. Cards and containers use border-radius: 16px (1rem, {rounded.lg}) for a balanced, premium feel. Input fields and smaller components use border-radius: 8px (0.5rem, {rounded.DEFAULT}) for clarity and consistency. Badges and micro-elements use border-radius: 50% ({rounded.full}) for maximum softness. The rationale: pill-shaped buttons (24px) are highly

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** (white background, rgb(255, 255, 255), dark text rgb(42, 43, 58), 40px height, 24px border-radius) is used for primary CTAs like "Talk to an expert." On hover, opacity reduces to 0.85 with a 400ms ease transition. **button-secondary** (purple background hex #6633ee, white text, 40px height, 24px border-radius) is used for secondary actions like "Get Started." Hover state shifts to the lighter primary-container (hex #784bff) with opacity 0.75. **button-tertiary** (transparent with rgba(255, 255, 255, 0.15) background, white text, 1px border at rgba(255, 255, 255, 0.1), 24px border-radius, backdrop-filter: blur(1px)) is used for tertiary or ghost actions. All buttons use Inter, 14px, 500 weight, with 0–16px h

Do's and Don'ts

**Do**

• Do use primary purple (hex #6633ee) for all primary CTAs and interactive focus states — it's the brand's signature accent and drives user attention.
• Do maintain the dark navy foundation (rgb(1, 3, 20)) as the default background; it establishes trust and reduces cognitive load for security-conscious users.
• Do apply 24px border-radius to all buttons and 16px to cards — this geometric softness is core to the brand's premium-yet-approachable aesthetic.
• Do use Inter for body text and Roobert for headlines; this pairing creates a clear hierarchy and reinforces the modern, technical positioning.
• Do layer transparency (rgba values) and subtle borders (1px at rgba(255, 255, 255, 0.1)) instead of heavy shadows — this creates depth without visual clutter.
• Do use 400ms ease transitions on all hover states to signal interactivity smoothly and professionally.

**Don't**

• Don't use pure white (hex #ffffff) as a primary background — it breaks the dark-first aesthetic and reduces the impact of the purple accent.
• Don't apply border-radius smaller than 8px to interactive elements — it makes the UI feel cold and technical rather than approachable.
• Don't mix Roobert and Inter arbitrarily; reserve Roobert for display/headline scales and Inter for body/label scales to maintain hierarchy.
• Don't use heavy drop-shadows (box-shadow: 0 20px 60px) — the brand uses subtle, layered transparency instead; heavy shadows feel dated and corporate.
• Don't override the primary purple (hex #6633ee) with secondary or tertiary colors for primary CTAs — consistency is critical for brand recognition.
• Don't use the hot pink tertiary (hex #f92672) for general UI elements; reserve it for alerts, premium badges, and high-priority highlights to maintain visual impact.