A rare fintech landing carrying corporate authority without a single gradient — Flecha serif display, warm-orange accent, zero-gradient discipline. Balance-sheet trust as an aesthetic.
This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Brex’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Corporate-fintech sophistication built from flat fills, not gradients. A near-black #000000 / #15191e canvas pairs with true-white #ffffff surfaces; a single saturated warm orange #ff5900 carries every accent and CTA. Two type voices split the labor — an editorial serif (Flecha) for emotional headlines, Inter Variable for dense product copy and tabular numerics, with Space Mono for code and metadata. Elevation is a faint blue-tinted 1px shadow plus solid hairline borders — never a bloom. Discipline reads as rigor; restraint is the brand.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (near-black #000000/#15191e canvas + true-white #ffffff surfaces + a single warm-orange #ff5900 accent used sparingly + cool grays #8b8d98/#60646c for de-emphasis), the two-voice typography (a serif display family for emotional headlines, Inter for product copy and tabular numerics, Space Mono for code/metadata), the 8px-anchored spacing scale on a wide 1680px rail, flat-fill surfaces with NO gradients, hairline-border + faint-shadow elevation, and a moderate Framer Motion vocabulary (0.125s / 0.2s / 0.5s on linear / cubic-bezier(0,0,0.38,0.9) / ease-in-out) across every page and component I ship. Treat this as my project's constitution — any new component should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. Never introduce a gradient — flat fill is the discipline. When I ask you to build a page or component, enforce these rules by default and call out any decision that deviates.
Layout
Grid
Content width
Bounded
Framing
Flat
Grid strength
Strong
Monochrome enterprise field with one warm accent. Near-black #000000 (the dominant text/ink color, 1277 measured occurrences) and panel-black #15191e anchor the canvas; true-white #ffffff and near-white #fcfcfd carry surfaces. A single saturated warm orange #ff5900 (HSL 21,100,50) is the only brand-tier color and is reserved for accents/CTAs. Cool grays #8b8d98 and #60646c descend for captions and de-emphasized labels. Critically: NO gradients — every surface is a flat fill.
Mode strategylight-first
Ink #000000 (1277 occurrences) is the dominant text color; panel-black #15191e (200 occurrences) for darker surfaces and secondary text
Surfaces are flat white #ffffff (background) and near-white #fcfcfd — paired against near-black ink for ~18:1 contrast
Warm orange #ff5900 is the ONLY brand-tier color (144 occurrences, accent usage) — restrict to CTAs, key emphasis, and active states; keep surface area under ~5%
Cool gray descender #8b8d98 then #60646c for captions, metadata, and de-emphasized labels — never for primary reading text
Hairline border tint #42578a (blue-gray) appears only inside the faint elevation shadow — not as a fill
Two-voice system. Display/emotional headlines: Flecha (serif, self-hosted woff2, display: optional) — observed at 36px/40px weight 500. Body + product copy + UI: Inter (self-hosted woff2, display: swap). Code/metadata: Space Mono (monospace).
Weight ladder: 400 (body reading) / 500 (headings + UI labels) / 600 (bold emphasis, via font-variation 'wght' 600). Do not reach past 600 — Brex stays restrained.
Body Inter 16px weight 400 line-height normal; small 14px (lh 20-21px, -0.28px); caption 10-12px. Tracking is px-based and negative at every step.
Serif (Flecha) is reserved for emotional/brand headlines ONLY — never product copy, never numerics, never dense UI. The serif supplies warmth the flat palette withholds.
Tabular numerals on Inter for any aligned financial column: `font-variant-numeric: tabular-nums`. Space Mono handles inline code and kbd.
Paragraph max ~50-60 ch at 16px body; dense data rows may run wider on the 1680px rail at 14px.
Dominant base is 8px (130 measured occurrences) with a 4px micro-step. Scale: 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / 48 / 72 px — 8/16/24/32/48/72 carry the rhythm.
Container max-width 1680px (the observed container-md) for data-dense enterprise sections; narrow content clusters bound to ~400px (container-sm).
Section vertical rhythm leans on the larger steps: 48 / 72px desktop blocks; smaller 24/32px between grouped elements.
Card padding: 16-24px typical; tighter 12px on dense rows. Always pick from the scale — no magic numbers.
Gutter values for flex/grid: 4 / 8 / 16 / 20 / 24 px (8 and 16 dominate). 1px is reserved for hairline insets only.
Surface styleFlat
Surfaces are FLAT fills — no gradients (extraction confirms gradients=[]). Depth comes from solid hairline borders and faint shadow only.
Primary elevation is a faint blue-tinted hairline shadow: `box-shadow: rgba(66, 87, 138, 0.15) 0px 1px 0px 0px` (shadow-xs) or `rgba(0, 0, 0, 0.04) 0px 1px 1px 0px` (shadow-sm). Near-invisible by design.
Solid 1px hairline borders (border-hairline, 45 occurrences, solid style) do most of the structural delimiting — reach for a border before a shadow.
Heavier layered shadows exist as CSS-variable tokens (e.g. multi-layer rgba(16,24,40,...) at 0.04-0.16 opacity) for menus/popovers only — never for in-flow cards.
Techniques
Hairline border as primary delimiter
Cards and inputs default to a solid 1px border (`border: 1px solid` in a neutral gray) plus an optional `box-shadow: rgba(66,87,138,0.15) 0 1px 0 0` for a faint blue-tinted lift. Hover deepens the border color rather than adding bloom — stay flat.
Layered popover shadow (token-only)
Floating surfaces (dropdowns, tooltips) may use the captured multi-layer token `0px 1px 1px -2px rgba(16,24,40,0.12), 0px 3px 2px -2px rgba(16,24,40,0.11), 0px 0px 0px 1px rgba(16,24,40,0.04)` — soft, low-opacity, never a halo. In-flow content never uses it.
Radius scale is tight: 6px (radius-sm, buttons/chips) / 10px (radius-md, inputs) / 12px (radius-lg, cards). All three observed; do not invent values outside them.
Buttons default to 6px radius, inputs 10px, cards 12px. Pills `rounded-full` only for status indicator badges.
Icons are stroke-based at 1.5-2px weight to match the restrained, line-led aesthetic; no filled or duotone variants.
Tap targets minimum 40×40px on pointer, 44×44px on touch.
Hoverall-property shift (0.125s linear) — the most frequent interactive transition (9 occurrences), border-color / box-shadow shift (0.2s on cubic-bezier(0,0,0.38,0.9)) for inputs and focus, box-shadow + border lift (0.5s ease-in-out) for cards
Scroll patterns
Framer Motion entrance reveals (window.MotionIsMounted confirmed) — opacity + small translateY at ~0.2-0.5s
180ms is the captured CSS-variable transition duration (--_1k5xs262) on the cubic-bezier(0,0,0.38,0.9) curve — the signature interactive timing
No parallax, no theatrical scroll choreography — moderate, enterprise-appropriate motion
Primary easing: cubic-bezier(0, 0, 0.38, 0.9) — a fast-start ease-out variant carried on the 180ms / 200ms CSS-variable transitions; this is the signature curve.
Supporting easings: linear (0.125s quick state changes, most frequent), ease-in-out (0.5s card lifts), ease-out (0.25s), ease (legacy). No springs.
Four captured durations: 0.125s (quick all-property), 0.2s (border/shadow), 0.25s (ease-out), 0.5s (card lift). Plus the 80ms/40ms/180ms CSS-variable micro-timings.
Framer Motion is the animation library (confirmed via window.MotionIsMounted) — use deterministic transitions, not springs.
useReducedMotion mandatory: all animations collapse to opacity-only or disable.
No loop animations except explicit loaders.
Segmented controls / tabs for product-category switching — not toggle switches.
Accordion: single-open for FAQ; multi-open only for deep documentation.
Tooltips reveal on hover + focus; use the layered popover shadow token, dismiss on blur.
Modals for destructive or auth-gated confirmations; drawers for mobile expansions; never nested modals.
Form validation: inline below field on blur; orange #ff5900 reserved for focus/active, a separate semantic red for errors.
Empty states: small caption icon + one-line copy + a primary orange action. Restrained, no illustration sprawl.
Loading states: skeleton shimmer for content; inline spinner for buttons. No full-page overlays.
Approachdesktop-first
Desktop-first because the audience is finance and operations teams on wide displays — Brex extends its bounded container to 1680px for data-dense sections, far past the generic 1280 default. Mobile reflows the same language without a separate architecture: the page is the page, narrowed. Observed media queries cluster around 766/767, 960, 1023/1024, and 1680.
Breakpoints (observed): sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1680. The 2xl at 1680 matches the wide container rail.
Container max-width scales from ~400px (narrow clusters) to 1680px (full data-dense rail).
Hide-on-mobile is discouraged — if a control exists on desktop it should reach mobile via reflow.
Tap target minimum 44×44 on touch; 40×40 on pointer.
Typography scales proportionally: hero 72 → 48 → 36; serif display headlines drop one tier per breakpoint while negative tracking eases.
focus-visible: 2px orange #ff5900 ring with offset on every interactive element. Mandatory; never rely on hover alone.
All interactive elements reachable via Tab in logical reading order.
Color contrast: #000000 / #15191e ink on #ffffff = ~18:1 (AAA). Orange #ff5900 on white is ~3.4:1 — use it for large text / icons / fills, NOT for small body text; pair white text on orange fills for CTAs (~4.4:1, AA large).
Cool gray #60646c on white ≈ 5.4:1 (AA body); #8b8d98 on white ≈ 3.1:1 — restrict the lighter gray to large or decorative text only.
ARIA labels on icon-only buttons; aria-expanded on collapsible regions; aria-live='polite' on toasts and status updates.
Motion respects prefers-reduced-motion — animations reduce to opacity-only or disable.
Tap targets minimum 44×44 on touch; 40×40 on pointer.
Form errors announced via aria-describedby; never color-only signaling — orange and red carry text/icon partners.
Framer MotionNext/ImageLucide
Framer Motion confirmed in the extract (window.MotionIsMounted) driving moderate entrance + hover transitions. The site is Next.js (next/image observed on the hero, served via /_next/image with srcset and q85). The hero loads eager (loading='eager', 1799×867 natural); all non-LCP imagery should lazy-load. Icons stroke-based at 1.5-2px.
Framer Motion `motion.div` with `whileInView` + `viewport={{ once: true }}` for scroll reveals at 0.2-0.5s
Transitions use the signature `cubic-bezier(0, 0, 0.38, 0.9)` and durations from {0.125, 0.2, 0.25, 0.5}s — constants only, no springs
useReducedMotion guard wraps every animation primitive — no exceptions
next/image with `sizes` + `srcset` always set; `priority` only on the LCP hero (the one eager image)
No canvas, no WebGL, no Lottie, and NO CSS gradients — flat fills only
Build every surface from a flat fill — near-black, white, or warm orange. Reach for a 1px hairline border before any shadow.
Reserve orange #ff5900 for CTAs, emphasis, and active/focus states only — keep its surface area under ~5%.
Split type labor: serif (Flecha) for emotional headlines, Inter for product copy and tabular numerics, Space Mono for code/metadata.
Use `tabular-nums` on Inter for aligned financial columns.
Default to cubic-bezier(0, 0, 0.38, 0.9) at 180/200ms for interactive transitions; linear 0.125s for quick state flips.
Pass every page through useReducedMotion before shipping.
Apply a 2px orange focus-visible ring on every interactive element.
Never introduce a gradient — the extraction confirms gradients=[]. Flat fill is the discipline; a color ramp would betray the brand's trust-through-restraint thesis.
Never let the serif (Flecha) into product copy, numerics, or dense UI — it is for emotional headlines only.
Never add a second brand hue alongside orange — the single accent is load-bearing precisely because nothing competes with it.
Never use orange #ff5900 for small body text — its contrast on white (~3.4:1) fails AA for normal text; pair white-on-orange for CTAs instead.
Never substitute font weights above 600 — the 400/500/600 ladder is the restrained signature.
Never invent radii outside {6, 10, 12}px or durations outside {0.125, 0.2, 0.25, 0.5}s plus the 80/40/180ms CSS-variable micro-timings.
Never replace hairline-border elevation with a heavy bloom shadow on in-flow content.
Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS.
Spacing base 8px (4px micro-step); scale 4/8/12/16/20/24/28/32/48/72.
Container max 1680px — the observed wide enterprise rail.
Type system: Flecha (serif display) + Inter (body/UI) + Space Mono (code). Weight ladder strictly 400 / 500 / 600.
Radius scale: 6 / 10 / 12 px only.
NO gradients — flat fills only (extraction gradients=[]).
Single accent: warm orange #ff5900. Base palette black #000000 / #15191e + white #ffffff/#fcfcfd + grays #8b8d98/#60646c.
Motion: durations {0.125, 0.2, 0.25, 0.5}s plus 80/40/180ms CSS vars; easings {cubic-bezier(0,0,0.38,0.9) primary, linear, ease-in-out, ease-out, ease}. No springs.
Gradient grep: ZERO `linear-gradient` / `radial-gradient` / `conic-gradient` in CSS — every surface is a flat fill.
Container width: data-dense sections may reach 1680px; no page exceeds it.
Color grep: brand accent is exactly #ff5900; base palette stays within {#000000, #15191e, #ffffff, #fcfcfd, #8b8d98, #60646c}.
Font grep: serif (Flecha) appears only on headline elements; Inter on body/UI; Space Mono on code/kbd. No serif in numerics.
Font weight grep: only 400, 500, 600 — no 700+.
Radius grep: no border-radius outside {6, 10, 12}px.
Transition grep: timing-functions draw from {cubic-bezier(0,0,0.38,0.9), linear, ease-in-out, ease-out, ease}; durations from {0.125s, 0.2s, 0.25s, 0.5s} plus 80/40/180ms.
Elevation audit: in-flow cards use a 1px hairline border first; shadows stay ≤ 0.15 opacity, ≤ 1px blur.
Image audit: loading='lazy' on every non-LCP image; priority/eager only on the hero.
Contrast audit: ink on white ≥ 4.5:1 (AA); orange never carries small body text.
Design tokens
Observed token system
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 19 nodes across 7 levels, shallow to deep by color.
body1
div1
div3
div (×2)1
Section
Main1
Section6
div1
Section
Section (×5)
div1
Section
Section
div (×2)1
Section
[+13 more]
div1
Footer1
Nav
Accessibility
Contrast matrix
92 combinations - 44 pass AA - 26 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
AaThe quick brown fox20.48
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FCFCFD
APCA Lc
+104
Use
foreground on background
AaThe quick brown fox20.48
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FCFCFD
bg
#000000
APCA Lc
-106
Use
background on foreground
AaThe quick brown fox20.23
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#000710
APCA Lc
-108
Use
background on accent
AaThe quick brown fox20.23
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000710
bg
#FFFFFF
APCA Lc
+106
Use
accent on background
AaThe quick brown fox19.73
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FCFCFD
bg
#000710
APCA Lc
-106
Use
background on accent
AaThe quick brown fox19.73
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000710
bg
#FCFCFD
APCA Lc
+104
Use
accent on background
AaThe quick brown fox17.65
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#15191E
bg
#FFFFFF
APCA Lc
+104
Use
foreground on background
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
