extraído de ferrari.com Ver sitio ↗

Ferrari

A luxury-automotive brand whose marketing surfaces read as cinematic editorial. The base canvas is **near-black** (`#181818`) holding pure white display type; white-canvas bands appear only inside specific editorial contexts (preowned listings, pricing tables).

dark mode red 20 colores Oscuro Cinemático

ferrari.com

Color

dark · 20 colors

Primary

#da291c

primary

#b01e0a

primary-active

#9d2211

primary-hover

Ink

#ffffff

ink

#969696

body

#ffffff

body-strong

#181818

body-on-light

#666666

muted

#8f8f8f

muted-soft

#ffffff

on-primary

#ffffff

on-dark

Brand

#303030

hairline

#d2d2d2

hairline-on-light

#ebebeb

hairline-soft

Surface

#181818

canvas

#303030

canvas-elevated

#ffffff

canvas-light

#303030

surface-card

#f7f7f7

surface-soft-light

#ebebeb

surface-strong-light

Typography

1 familia

AaEeCcGg50.

Figtree sustituto de FerrariSans

300 LightDesign that moves people.

400 RegularDesign that moves people.

500 MediumDesign that moves people.

600 SemiBoldDesign that moves people.

700 BoldDesign that moves people.

Body — Figtree

El sistema visual combina tipografía de alta calidad con colores cuidadosamente seleccionados. Cada decisión de diseño refleja la personalidad de la marca y comunica su propósito con claridad y precisión.

Role	Size	Weight	LH	Font
display xl	72px	700	1.0	Display
display lg	48px	600	1.1	Display
heading	32px	600	1.2	Display
body lg	20px	400	1.5	Body
body	16px	400	1.6	Body
label	14px	500	1.4	Display
mono	13px	400	1.6	Mono

Components

live recipes

Componente destacado

Ferrari UI

La card usa la superficie del sistema con borde sutil y el radio real de la marca. El kicker en el color primario es el único acento de color sobre el fondo.

Spacing & shape

base 16px

Spacing scale

4px

8px

16px

24px

32px

48px

64px

96px

128px

Radius family

8px

9999px

Principles

guardrails

Do

Usa los colores del sistema con intención y consistencia.
Mantén la tipografía dentro de la escala establecida.
Aplica los radios de borde según el contexto de cada componente.

Don't

No uses colores fuera del sistema sin justificación visual.
No mezcles familias tipográficas de categorías incompatibles.
No apliques sombras donde el sistema usa color plano.

Resources

copy & paste

:root {
  /* Color */
  --canvas: #181818;
  --surface: #252525;
  --ink: #ffffff;
  --ink-soft: #969696;
  --muted: #666666;
  --primary: #da291c;
  --primary-hover: #bf2419;
  --border: #303030;
  /* Typography */
  --font-display: 'Figtree', system-ui, sans-serif;
  --font-body: 'Figtree', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Radius */
  --radius-btn: 8px;
  --radius-card: 8px;
  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
}

@theme {
  --color-canvas: #181818;
  --color-surface: #252525;
  --color-ink: #ffffff;
  --color-primary: #da291c;
  --color-primary-hover: #bf2419;
  --color-border: #303030;
  --font-display: 'Figtree', system-ui, sans-serif;
  --font-body: 'Figtree', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius-btn: 8px;
  --radius-card: 8px;
}

{
  "color": {
    "canvas": "#181818",
    "surface": "#252525",
    "ink": "#ffffff",
    "primary": "#da291c",
    "border": "#303030",
    "primary-active": "#b01e0a",
    "primary-hover": "#9d2211",
    "body": "#969696",
    "body-strong": "#ffffff",
    "body-on-light": "#181818",
    "muted": "#666666"
  },
  "font": {
    "display": "Figtree",
    "body": "Figtree",
    "mono": "JetBrains Mono"
  },
  "radius": {
    "btn": "8px",
    "card": "8px"
  },
  "spacing": {
    "4px": "4px",
    "8px": "8px",
    "16px": "16px",
    "24px": "24px",
    "32px": "32px",
    "48px": "48px",
    "64px": "64px",
    "96px": "96px",
    "128px": "128px"
  }
}