Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Barclays
FinanceBarclays presents a sophisticated financial brand that balances corporate gravitas with modern accessibility. The design radiates institutional trust through its deep navy backdrop and confident typography, while the signature blue maintains warmth and approachability. The architectural hero imagery creates aspiration and stability, reinforcing the bank's establishment credentials.
Design Identity
Signature Color
Barclays Blue
#006de3
institutional trust with digital accessibility - conveying both banking heritage and modern fintech innovation
Visual Identity
The striking contrast between deep navy sections and bright white content areas, combined with the curved Barclays eagle element threading through layouts, creates an unmistakable premium banking aesthetic that feels both established and forward-thinking.
Component Style
Buttons feature generous rounded corners (18px+) with substantial padding, creating approachable pill-like shapes that soften the corporate edge. Components use subtle shadows and clean borders with moderate contrast, prioritizing accessibility over stark minimalism.
Spacing Philosophy
Generous breathing room with 24px base gaps creates executive-level spaciousness, while tighter 12px form padding maintains efficiency. The layout balances aspirational whitespace with practical information density.
Design Principles
- Typography scales dramatically from 16px body to 80px headlines for clear hierarchy
- Border radius consistently uses 18px for interactive elements
- Shadows are restrained with 0.2 opacity for subtle elevation
- Button padding maintains 10px vertical minimum for accessibility
- Color palette strictly limited to blue primary (#006de3) with neutral grays
Target Audience
Established professionals and business leaders who value institutional credibility but expect modern digital experiences - executives managing significant financial portfolios rather than everyday banking customers
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 | 80px | 700 | 76px | |
| h2 | 32px | 500 | 38px | |
| h3 | 16px | 500 | 24px | |
| p | 16px | 400 | 24px | |
| a | 16px | 500 | 24px | |
| button | 16px | 500 | 24px | |
| nav | 16px | 400 | normal | |
| footer | 16px | 400 | normal |
Color Palette
#006de3#272727#ffffff#e3000f#ffba00#000000#09821f#515151#8e8e8e#e7f0fb#f2f8fe#fde7e9
