Lexus
Photographic
Loading
Ferrari
Deep crimson and charcoal, crisp sans-serif, vast, frozen expanse of confident power.
Click any value to copy. Roles are suggestions, not gospel.
- #e16867oklch(66.4% 0.152 23)Dominant
- #832625oklch(41.4% 0.128 25)Surface
- #f8d7cdoklch(90.4% 0.039 38)Ink
- #994f4foklch(51.7% 0.099 21)Accent
- #c4b6b0oklch(78.6% 0.018 45)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | FerrariSans | 26px | 500 | 1.5 | 0.195px | Aa Bb Cc |
| h3 | FerrariSans | 16px | 500 | 1.4 | 0.08px | Aa Bb Cc |
| body | FerrariSans | 13px | 400 | 1.5 | 0.195px | Aa Bb Cc |
| button | Body-Font | 12px | 400 | 1.27 | 1px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #e16867;
--color-surface: #832625;
--color-ink: #f8d7cd;
--color-accent: #994f4f;
--color-detail: #c4b6b0;
}
/* CSS variables exposed by source */
:root {
--f-shadow-small: 0px 4px 8px 0px rgba(0,0,0,.1);
--f-color-accessible-warning: #f13a2c;
--f-color-global-black-rgb: 24,24,24;
--f-space-super: 128px;
--f-space-xxl: 96px;
--f-space-xxs: 8px;
--f-color-gradient-to-background: linear-gradient(0deg,rgba(255,255,255,1) 68%,rgba(255,255,255,0));
--f-color-ui-10: #f7f7f7;
--f-radius-full: 9999px;
--f-color-accent-80: #9d2211;
--f-color-accent-100-rgb: 218,41,28;
--f-color-ui-20: #d2d2d2;
--f-color-background-10: #ebebeb;
--f-color-accessible-success: #03904a;
--f-color-black-10: #f7f7f7;
--f-color-black-20: #d2d2d2;
--f-color-ui-100: #181818;
--f-color-gradient-highlight-light: linear-gradient(0deg,#cdcbcb,#cdcbcb),radial-gradient(56.76% 37.59% at 50% 0%,rgba(48,48,48,.6) 0%,rgba(48,48,48,6e-5) 100%);
--f-space-m: 32px;
--f-color-accent-100: #da291c;
--f-space-xl: 64px;
--f-space-xxxs: 4px;
--f-color-black-50: #8f8f8f;
--f-color-gradient-red: linear-gradient(180deg,#a00c01,#da291c 64%);
--f-color-black-60: #666;
--f-space-l: 48px;
--f-color-ui-10-rgb: 247,247,247;
--f-color-ui-0: #fff;
--f-color-black-55: #969696;
--f-color-global-white-rgb: 255,255,255;
--f-space-xs: 16px;
--f-color-gradient-highlight-dark: linear-gradient(0deg,rgba(239,237,237,.4),rgba(239,237,237,.4)),radial-gradient(56.76% 37.59% at 50% 0%,hsla(0,0%,100%,.8) 0%,rgba(255,255,255,8e-5) 100%);
--f-space-s: 24px;
--f-ferrari-font: "FerrariSans";
--f-color-yellow-hypersail: #fff200;
--f-color-black-10-rgb: 247,247,247;
--f-color-black-90: #303030;
--f-color-ui-90: #303030;
--f-color-yellow: #f6e500;
--f-color-gradient-shadow-light: linear-gradient(180deg,rgba(24,24,24,0),rgba(24,24,24,.85));
--f-color-accent-90: #b01e0a;
--f-color-ui-90-rgb: 48,48,48;
--f-color-gradient-dark-grey: linear-gradient(180deg,#3c3c3c,#030303 64%);
--f-color-background-0: #fff;
--f-color-overlay: rgba(0,0,0,.3);
--f-color-chapter: #da291c;
--f-color-overlay-darker: hsla(0,0%,7%,.8);
--f-color-global-black: #181818;
--f-color-gradient-shadow-dark: linear-gradient(90deg,#121212,#161616);
--f-color-yellow-hypersail-rgb: 255,242,0;
--f-color-yellow-rgb: 246,229,0;
--f-color-accessible-info: #4c98b9;
--f-color-ui-60: #666;
--f-color-black-90-rgb: 48,48,48;
--f-color-ui-50: #8f8f8f;
--f-color-focus: #da291c;
--f-color-ui-100-rgb: 24,24,24;
--f-color-background-0-rgb: 255,255,255;
--f-color-global-white: #fff;
}Drop-in prompt
Build a landing page in the visual style of Ferrari.
Reference design system (extracted from the live site):
- Palette: #e16867, #832625, #f8d7cd, #994f4f, #c4b6b0
- Typefaces: FerrariSans, Body-Font
- Macrostructure: Photographic
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/ferrari-com--en-ca-manufacturing-academy-2024
