Digit Insurance

Overview

Digit Insurance is India's leading digital-first general insurance company, transforming the insurance experience through bold, accessible design. The brand embodies a "Confident Minimalism" aesthetic—pairing a vibrant, energetic primary yellow (#ffbb00) with clean white surfaces, crisp black typography, and strategic use of cool blue accents. This design language communicates trust, clarity, and approachability to 8 Crore+ Indian customers navigating complex insurance products. The UI prioritizes directness and simplicity: no unnecessary ornamentation, no dark patterns, just clear pathways to protection.

Digit's voice is conversational yet authoritative—friendly without being flippant, expert without being condescending. The brand speaks in active, benefit-driven language: "Do the Digit Insurance," "Trusted by 8 Crore+ Indians," "0% GST on Premium." Vocabulary favors action verbs and concrete outcomes over insurance jargon. Example sentence: "Renew your policy in 60 seconds, zero paperwork, full coverage."

Colors

The Digit color system is anchored by a bold, high-saturation primary yellow (#ffbb00) that dominates CTAs, badges, and key interactive elements. This yellow is not decorative—it is the brand's signature accent, instantly recognizable and designed to stand out against the clean white (#ffffff) surfaces that form the foundation of every page. The on-primary text color is a neutral dark gray (#444444), ensuring 7:1+ contrast and readability even at small sizes (12px labels on yellow badges). Secondary blue (#1a73e8) is reserved for links, secondary actions, and data-driven contexts (e.g., "View Prices" buttons, form validation states). The surface stack uses a light, airy palette: surface-container (#e3e6ec) for subtle dividers and grouped content, surface-container-low (#f1f1f1) for hover s

Typography

Mulish is the sole typeface across all scales, chosen for its geometric clarity and strong weight range (300–900). The type system uses weight as the primary differentiator: Display and Headline levels employ 800–900 weight (e.g., h1 at 32px, 800 weight, 40px line-height) to command attention and convey authority, while body text uses 400 weight for legibility at 16px and 18px sizes. Labels and badges leverage 600–700 weight to signal interactivity and importance without increasing size. Letter-spacing is minimal (0 to 0.02em) to maintain the brand's compact, confident aesthetic. On small labels over busy backgrounds (e.g., yellow badges on product cards), apply text-shadow: 0 1px 2px rgba(0,0,0,0.08) to ensure legibility without compromising the bold yellow appearance. Line-height is cons

Layout

Digit uses a fluid 12-column grid with a max-width of 1280px, allowing content to scale responsively from mobile (single column, 16px gutter) to desktop (multi-column, 32px gutter). The page rhythm is driven by consistent spacing: section separators use lg spacing (40px), card groups use md spacing (24px), and internal card padding uses md spacing (24px). The hero section establishes the visual hierarchy: a bold headline ("Do the Digit Insurance") at 32px/800 weight, followed by a trust statement ("Trusted by 8 Crore+ Indians") in body-lg, then a product carousel with icon + label pairs. Below the hero, form inputs (Registration Number, Mobile Number) are laid out in a 2-column grid on desktop, collapsing to single-column on tablet. The primary CTA ("View Prices") sits to the right of the

Elevation & Depth

Digit's elevation system is subtle and functional, using soft shadows to separate layers without introducing depth illusion. The standard card shadow is box-shadow: 0 4px 20px rgba(227,230,236,0.8)—a light, diffuse shadow that lifts cards 4px above the surface. On hover, cards transition to box-shadow: 0 3px 8px rgba(0,0,0,0.15), a tighter shadow that suggests interactivity without dramatic depth. Input fields and form elements use no shadow by default, relying instead on a 1px solid border (#dddddd) to define their boundary. On focus, inputs gain a 3px inset box-shadow: 0 0 0 3px rgba(255,187

Shapes

Digit employs a "Soft-Technical" shape philosophy: rounded corners are present but restrained, signaling approachability without sacrificing the brand's professional, data-driven identity. Buttons use 8px border-radius (rounded.md), creating a subtle softness that feels modern without being playful. Cards and containers use 4px border-radius (rounded.DEFAULT) for a more technical, grid-aligned appearance. Input fields also use 4px radius, maintaining visual consistency with the form-heavy nature of insurance products. Badges and chips use full border-radius (9999px) to signal their role as dis

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses backgroundColor: #ffbb00, textColor: #444444, fontSize: 18px, fontWeight: 900, padding: 12px 24px, height: 48px, borderRadius: 8px. On hover, the background shifts to #ffaa00 (inverse-primary) with a smooth transition: all 200ms ease-out. The secondary button uses a white background with a 1px #dddddd border, fontSize: 12px, fontWeight: 800, padding: 6px 16px, height: 32px, borderRadius: 9999px (full pill shape). Secondary buttons are used for tertiary actions ("Download Policy," "Renew Digit Policy") and maintain the same hover behavior: backgroundColor transitions to #f1f1f1 over 200ms.

Containers & Surfaces Cards are the primary content container, using backgroundColor: #ffffff, borderRadius:

Do's and Don'ts

**Do**

• Do use the primary yellow (#ffbb00) exclusively for CTAs, badges, and focus states—it is the brand's signature and must remain distinctive.
• Do maintain 4.5:1 minimum contrast between text and background; test all color combinations with WCAG AA standards.
• Do use Mulish 800–900 weight for headlines and 400 weight for body text; avoid intermediate weights in UI components.
• Do apply generous white-space (md/lg spacing) around form inputs and CTAs to reduce cognitive load and guide user focus.
• Do use 4px border-radius for structural elements (cards, inputs) and 8px for interactive elements (buttons) to maintain visual hierarchy.
• Do transition all interactive states (hover, focus, active) over 150–200ms using ease-out timing to feel responsive without jarring.

**Don't**

• Don't use colors outside the defined palette—no custom hex values, no brand-adjacent yellows or blues that dilute recognition.
• Don't apply shadows heavier than 0 4px 20px rgba(227,230,236,0.8); Digit's aesthetic is light and airy, not dark or dramatic.
• Don't mix typefaces; Mulish is the sole font family across all scales and weights.
• Don't use border-radius values other than 4px, 8px, or 9999px; inconsistent rounding fragments the visual system.
• Don't place text directly on the primary yellow without sufficient contrast; always use #444444 text or apply a subtle text-shadow.
• Don't disable form inputs without clear visual feedback (e.g., backgroundColor: #f5f5f5, color: #999999, cursor: not-allowed).