French brand of high-end sneakers. – Belledonne Paris
Specimen
Bold crimson geometry on a muted beige field, stark and meticulously arranged.




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 | font | 12px | 700 | 1.33 | 0 | Aa Bb Cc |
| h2 | font | 12px | 700 | 1.33 | 0 | Aa Bb Cc |
| body | font | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | font | 14px | 700 | 1.14 | -0.35px | Aa Bb Cc |
| button | font | 24px | 400 | 1.33 | -0.6px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fc0808;
--color-surface: #f4928e;
--color-ink: #830101;
--color-accent: #970101;
--color-detail: #ece3db;
}
/* CSS variables exposed by source */
:root {
--text-2xl: 1.5rem;
--text-7xl: 4.5rem;
--text-lg: 1.125rem;
--color-neutral-600: lab(34.924% 0 0);
--text-8xl--line-height: 1;
--color-neutral-500: lab(48.496% 0 0);
--color-neutral-300: lab(84.92% 0 -.0000119209);
--text-5xl--line-height: 1;
--text-base--line-height: calc(1.5/1);
--color-neutral-200: lab(90.952% 0 -.0000119209);
--text-9xl--line-height: 1;
--text-lg--line-height: calc(1.75/1.125);
--color-white: #ede4dd;
--color-cream: #ede4dd;
--radius-sm: .25rem;
--font-weight-bold: 700;
--color-red: #ff0001;
--text-6xl: 3.75rem;
--text-xs--line-height: calc(1/.75);
--color-neutral-700: lab(27.036% 0 0);
--color-neutral-50: lab(98.26% 0 0);
--radius-md: .375rem;
--text-7xl--line-height: 1;
--color-neutral-900: lab(7.78201% -.0000149012 0);
--text-xl: 1.25rem;
--radius-lg: .5rem;
--color-neutral-100: lab(96.52% -.0000298023 .0000119209);
--text-9xl: 8rem;
--text-2xl--line-height: calc(2/1.5);
--spacing: .25rem;
--text-8xl: 6rem;
--text-xl--line-height: calc(1.75/1.25);
--font-weight-semibold: 600;
--text-sm: .875rem;
--font-weight-extrabold: 800;
--color-blue-600: lab(44.0605% 29.0279 -86.0352);
--text-4xl: 2.25rem;
--text-sm--line-height: calc(1.25/.875);
--color-gray-200: lab(91.6229% -.159115 -2.26791);
--text-3xl--line-height: calc(2.25/1.875);
--text-5xl: 3rem;
--text-3xl: 1.875rem;
--color-black: #000;
--text-xs: .75rem;
--font-weight-medium: 500;
--font-weight-normal: 400;
--color-neutral-400: lab(66.128% -.0000298023 .0000119209);
--color-neutral-800: lab(15.204% 0 -.00000596046);
--radius-xl: .75rem;
--text-6xl--line-height: 1;
--text-4xl--line-height: calc(2.5/2.25);
--text-base: 1rem;
--ease-soft-bounce: cubic-bezier(.34,1.56,.64,1);
--tw-ring-shadow: 0 0 #0000;
--ease-in-extreme: cubic-bezier(.7,0,.84,0);
--ease-back-out: cubic-bezier(.175,.885,.32,1.275);
--ease-accelerate: cubic-bezier(.4,0,1,1);
--cursor-color: #ff0001;
--ease-back-in-out: cubic-bezier(.68,-.55,.265,1.55);
--ease-out-smooth: cubic-bezier(.5,1,.89,1);
}Drop-in prompt
Build a landing page in the visual style of OUTFIT® by ++hellohello.
Reference design system (extracted from the live site):
- Palette: #fc0808, #f4928e, #830101, #970101, #ece3db
- Typefaces: font
- Macrostructure: Specimen
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/outfit-hellohello-is