Veriff

Overview

Veriff is the global leader in identity verification software, trusted by enterprises across 230+ countries to verify documents, biometrics, and screen databases in real-time. The design system embodies 'Trust-Driven Minimalism'—a sophisticated aesthetic that balances professional restraint with vibrant, purposeful accents. The brand personality is authoritative yet approachable: precise, transparent, and forward-thinking. The UI prioritizes clarity and confidence, using a deep teal accent (#14e5c5) to signal security, innovation, and momentum. Every interaction feels deliberate and trustworthy, never frivolous.

The voice is direct and assured without being corporate-speak. Sentences are active, benefit-focused, and grounded in real outcomes. Example: 'Verify identities in 3 seconds. Stop fraud before it costs you.' The typography system uses Inter throughout, with generous line-height and letter-spacing to ensure readability at all scales. The color palette—anchored by a dark navy-teal hero gradient (#03282c to #14142a) and a bright teal primary (#14e5c5)—creates visual contrast that guides users through the platform with confidence.

Colors

The color system is built on a foundation of trust and clarity. Primary (#14e5c5) is the signature teal accent used exclusively for call-to-action buttons, interactive states, focus rings, and key brand moments. It appears frequently on the hero CTA ('Talk to us') and throughout the interface to signal actionable elements. On-primary (#0c3035) is a deep navy-teal that ensures legible text over the bright teal background with a contrast ratio exceeding 7:1. Secondary (#1863dc) is a corporate blue reserved for secondary actions, links, and data visualization. Tertiary (#e02006) is a vivid red used sparingly for error states, alerts, and critical warnings. The surface stack progresses from pure white (#ffffff) for primary content areas through soft grays (#f6fdfc, #f4f4f4) for container backg

Typography

The type system uses Inter exclusively, a geometric sans-serif that conveys modernity and precision. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and brand moments, commanding attention with tight tracking. Headline-lg (40px, 600 weight) is used for major section titles and page headings, maintaining visual hierarchy with a -0.02em letter-spacing. Headline-md (28px, 600 weight) breaks down complex information into digestible sections. Title-lg (20px, 600 weight) labels key features and card titles. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for long-form content, with generous line-height (1.56x) to ensure comfort. Body-md (16px, 400 weight, 24px line-height) is used for secondary content, form labels, and UI text. Label-md

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, ensuring content remains readable on all screen sizes. The gutter (24px) provides consistent horizontal spacing, while vertical rhythm is maintained through a spacing scale: xs (4px), sm (12px), md (24px), lg (40px), xl (64px). Section separation uses lg spacing (40px) to create breathing room between major content blocks. The hero section spans full-width with 80px vertical padding and a minimum height of 600px, creating an immersive entry point. Cards and containers use md padding (24px) internally, with md spacing (24px) between adjacent elements. The grid is fluid on mobile (single column) and expands to multi-column layouts on tablet and desktop. White-space is treated as a design element—never cramped,

Elevation & Depth

Elevation is conveyed through subtle shadows and layering, never through color alone. The shadow system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle elevation on small components like badges and list items; md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and input fields; lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals, dropdowns, and floating elements. The hero section uses a dark gradient background (linear-gradient(135deg, #0c3035 0%, #14142a 100%)) to create depth without relying on shadows. Cards have a 1px border in surface-variant (#dedfe0) to define edges wit

Shapes

The shape philosophy is 'Approachable Precision'—rounded corners that feel modern and friendly without sacrificing clarity. Buttons use lg radius (1rem / 16px) for a soft, inviting appearance that encourages interaction. Cards and containers use xl radius (1.5rem / 24px) to create a premium, polished feel. Input fields use DEFAULT radius (0.5rem / 8px) for a more structured, form-like appearance. Badges and pills use full radius (9999px) to create a cohesive, unified look. The hero section has no border-radius (0px), maintaining a full-bleed, cinematic quality. Modals and overlays use lg radiu

Components

Action Elements Buttons are the primary mechanism for user action. Button-primary uses the signature teal (#14e5c5) background with deep navy text (#0c3035), 700 font-weight, and lg radius (16px). Padding is 8px 24px with a fixed height of 48px, ensuring touch-target compliance. On hover, the background transitions to #00b8a3 (a darker teal) over 200ms with ease-in-out timing. Button-secondary uses a transparent background with a 2px teal border and teal text, maintaining visual consistency while signaling a lower-priority action. On hover, the background fills with primary-container (#e5f4ef) and text shifts to on-primary-container (#00754e). Button-tertiary is used for tertiary actions like 'Learn more' or 'Dismiss'—transparent background with on-surface text, md radius (12px), and a

Do's and Don'ts

**Do**

• Do use the primary teal (#14e5c5) exclusively for call-to-action buttons and key interactive moments—it's the brand's signature accent and should never be diluted or overused.
• Do maintain at least 1.5x line-height on all body text (18px body-lg should have 28px line-height) to ensure readability and reduce cognitive load.
• Do apply the full 12-column grid with 24px gutters consistently across all breakpoints to create predictable, aligned layouts.
• Do use the md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) as the default elevation for cards and containers—reserve lg shadow for modals and floating elements only.
• Do pair Inter 700 weight with lg radius (16px) on all primary buttons to create a cohesive, inviting call-to-action style.

**Don't**

• Don't use the primary teal (#14e5c5) for body text, backgrounds, or non-interactive elements—it's reserved for actions and focus states only.
• Don't apply shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.12)) on standard components; excessive shadow creates visual noise and reduces clarity.
• Don't mix border-radius values arbitrarily—stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't use letter-spacing tighter than -0.04em or looser than 0.1em on body text; extreme tracking reduces readability.
• Don't place small text (label-sm) over busy backgrounds without a 0 2px 4px rgba(0, 0, 0, 0.15) text-shadow to ensure legibility.