Bellroy
Feature Stack
Warm ochre and muted terracotta, clean sans-serif geometry, spacious, airy depth.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Financier Display | 80px | 300 | 0.9 | 0 | Aa Bb Cc |
| h2 | Financier Display | 64px | 300 | 1 | 0 | Aa Bb Cc |
| h3 | Financier Display | 34px | 300 | 1.15 | 0 | Aa Bb Cc |
| body | FT Base | 16px | 300 | 1.5 | 0 | Aa Bb Cc |
| button | FT Base | 16px | 300 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #b45c34;
--color-surface: #5c3c0c;
--color-ink: #cc9a81;
--color-accent: #886f5a;
--color-detail: #c4bdb4;
}
/* CSS variables exposed by source */
:root {
--text-lg: clamp(1.125rem, .188vw + 1.0808rem, 1.25rem);
--text-md: clamp(1rem, .188vw + .9558rem, 1.125rem);
--font-mono: "Fragment Mono", monospace;
--text-02: #515151;
--text-sm: .875rem;
--text-xxl: clamp(1.8125rem, .4699vw + 1.7021rem, 2.125rem);
--text-regular: 1rem;
--text-03: #2A2B2F;
--text-01: #FEF9EF;
--font-sans: "FT Base", system-ui, sans-serif;
--radius-small: .375rem;
--radius-large: clamp(1rem, .7519vw + .8233rem, 1.5rem);
--text-xs: .75rem;
--radius-xs: .25rem;
--font-serif: "Financier Display", Georgia, serif;
--radius-base: .75rem;
--text-04: #B05A36;
--radius-xl: clamp(1.5rem, 1.5038vw + 1.1466rem, 2.5rem);
--text-05: hsla(0, 0%, 45%, 1);
--text-xl: clamp(1.125rem, .5639vw + .9925rem, 1.5rem);
--beige: #FEF9EF;
--fill-04: #B05A36;
--min-viewport: 23.5;
--cream: #F5EEE1;
--section-top: clamp(3rem, 4.812vw + 1.8692rem, 6.2rem);
--midnight: #2A2B2F;
--h4: clamp(1.6875rem, .6579vw + 1.5329rem, 2.125rem);
--dark-cream: #D1C9BF;
--s6: clamp(1.25rem, .3759vw + 1.1617rem, 1.5rem);
--stroke-05: #B05A36;
--stroke-06: #737373;
--h2: clamp(3rem, 1.5038vw + 2.6466rem, 4rem);
--hero-bottom: clamp(2rem, .7519vw + 1.8233rem, 2.5rem);
--s4: clamp(.75rem, .3759vw + .6617rem, 1rem);
--s11: clamp(3.5rem, 2.2556vw + 2.9699rem, 5rem);
--s10: clamp(3rem, 1.5038vw + 2.6466rem, 4rem);
--hero-top: clamp(3rem, 3.0075vw + 2.2932rem, 5rem);
--tagline: clamp(.75rem, .3759vw + .6617rem, 1rem);
--h6: clamp(1.1875rem, .094vw + 1.1654rem, 1.25rem);
--anchor-scroll-offset: clamp( 7rem, calc( 5rem + 40px + clamp(1rem, .3759vw + .9117rem, 1.25rem) ), 9rem );
--site-margin: clamp(1.25rem, 4.1353vw + .2782rem, 4rem);
--h1: clamp(3.5625rem, 2.1617vw + 3.0545rem, 5rem);
--sidebar-quote: clamp(1.375rem, .3759vw + 1.2867rem, 1.625rem);
--error: #DB0000;
--blue: #488AD5;
--stroke-02: #D1C9BF;
--heading-xl: clamp(3.375rem, 4.3233vw + 2.359rem, 6.25rem);
--content-inset-x: clamp(1.5rem, .7519vw + 1.3233rem, 2rem);
--s12: clamp(4.5rem, 2.2556vw + 3.9699rem, 6rem);
--orange: #B05A36;
--fill-01: #FEF9EF;
--section-bottom: clamp(3rem, 4.812vw + 1.8692rem, 6.2rem);
--green: #79BD8B;
--content-main: calc(calc(90 * 1rem) - clamp(1.5rem, .7519vw + 1.3233rem, 2rem) * 2);
--s13: clamp(5rem, 3.7594vw + 4.1165rem, 7.5rem);
--h5: clamp(1.375rem, .188vw + 1.3308rem, 1.5rem);
--fill-02: #F5EEE1;
--pull-quote: clamp(1.6875rem, 1.2218vw + 1.4004rem, 2.5rem);
--h3-line-height: 1;
--stroke-01: #FEF9EF;
}Drop-in prompt
Build a landing page in the visual style of Functionhealth.
Reference design system (extracted from the live site):
- Palette: #b45c34, #5c3c0c, #cc9a81, #886f5a, #c4bdb4
- Typefaces: Financier Display, FT Base
- 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/functionhealth-com--how-it-works