Brex
A premium corporate finance platform built on a near-black canvas (#0A0A0A) with white text and a warm amber-gold accent (#F5A623) that appears on key CTAs and card metallic moments. Brex's visual language communicates wealth, trust, and modernity — this is financial infrastructure for companies that take themselves seriously. Typography is set in a custom geometric sans at tight tracking and high contrast weights. The card imagery uses gradient metal textures (black to charcoal with subtle gold sheen). The overall feel is more like a premium credit card brand than a fintech startup — deliberate, assured, and status-signaling.
Color Tokens
1. Visual Theme & Atmosphere
Brex is fintech that doesn't feel like fintech. The dark canvas communicates premium and modern over safe and institutional. The Brex card — a sleek black card with gold typography — is the product's most powerful design artifact, and the brand builds outward from it. Gold appears sparingly, used to signal approved credit and key moments rather than as a dominant UI color. The dashboard product uses whites and light grays for data density; the marketing site uses the dark palette for drama.
2. Color System
Dark marketing palette:
- Canvas: #0A0A0A — nearly true black, confident and premium
- Gold accent: #F5A623 — used on hero CTAs, card metallic details, key highlights
- Ink: #F8F8F8 — warm white for legibility against dark surfaces
- Surfaces: #141414 / #1E1E1E — subtle layering without lightening the overall darkness
Product dashboard (light):
- Canvas: #FFFFFF — clean, high-contrast data environment
- Light surfaces: #F5F5F5 — panel backgrounds
- Primary still #F5A623 for interactive states
3. Typography
Brex Sans (Inter-derived custom) at 600 weight with -0.03em tracking at display sizes. The tight tracking communicates precision and financial exactitude. Body runs at -0.01em, slightly tighter than neutral. No expressive serifs — the identity is modern and technical.
4. Components & Patterns
- Physical card render: 3D-ish hero with gradient dark surface and embossed gold type
- Spend analytics: Chart components with amber/gold highlight bars, clean data labels
- Transaction list: Dense table, merchant logo + name + amount + category, minimal borders
- Limit display: Large number typography, gold accent on credit available
- Dashboard cards: White panels with bold KPIs and subdued supporting text
- CTA button: Dark + gold on marketing; standard blue-action in product
5. Spacing & Layout
Marketing: full-bleed dark sections, 1440px max, hero sections 100vh. Product: standard dashboard with 240px sidebar, content area max 1200px. Card component: 85.6×54mm credit card aspect ratio (standard ISO/IEC 7810).
6. Motion & Interaction
Card hero rotates subtly on mouse parallax. Dashboard numbers animate in with count-up on load. Transaction feed loads with skeleton shimmer. Transitions use 240ms with ease — premium feel, not sluggish.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for