Alloy
Feature Stack
Loading
Brex — About
Cool steel and deep crimson, precise sans-serifs floating in expansive, airy space.
Click any value to copy. Roles are suggestions, not gospel.
- #fc5c04oklch(67.9% 0.209 41)Dominant
- #663c2coklch(40.3% 0.065 41)Surface
- #f89a64oklch(77.2% 0.133 50)Ink
- #7c7c84oklch(58.9% 0.012 286)Accent
- #ccc4b4oklch(82.2% 0.024 85)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | inter | 72px | 500 | 1 | -1.44px | Aa Bb Cc |
| h2 | inter | 20px | 500 | 1.2 | -0.4px | Aa Bb Cc |
| h3 | inter | 20px | 500 | 1.2 | -0.4px | Aa Bb Cc |
| body | inter | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | inter | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fc5c04;
--color-surface: #663c2c;
--color-ink: #f89a64;
--color-accent: #7c7c84;
--color-detail: #ccc4b4;
}
/* CSS variables exposed by source */
:root {
--font-flecha: 'flecha', 'flecha Fallback';
--font-space-mono: 'Space Mono', 'Space Mono Fallback';
--font-bronzea: 'bronzea', 'bronzea Fallback';
--font-inter: 'inter', 'inter Fallback';
--_1k5xs26bg: 12px;
--_1k5xs26dg: "wght" 600;
--_1k5xs26au: 'inter', 'inter Fallback',-apple-system,Helvetica,Arial,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--_1k5xs269z: "wght" 400;
--_1k5xs263j: -0.35px;
--_1k5xs2618: 24px;
--_1k5xs263u: 400;
--_1k5xs261g: 24px;
--_1k5xs2647: -0.5px;
--_1k5xs26do: 24px;
--_1k5xs26x: 36px;
--_1k5xs2671: 1px;
--_1k5xs269q: 'inter', 'inter Fallback',-apple-system,Helvetica,Arial,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--_1k5xs2659: 0px;
--_1k5xs268u: 0.1em;
--_1k5xs265l: 40px;
--_1k5xs26f1: 1;
--_1k5xs2617: 16px;
--_1k5xs261y: 160px;
--_1k5xs268p: uppercase;
--_1k5xs26ea: 6px;
--_1k5xs2664: ellipsis;
--_1k5xs266: 0.5;
--_1k5xs26e6: all 0.5s ease;
--_1k5xs2678: 6px;
--_1k5xs267i: 1px;
--_1k5xs26a0: 18px;
--_1k5xs265g: 40px;
--_1k5xs266g: 1.5px;
--_1k5xs267n: rgba(66,87,138,0.15);
--_1k5xs26ei: "wght" 600;
--_1k5xs26b0: 14px;
--_1k5xs26e2: 1;
--_1k5xs266m: 1999;
--_1k5xs26fa: 1200px;
--_1k5xs26cw: "wght" 500;
--_1k5xs266j: 100;
--_1k5xs26ee: 50%;
--_1k5xs26dj: "wght" 400;
--_1k5xs264i: 32px;
--_1k5xs269j: "wght" 500;
--_1k5xs26a3: "wght" 400;
--_1k5xs265: 1;
--_1k5xs268m: 24px;
--_1k5xs26en: 1680px;
--_1k5xs265r: 60px;
--_1k5xs267t: rgba(21,25,30,0.1);
--_1k5xs26el: "wght" 400;
--_1k5xs2657: 36px;
--_1k5xs26es: 48px;
--_1k5xs26b6: 'inter', 'inter Fallback',-apple-system,Helvetica,Arial,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--_1k5xs2648: 20px;
--_1k5xs261v: 30px;
--_1k5xs2679: 7px;
--_1k5xs262g: 10px;
--_1k5xs26t: 20px;
}Drop-in prompt
Build a landing page in the visual style of Brex — About.
Reference design system (extracted from the live site):
- Palette: #fc5c04, #663c2c, #f89a64, #7c7c84, #ccc4b4
- Typefaces: inter
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/brex-com--about
