CURATED · OPEN · FREE

Brex

Enterprise-grade financial software combining cards, banking, and AI-powered expense management.

01

Identity DNA

A high-performance financial operating system for modern enterprises.

02

Color

High-contrast foundation with a single aggressive accent to drive conversion actions.

03

Typography

grotesque-sans · humanist-sans · monospace

• display48px · 400
• heading36px · 400
• body16px · 400

Tight negative letter-spacing on display text for premium feel · Consistent weight 400 for maximum readability across all sizes · Generous line-height on body text for improved scanning

04

Spacing

Consistent 4px grid with generous whitespace padding (72px horizontal containers) to maintain clean alignment.

05

Surfaces

Minimal 1px solid borders in dark neutral (#15191E) for structural elements.

0px 1px 0px 0px rgba(66, 87, 138, 0.15) · 0px 1px 1px 0px rgba(0, 0, 0, 0.04)

06

Layout

Single-column hero leading into alternating text/illustration feature rows.

07

Motion & Interaction

Subtle linear transitions for state changes · Standard ease-in-out for complex visual shifts

Subtle opacity or color shifts on interactive elements. · Immediate state change with minimal animation delay.

08

Components

• button Solid accent fill for primary actions, ghost or text styles for secondary navigation.
• card Soft grey (#F3F3F7) backgrounds with rounded corners (12px) for feature highlights.
• chip Standardized tag styling for integration partners.
• input Clean bordered field with rounded corners and integrated primary CTA.
• hero Large display typography paired with high-fidelity 3D product renders on a neutral base.

09

Voice & Don'ts

• Tone Authoritative, efficient, and highly professional.
• Headlines Direct, benefit-driven statements emphasizing speed and scale.
• CTAs Action-oriented and concise (e.g., 'Get started', 'See a demo').

• Don't use warm or playful color palettes — screenshot shows a strict black/white/orange scheme.
• Don't apply excessive drop shadows or 3D effects to UI cards — screenshot shows flat, clean surfaces.
• Don't use decorative or serif fonts for display text — screenshot uses a clean, tight sans-serif.
• Don't clutter the layout with multiple competing accent colors — screenshot uses orange as the sole highlight.
• Don't use low-contrast text for important information — screenshot maintains high legibility with dark ink.
• Don't create loose, airy letter-spacing in headers — screenshot uses tight tracking (-0.96px) for impact.
• Avoid: Playful or overly casual language
• Avoid: Unnecessary jargon or complex financial terminology
• Avoid: Passive phrasing or weak verbs
• Avoid: Vague promises without specific value propositions

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko