Evervault

Overview

Evervault is a developer-first payments security platform that empowers teams to encrypt sensitive card data and maintain full control over their payment infrastructure. The design system embodies a "Technical Minimalism" aesthetic—combining the precision and clarity of enterprise security software with the accessibility and approachability of modern developer tools. The visual language prioritizes trust through high contrast (near-black #010314 backgrounds with bright accent colors), geometric clarity (sharp 4–56px border radii), and a restrained color palette dominated by deep navy, electric cyan (#0099ff), and vibrant purple (#6633ee). The UI evokes a sense of control and transparency: every interaction feels deliberate, every data point legible, every CTA unmissable. Voice: direct, technical but never jargon-heavy, confident without arrogance. Example: "Your encryption layer runs everywhere your code runs—no middleware, no compromise."

Colors

The color system is built on a dark-first foundation with strategic accent deployment. Surface (#010314) is the canonical dark background, with a full stack of container variants (surface-container-lowest #050709 for nested depth, surface-container #1d1f2e for mid-tier cards, surface-container-highest #35384b for elevated modals). Primary (#0099ff) is the electric cyan accent used exclusively on CTAs, focus states, and interactive highlights—it commands attention without overwhelming. Secondary (#6633ee, a vivid purple) supports status indicators, badges, and secondary actions; it creates visual rhythm alongside primary. Tertiary (#3ddc97, a bright teal-green) is reserved for success states and confirmatory UI. On-surface (#ffffffe6, near-white with 90% opacity) ensures text legibility ove

Typography

The type system uses three distinct families to create cognitive hierarchy: Geologica (geometric, modern) for display and headline scales, Montserrat (humanist, friendly) for titles and labels, and Tomorrow (monospaced-inspired, technical) for body text. Display (60px, 600 weight, -0.02em tracking) anchors hero sections with commanding presence; headline-lg (48px, 500 weight) softens the visual weight for subheadings. Body-lg (18px, 400 weight, Tomorrow) and body-md (16px, 400 weight) maintain readability at 28px and 24px line heights respectively. Label-md (14px, 600 weight, Montserrat) is applied to buttons and interactive labels with 0.01em tracking for precision. Label-sm (12px, 500 weight, IBM Plex Mono) is reserved for technical metadata, timestamps, and code snippets—the monospace t

Layout

The layout system uses a 12-column grid with a 1200px max-width container, centered with 24px gutters on desktop and 16px on tablet. Spacing follows a semantic scale: unit (8px) is the atomic increment, sm (12px) for tight grouping, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Hero sections occupy full viewport height with centered content; section rhythm alternates between 40px (lg) and 64px (xl) margins to create visual breathing room. Cards and containers use md (24px) padding internally; nested elements within cards use sm (12px). The design favors generous whitespace over density—no section should feel cramped. Container max-width is enforced at 1200px to prevent line-length bloat on ultra-wide displays. Mobile br

Elevation & Depth

Depth is conveyed through a three-tier shadow and backdrop system, avoiding pure flat design while maintaining the technical aesthetic. Level 1 (Base): No shadow; surface is the foundation. Level 2 (Standard Card): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), backdrop-filter: blur(20px), background: rgba(255, 255, 255, 0.05), border: 1px solid rgba(255, 255, 255, 0.1). This creates a frosted-glass effect that separates interactive elements from the background without introducing visual clutter. Level 3 (Elevated/Modal): box-shadow: 0 27px 40px rgba(1, 3, 20, 0.2), backdrop-filter: blur(40px), b

Shapes

The shape philosophy is "Geometric Precision"—rounded corners are used strategically to soften technical interfaces without sacrificing clarity. Buttons and primary CTAs use xl (56px) border-radius, creating a pill-shaped form that feels approachable and modern; this radius is applied to all interactive elements with height ≥ 48px. Cards and containers use lg (20px) for a balanced, professional appearance; this is the default for glass-morphism surfaces. Input fields and smaller components use DEFAULT (6px) or md (8px) for subtle definition without visual noise. Dividers and borders are sharp

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses primary-container (#ffffff) background with on-primary-container text (#9e9eff), 12px vertical / 24px horizontal padding, 48px height, and xl (56px) border-radius. On hover, background shifts to #e8e8ff with a subtle glow: box-shadow: 0 4px 12px rgba(0, 153, 255, 0.2). Transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1). Button-secondary uses rgba(255, 255, 255, 0.06) background with a 1px border at rgba(255, 255, 255, 0.15); on hover, background increases to rgba(255, 255, 255, 0.12) with box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2). Button-ghost has transparent background with primary (#0099ff) text; on hover, background becomes rgba(0, 153, 255, 0.08). All buttons use label-md typography (14px, 600 weight,

Do's and Don'ts

**Do**

• Do use primary (#0099ff) exclusively for CTAs, focus states, and interactive highlights—never for backgrounds or body text.
• Do apply md (24px) padding to all cards and containers; use sm (12px) for nested elements to create visual rhythm.
• Do pair Geologica headlines with Tomorrow body text; the geometric-meets-technical contrast reinforces brand personality.
• Do use the full glass-card stack (blur 20px, rgba 0.05, border 0.1) for all interactive surfaces; consistency builds trust.
• Do enforce 48px minimum height on all buttons and interactive elements for mobile accessibility (WCAG AAA).
• Do transition all interactive states over 200–250ms using cubic-bezier(0.4, 0, 0.2, 1) for a snappy, responsive feel.
• Do use label-sm (12px, IBM Plex Mono) for technical metadata, API keys, and code snippets—the monospace signals machine-readability.

**Don't**

• Don't mix border-radius values within a single component family (e.g., all buttons must use xl, not a mix of lg and xl).
• Don't use pure black (#000000) or pure white (#ffffff) as backgrounds; always use surface (#010314) or surface-container variants.
• Don't apply shadows to glass-morphism cards beyond the canonical box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)—additional shadows create visual clutter.
• Don't use secondary (#6633ee) or tertiary (#3ddc97) for primary CTAs; reserve these for status indicators and supporting actions.
• Don't exceed 80 characters per line in body text; use max-width: 65ch on paragraphs to maintain readability.
• Don't animate opacity alone; pair it with transform: scale(0.98) on hover for tactile feedback.
• Don't use system fonts (system-ui, sans-serif); always load Geologica, Montserrat, Tomorrow, or IBM Plex Mono from Google Fonts.