extraído de bmw.com Ver sitio ↗

BMW

BMW's corporate site — distinct from BMW M's motorsport-bombastic variant, this is a measured and settled corporate-automotive interface. On a light (cream-tinted white) canvas, BMW corporate blue (#1c69d4) carries every primary CTA; dark navy hero bands frame model photography.

light mode blue 20 colores Light Mode

bmw.com

Color

light · 20 colors

Primary

#1c69d4

primary

#0653b6

primary-active

#d6d6d6

primary-disabled

Ink

#262626

ink

#3c3c3c

body

#1a1a1a

body-strong

#6b6b6b

muted

#9a9a9a

muted-soft

#ffffff

on-primary

#ffffff

on-dark

#bbbbbb

on-dark-soft

Brand

#e6e6e6

hairline

#cccccc

hairline-strong

#0066b1

m-blue-light

Surface

#ffffff

canvas

#f7f7f7

surface-soft

#fafafa

surface-card

#ebebeb

surface-strong

#1a2129

surface-dark

#262e38

surface-dark-elevated

Typography

1 familia

AaEeCcGg50.

Space Grotesk sustituto de BMW Type Next Latin

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 — Space Grotesk

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

BMW 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

12px

16px

24px

32px

48px

80px

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: #ffffff;
  --surface: #f7f7f7;
  --ink: #262626;
  --ink-soft: #3c3c3c;
  --muted: #6b6b6b;
  --primary: #1c69d4;
  --primary-hover: #185cb9;
  --border: #e6e6e6;
  /* Typography */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Space Grotesk', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Radius */
  --radius-btn: 8px;
  --radius-card: 8px;
  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-80: 80px;
}

@theme {
  --color-canvas: #ffffff;
  --color-surface: #f7f7f7;
  --color-ink: #262626;
  --color-primary: #1c69d4;
  --color-primary-hover: #185cb9;
  --color-border: #e6e6e6;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Space Grotesk', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius-btn: 8px;
  --radius-card: 8px;
}

{
  "color": {
    "canvas": "#ffffff",
    "surface": "#f7f7f7",
    "ink": "#262626",
    "primary": "#1c69d4",
    "border": "#e6e6e6",
    "primary-active": "#0653b6",
    "primary-disabled": "#d6d6d6",
    "body": "#3c3c3c",
    "body-strong": "#1a1a1a",
    "muted": "#6b6b6b",
    "muted-soft": "#9a9a9a"
  },
  "font": {
    "display": "Space Grotesk",
    "body": "Space Grotesk",
    "mono": "JetBrains Mono"
  },
  "radius": {
    "btn": "8px",
    "card": "8px"
  },
  "spacing": {
    "4px": "4px",
    "8px": "8px",
    "12px": "12px",
    "16px": "16px",
    "24px": "24px",
    "32px": "32px",
    "48px": "48px",
    "80px": "80px"
  }
}