Citi

Overview

Citi is a global financial services institution that serves millions of customers across banking, lending, investing, and wealth management. The design system embodies "Institutional Modernism"—a philosophy that combines the gravitas and trustworthiness of traditional banking with clean, contemporary digital interfaces. The aesthetic prioritizes clarity and confidence: users should feel secure navigating complex financial products through intuitive, purposeful design. The brand personality is professional yet approachable, authoritative without being aloof. Citi speaks with precision and respect for the customer's time and intelligence. Example sentence in brand voice: "Your checking account is ready—start transferring funds immediately."

Colors

The color palette is anchored by Citi's signature primary blue (#056dae), a confident, institutional accent that appears on all primary call-to-action buttons, links, and interactive focus states. This blue conveys stability and financial authority while remaining modern and accessible (WCAG AA compliant at 4.5:1 contrast against white). The secondary palette uses a neutral gray scale (#333333 for body text, #666666 for secondary text, #adb5bd for borders) to create visual hierarchy without distraction. The tertiary navy (#002d72) is reserved for headings and brand-critical moments, reinforcing institutional identity. Error states use a bold red (#d60000) for immediate visibility in validation and alerts. Surface colors progress from pure white (#ffffff) through carefully calibrated grays

Typography

The type system uses Interstate as the exclusive typeface family across all scales, loaded via @font-face with woff2 format for performance. Interstate_Light (400 weight) serves as the default for body copy and headlines, creating an elegant, spacious reading experience at 16px/24px (body-md) and 18px/28px (body-lg). Interstate_Bold (700 weight) is reserved for labels, button text, and emphasis—never for body paragraphs. Display text uses Interstate_Light at 60px/68px with -0.02em letter-spacing to create visual impact without heaviness. Headline-lg (40px/48px) and headline-md (28px/36px) maintain the light weight to preserve the brand's refined character. All interactive labels use Interstate_Bold at 14px/20px with 0.01em letter-spacing to ensure button and link text reads with authority.

Layout

The layout system uses a 12-column responsive grid with a maximum container width of 1440px, centered with auto margins. The grid collapses to 6 columns at 1200px, 4 columns at 992px, and 2 columns at 768px to maintain readability on mobile. Horizontal spacing follows the semantic scale: gutter (24px) for section separation, lg spacing (40px) for major section breaks, md spacing (24px) for component padding, and sm spacing (12px) for internal element spacing. Vertical rhythm is maintained through consistent md (24px) margins between sections and lg (40px) margins between major content blocks. The container max-width of 1440px accommodates the hero section and multi-column layouts (e.g., login form + product showcase) without excessive line length. All padding uses the spacing scale: cards

Elevation & Depth

Depth in Citi's design is conveyed through subtle shadows and layering, never through color darkening or glassmorphism. The elevation system uses three levels: sm (0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)) for minor UI elements like input fields and small cards, md (0 0.5rem 1rem rgba(0, 0, 0, 0.15)) for standard cards and modals, and lg (0 1rem 3rem rgba(0, 0, 0, 0.175)) for elevated modals and overlays. Shadows are always soft and diffuse, never sharp or dramatic. Cards and containers use a 1px solid border at #dee2e6 (outline-variant) in addition to shadows to define edges crisply. Interacti

Shapes

The shape philosophy is "Refined Geometry"—rounded corners are used sparingly and purposefully to soften institutional rigidity while maintaining clarity. Buttons use 0.75rem (12px) border-radius (md) to balance approachability with formality. Input fields and standard cards use 1rem (16px) border-radius (lg) to create a slightly softer, more welcoming appearance. Modals and elevated containers use 1.5rem (24px) border-radius (xl) to signal importance and separation. Small UI elements (badges, tags, small buttons) use 0.5rem (8px) border-radius (DEFAULT) to maintain visual consistency without

Components

Action Elements Buttons are the primary interactive element and use the full primary blue (#056dae) background with white text (Interstate_Bold, 14px/20px). Primary buttons have 13px vertical and 48px horizontal padding, resulting in a 48px total height—a comfortable touch target for mobile and desktop. On hover, the background transitions to #034c81 (darker blue) over 150ms. On active/pressed state, the background darkens further to #002256. Secondary buttons use a transparent background with a 1px solid primary blue border and primary blue text; on hover, they fill with primary-container (#cce5f5) while maintaining the border. All buttons use 0.75rem (12px) border-radius and have no box-shadow by default. Focus state adds a 3px inset box-shadow in rgba(5, 109, 174, 0.1) to indicate k

Do's and Don'ts

**Do**

• Do use primary blue (#056dae) exclusively for CTAs, links, and focus states—it is the only accent color and must remain visually distinct.
• Do maintain 48px minimum height for all interactive elements (buttons, inputs, list items) to ensure comfortable touch targets on mobile.
• Do apply Interstate_Bold exclusively to button text, labels, and emphasis—never use it for body copy, which should always be Interstate_Light.
• Do use the md shadow (0 0.5rem 1rem rgba(0, 0, 0, 0.15)) as the default elevation for cards and containers; reserve lg shadow for modals and overlays only.
• Do include 1px solid borders at #dee2e6 on all cards and containers in addition to shadows to define edges crisply in light backgrounds.
• Do transition all interactive color changes over 150ms using ease-in-out timing to provide smooth, professional feedback.
• Do use the full spacing scale (xs, sm, md, lg, xl) consistently—never invent intermediate values like 18px or 32px.

**Don't**

• Don't use Interstate_Bold for body text or headlines—it creates visual noise and undermines the refined, spacious aesthetic.
• Don't apply border-radius of 0px to any element; even structural containers should have at least 0.25rem (4px) rounding to avoid harsh edges.
• Don't use colors outside the defined palette (e.g., custom greens, purples, or oranges) for UI elements—all interactive states must use primary blue or error red.
• Don't create buttons smaller than 48px in height or with less than 13px vertical padding; smaller touch targets frustrate users and violate accessibility standards.
• Don't apply shadows without borders on light backgrounds; the combination of both creates clear, professional definition.
• Don't use opacity or transparency for primary UI elements (buttons, inputs, cards)—all backgrounds should be solid colors from the palette.
• Don't exceed 1440px container max-width; wider layouts create excessive line length and reduce readability of Interstate at 16px body size.