Sumsub

Overview

Sumsub is an enterprise-grade identity verification and trust infrastructure platform built for compliance operations at scale. The design system embodies "Precision Minimalism"—a philosophy that prioritizes clarity, trust, and operational efficiency through clean typography, strategic use of electric blue accents, and a light, airy interface that reduces cognitive load for compliance teams. The brand serves fintech, crypto, gaming, and regulated sectors where trust and verification are non-negotiable.

The voice is authoritative yet approachable, confident without being corporate. Sumsub communicates in direct, outcome-focused language: "Verify users, businesses, or transactions" rather than "enable verification workflows." The tone is precise, data-driven, and solution-oriented. Example sentence in brand voice: "Reduce manual review time by 60% while maintaining the highest pass rates in the industry."

Colors

The color system is anchored on a vibrant electric blue primary (#1764ff) that signals trust, security, and action. This blue is used exclusively for primary CTAs, focus states, and key interactive elements—it appears on the hero "Sign up" button and all primary actions throughout the interface. The supporting palette includes a fresh mint green (#34ffc2) for success states and positive feedback, a soft lavender (#d6e4ff) for primary containers and secondary surfaces, and a deep charcoal (#0a0c0e) for primary text and critical information. The surface stack progresses from pure white (#ffffff) for the main canvas through subtle grays (#f4f5fb, #dee2ed) for layered containers, creating visual hierarchy without introducing darkness. Error states use a clear red (#cb0b0b) for destructive acti

Typography

The typography system uses Aeonik Pro exclusively, a geometric sans-serif that conveys modernity and precision. The type hierarchy spans from display (144px, 700 weight) for hero headlines down to label-sm (12px, 500 weight) for metadata and helper text. Headlines (56px–40px) use regular weight (400) with tight negative letter-spacing (-0.02em to -0.01em) to create visual impact and reduce perceived size, while body text (18px–16px) maintains regular weight and neutral letter-spacing for readability. The system uses weight strategically: 400 for body and headlines, 500 for labels and interactive elements, and 700 only for display-level emphasis. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on small labels (12px–14px) when placed over light backgrounds to ensure legibility. Line-height

Layout

The layout uses a 12-column grid system with a maximum container width of 1440px, maintaining a fluid responsive design that adapts from 360px mobile viewports to 1920px+ desktops. The grid gutter is 16px on tablet/desktop (1080px+) and 8px on mobile, with container margins of 24px on tablet and 16px on mobile. White-space is generous and intentional: section separation uses lg spacing (40px) to create visual breathing room between content blocks, while internal component padding uses md spacing (24px) for cards and lg spacing (40px) for hero sections. The spacing scale is semantic—use unit (8px) for micro-interactions, sm (12px) for component internals, md (24px) for section padding, and lg (40px) for major section breaks. The design favors ample negative space over density, reflecting th

Elevation & Depth

Depth is achieved through subtle shadows and layering rather than dramatic effects. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on flat elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals at rest, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements like dropdowns and overlays. Cards use a 1px border in outline color (#dee2ed) paired with md shadow to create separation from the white background. Modals and overlays use a semi-transparent dark overlay (rgba(0, 0, 0, 0.4)) with backdrop-filter: blur(4px) to create focus and d

Shapes

The shape philosophy is "Functional Geometry"—rounded corners are used strategically to soften the interface while maintaining a professional, technical aesthetic. Buttons and primary interactive elements use 8px radius (DEFAULT), creating a subtle roundness that feels modern without appearing playful. Cards and containers use 24px radius (lg) for a more pronounced softness, signaling secondary content areas. Input fields and form elements use 8px radius to align with buttons and create visual consistency in form layouts. Full-width elements like modals and hero sections use 30px radius (xl) f

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use electric blue (#1764ff) background with white text, 8px border-radius, and 15.5px vertical / 32px horizontal padding, resulting in a 48px height. On hover, the background transitions to #004be0 over 150ms with ease timing. On active/press, the background darkens to #003cb3. Secondary buttons use a white background with a 1px #dee2ed border, dark text, and the same padding and radius. On hover, the background shifts to #f4f5fb and the border becomes dark (#0a0c0e). All buttons use Aeonik Pro at 14px, 500 weight, with letter-spacing: 0.01em. Avoid using both primary and secondary buttons in the same row unless one is clearly subordinate; instead, use a primary button with a text link alternative.

Contai

Do's and Don'ts

**Do**

• Do use primary blue (#1764ff) exclusively for primary CTAs and focus states—never use it for decorative elements or backgrounds.
• Do maintain 40px (lg) spacing between major sections to create visual breathing room and reduce cognitive load.
• Do pair Aeonik Pro regular weight (400) with generous line-height (1.5–1.6x) for body text to ensure legibility in compliance workflows.
• Do use 8px border-radius for buttons and inputs, 24px for cards, and 9999px for badges to create a clear visual hierarchy.
• Do apply md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and containers to create subtle depth without visual heaviness.
• Do use the full color palette—mint green for success, red for errors, lavender for secondary surfaces—to create clear semantic meaning.

**Don't**

• Don't use the primary blue for backgrounds, body text, or decorative elements; reserve it exclusively for interactive states and CTAs.
• Don't mix rounded corner sizes arbitrarily; stick to the defined scale (8px, 16px, 24px, 30px, 9999px) to maintain visual consistency.
• Don't use shadows larger than lg (0 8px 24px) on any element; excessive shadow depth contradicts the clean, minimal aesthetic.
• Don't apply letter-spacing to body text; use it only on headlines (-0.02em to -0.01em) and labels (0.01em to 0.05em) for emphasis.
• Don't reduce padding below 12px (sm) on interactive elements; maintain minimum touch targets of 48px height for accessibility.
• Don't use more than two font weights in a single interface; stick to 400 (regular) and 500 (medium) for consistency.