Ferrari
Photographic
Soft, glass-like depths; muted rose and charcoal hues on a clean, spacious canvas.




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 |
|---|---|---|---|---|---|---|
| body | MonumentGrotesk | 15px | 410 | 1.33 | -0.225px | Aa Bb Cc |
| button | MonumentGrotesk | 15px | 500 | 1.33 | -0.225px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #d81048;
--color-surface: #781b34;
--color-ink: #f0be98;
--color-accent: #b06587;
--color-detail: #c9b7b8;
}
/* CSS variables exposed by source */
:root {
--rs-color-rgb-background-blue-autosell: 0,111,255;
--rs-line-height-caption-1: 16px;
--rs-font-weight-heavy: 800;
--rs-color-foreground-icon-neutral-faded: #cacaca;
--rs-z-index-flyout: 80;
--rs-font-size-title-3: 64px;
--rs-font-family-caption-2: MonumentGrotesk,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
--arial-medium: "ArialMedium",sans-serif;
--apkt-colors-accent050: rgba(9, 136, 240, 0.5);
--rs-easing-decelerate: cubic-bezier(0.33,1,0.68,1);
--apkt-borderRadius-64: 256px;
--rs-color-on-background-neutral: #000;
--rs-color-rgb-border-sell-faded: 255,154,249;
--apkt-tokens-core-backgroundError: rgba(223, 74, 52, 0.20);
--rs-font-family-featured-2: MonumentGrotesk,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
--rs-color-border-autosell: #006fff;
--apkt-colors-semanticWarning030: rgba(243, 161, 63, 0.3);
--apkt-durations-lg: 200ms;
--apkt-tokens-core-iconAccentCertified: #C7B994;
--apkt-typography-h1-medium-lineHeight: 50px;
--rs-font-weight-regular: 410;
--rs-color-background-positive-highlighted: #009f00;
--rs-color-rgb-background-positive-faded: 232,254,220;
--rs-color-background-blue-autosell: #006fff;
--rs-color-rgb-border-critical: 255,72,71;
--apkt-colors-accentSecondary050: rgba(199, 185, 148, 0.5);
--apkt-typography-h6-medium-letterSpacing: -0.6px;
--apkt-colors-neutrals500: #9A9A9A;
--rs-color-background-primary-highlighted: #333;
--apkt-typography-lg-medium-lineHeight: 18px;
--rs-letter-spacing-featured-2: -1.04px;
--apkt-tokens-core-borderError: #DF4A34;
--apkt-colors-productAppKit: #FF573B;
--apkt-duration-dynamic: 0ms;
--rs-color-rgb-background-primary: 18,18,18;
--rs-color-background-elevation-raised: #fafafa;
--apkt-colors-accentSecondary080: rgba(199, 185, 148, 0.8);
--apkt-colors-productCloud: #0988F0;
--rs-unit-x7: 28px;
--privy-border-radius-mdlg: 16px;
--rs-color-rgb-background-critical-faded: 252,242,241;
--apkt-spacing-7: 28px;
--apkt-tokens-theme-borderPrimaryDark: #363636;
--apkt-colors-neutrals200: #E9E9E9;
--apkt-spacing-2: 8px;
--apkt-tokens-core-glass010: rgba(255, 255, 255, 0.1);
--apkt-tokens-core-backgroundAppKit: #FF573B;
--rs-letter-spacing-title-4: -2.32px;
--apkt-easings-ease-out-power-1: cubic-bezier(0.12, 0.04, 0.2, 1.06);
--apkt-tokens-core-foregroundAccent010: rgba(9, 136, 240, 0.1);
--rs-unit-x4: 16px;
--apkt-typography-h6-regular-mono-letterSpacing: -1.2px;
--apkt-tokens-core-borderWarning: #F3A13F;
--rs-line-height-title-1: 100px;
--arial-narrow: "Arial Narrow",Arial,sans-serif;
--apkt-typography-md-regular-mono-lineHeight: 14px;
--rs-color-brand: #5a58f2;
--rs-font-size-caption-1: 13px;
--apkt-fontFamily-regular: KHTeka;
--apkt-colors-accent100: rgba(9, 136, 240, 1.0);
}Drop-in prompt
Build a landing page in the visual style of Zora.
Reference design system (extracted from the live site):
- Palette: #d81048, #781b34, #f0be98, #b06587, #c9b7b8
- Typefaces: MonumentGrotesk
- 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/zora-co