Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Citi
FinanceCiti's brand exudes institutional banking gravitas through its sophisticated navy-and-white palette that communicates unwavering financial stability and corporate trust. The Interstate typeface creates a distinctly American, highway-sign clarity that speaks to accessibility and straightforward navigation through complex financial landscapes.
Design Identity
Signature Color
Citi Corporate Blue
#056dae
institutional banking authority and trustworthy financial guidance
Visual Identity
The distinctive Interstate typeface family creates an unmistakably American, highway-inspired aesthetic that feels both governmental and approachable - like financial road signs guiding customers through banking decisions.
Component Style
Clean rectangular cards with subtle shadows (0.5rem standard, 1rem for emphasis) and soft rounded corners. Buttons use Interstate typography with medium weight, creating a professional yet approachable feel. Light gray borders (#dee2e6) provide gentle definition without harsh contrast.
Spacing Philosophy
Generous whitespace creates breathing room between major sections, while the left-aligned login form uses efficient vertical spacing. The layout balances promotional content with functional elements through strategic density variation.
Design Principles
- Interstate font family exclusively for headings and UI elements
- Navy blue (#056dae) for primary actions and links
- Shadow hierarchy: 0.125rem for subtle, 0.5rem standard, 1rem for prominence
- Light gray (#f8f9fa to #e9ecef) background progression for depth
- 500 font weight for all headings, creating consistent visual hierarchy
Target Audience
Established professionals and families seeking traditional banking relationships with modern digital convenience, valuing institutional stability over fintech innovation
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 16px | 400 | normal | |
| h1 | 40px | 500 | 48px | |
| h2 | 32px | 500 | 38.4px | |
| h3 | 28px | 500 | 33.6px | |
| h4 | 26px | 500 | 32px | |
| p | 16px | 700 | 24px | |
| a | 16px | 400 | 24px | |
| button | 16px | 400 | 24px | |
| input | 16px | 700 | 24px | |
| header | 18px | 700 | normal |
Color Palette
#cce2ce#ced4da#333333#ffffff#000000#e9ecef#f8f9fa#056dae#002256#d63384#dee2e6#002d72
