Peloton
Split Studio
Loading
Genelec
Crisp, cool grey geometry—precise sans-serifs float on vast, softly shadowed planes.
Click any value to copy. Roles are suggestions, not gospel.
- #ab8e43oklch(65.8% 0.100 88)Dominant
- #3c270boklch(29.2% 0.052 71)Surface
- #e4d4bboklch(87.6% 0.038 79)Ink
- #898277oklch(61.0% 0.018 79)Accent
- #b4afa0oklch(75.4% 0.022 92)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | helvetica-neue-lt-pro | 48px | 800 | 1.2 | 0 | Aa Bb Cc |
| h2 | helvetica-neue-lt-pro | 36px | 700 | 1.2 | -0.5px | Aa Bb Cc |
| h3 | helvetica-neue-lt-pro | 21px | 700 | 1.2 | 0 | Aa Bb Cc |
| body | -apple-system | 14px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | helvetica-neue-lt-pro | 14px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1280px
:root {
--color-dominant: #ab8e43;
--color-surface: #3c270b;
--color-ink: #e4d4bb;
--color-accent: #898277;
--color-detail: #b4afa0;
}
/* CSS variables exposed by source */
:root {
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--primary: #007bff;
--secondary: #6c757d;
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--light: #f8f9fa;
--indigo: #6610f2;
--yellow: #ffc107;
--green: #28a745;
--pink: #e83e8c;
--breakpoint-xs: 0;
--purple: #6f42c1;
--teal: #20c997;
--gray-dark: #343a40;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--blue: #007bff;
--danger: #dc3545;
--white: #fff;
--success: #28a745;
--gray: #6c757d;
--warning: #ffc107;
--red: #dc3545;
--cyan: #17a2b8;
--info: #17a2b8;
--dark: #343a40;
--breakpoint-xl: 1200px;
--orange: #fd7e14;
}Drop-in prompt
Build a landing page in the visual style of Genelec.
Reference design system (extracted from the live site):
- Palette: #ab8e43, #3c270b, #e4d4bb, #898277, #b4afa0
- Typefaces: helvetica-neue-lt-pro, -apple-system
- 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/genelec-com
