Norrona
Split Studio
Loading
The World's Finest Cycling Clothing and Accessories | Rapha
Cool, muted concrete expanse; crisp sans-serif geometry, precise, purposeful, and subtly industrial.
Click any value to copy. Roles are suggestions, not gospel.
- #e72e20oklch(60.2% 0.221 30)Dominant
- #e1d4a9oklch(87.0% 0.058 93)Surface
- #66521foklch(44.8% 0.073 87)Ink
- #987e54oklch(60.7% 0.066 79)Accent
- #e2ded7oklch(90.2% 0.010 82)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | raphaSansCondensed | 64px | 700 | 0.97 | 0.3px | Aa Bb Cc |
| h2 | raphaSansCondensed | 32px | 600 | 1 | 0.3px | Aa Bb Cc |
| h3 | raphaSansCondensed | 24px | 600 | 1 | 0.3px | Aa Bb Cc |
| body | raphaSerifText | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | raphaSerifText | 16px | 400 | 1.1 | 0 | Aa Bb Cc |
Max content width 1376px
:root {
--color-dominant: #e72e20;
--color-surface: #e1d4a9;
--color-ink: #66521f;
--color-accent: #987e54;
--color-detail: #e2ded7;
}
/* CSS variables exposed by source */
:root {
--font-rapha-sans-condensed: "raphaSansCondensed", "raphaSansCondensed Fallback";
--font-rapha-sans-numerals: "raphaSansNumerals", "raphaSansNumerals Fallback";
--font-rapha-sans: "raphaSans", "raphaSans Fallback";
--font-rapha-serif-head: "raphaSerifHead", "raphaSerifHead Fallback";
--font-rapha-serif-text: "raphaSerifText", "raphaSerifText Fallback";
--_1r5fuqt1m: 24px;
--_1r5fuqt1e: 128px;
--_1r5fuqtc: #f67599;
--_1r5fuqt27: 60px;
--_1r5fuqt1o: 12px;
--_1r5fuqtn: "raphaSerifText", "raphaSerifText Fallback", serif;
--_1r5fuqt21: 38px;
--_1r5fuqtj: #3a8700;
--_1r5fuqt1r: normal;
--_1r5fuqt15: 14px;
--_1r5fuqt1b: 12px;
--_1r5fuqt1z: 14px;
--_1r5fuqt8: #333;
--_1r5fuqt7: #888;
--_1r5fuqt1: #fcfcfc;
--_1r5fuqt13: 24px;
--_1r5fuqt2e: 30px;
--_1r5fuqt1n: 16px;
--_1r5fuqth: #ef5307;
--_1r5fuqt1d: 64px;
--_1r5fuqt11: 32px;
--_1r5fuqty: 64px;
--_1r5fuqt2i: 14px;
--_1r5fuqt0: blue;
--_1r5fuqte: #ea0643;
--_1r5fuqt2d: 10px;
--_1r5fuqts: 200;
--_1r5fuqtb: #000;
--_1r5fuqtd: #fa3c6e;
--_1r5fuqt9: #3a8700;
--_1r5fuqt2h: 21px;
--_1r5fuqtt: 300;
--_1r5fuqt2c: 14px;
--_1r5fuqt1y: 16px;
--_1r5fuqtx: 700;
--_1r5fuqt16: 12px;
--_1r5fuqt1g: 24px;
--_1r5fuqt1k: 10px;
--_1r5fuqt1j: 14px;
--_1r5fuqt2b: 16px;
--_1r5fuqt19: 16px;
--_1r5fuqt26: 114px;
--focus-opacity: 100%;
--_1r5fuqt1t: 114px;
--_1r5fuqt6: #767676;
--focus-inner-color: #fff;
--_1r5fuqtp: "raphaSansNumerals", "raphaSansNumerals Fallback", sans-serif;
--_1r5fuqtu: 400;
--_1r5fuqt1p: 8px;
--_1r5fuqt1v: 62px;
--_1r5fuqt24: 21px;
--_1r5fuqt25: 14px;
--_1r5fuqt28: 42px;
--_1r5fuqtr: 100;
--_1r5fuqt2a: 20px;
}Drop-in prompt
Build a landing page in the visual style of The World's Finest Cycling Clothing and Accessories | Rapha.
Reference design system (extracted from the live site):
- Palette: #e72e20, #e1d4a9, #66521f, #987e54, #e2ded7
- Typefaces: raphaSansCondensed, raphaSerifText
- Macrostructure: Split Studio
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/rapha-cc
