extraído de apple.com Ver sitio ↗

Apple

A photography-first interface that turns marketing into a museum gallery. Edge-to-edge product tiles alternate light and dark canvases, framed by SF Pro Display headlines with negative letter-spacing and a single Action Blue (#0066cc) interactive color.

light mode blue 20 colores Light Mode

apple.com

Color

light · 20 colors

Primary

#0066cc

primary

#0071e3

primary-focus

#2997ff

primary-on-dark

Ink

#1d1d1f

ink

#1d1d1f

body

#ffffff

body-on-dark

#cccccc

body-muted

#333333

ink-muted-80

#7a7a7a

ink-muted-48

#ffffff

on-primary

Brand

#f0f0f0

divider-soft

#e0e0e0

hairline

Surface

#ffffff

canvas

#f5f5f7

canvas-parchment

#fafafc

surface-pearl

#272729

surface-tile-1

#2a2a2c

surface-tile-2

#252527

surface-tile-3

#000000

surface-black

#d2d2d7

surface-chip-translucent

Typography

2 familias

AaEeCcGg50.

Outfit sustituto de SF Pro Display

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

Apple 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

17px

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: #f5f5f7;
  --ink: #1d1d1f;
  --ink-soft: #1d1d1f;
  --muted: #73737b;
  --primary: #0066cc;
  --primary-hover: #0057ad;
  --border: #e0e0e0;
  /* Typography */
  --font-display: 'Outfit', 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-12: 12px;
  --space-17: 17px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-80: 80px;
}

@theme {
  --color-canvas: #ffffff;
  --color-surface: #f5f5f7;
  --color-ink: #1d1d1f;
  --color-primary: #0066cc;
  --color-primary-hover: #0057ad;
  --color-border: #e0e0e0;
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Figtree', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius-btn: 8px;
  --radius-card: 8px;
}

{
  "color": {
    "canvas": "#ffffff",
    "surface": "#f5f5f7",
    "ink": "#1d1d1f",
    "primary": "#0066cc",
    "border": "#e0e0e0",
    "primary-focus": "#0071e3",
    "primary-on-dark": "#2997ff",
    "body": "#1d1d1f",
    "body-on-dark": "#ffffff",
    "body-muted": "#cccccc",
    "ink-muted-80": "#333333"
  },
  "font": {
    "display": "Outfit",
    "body": "Figtree",
    "mono": "JetBrains Mono"
  },
  "radius": {
    "btn": "8px",
    "card": "8px"
  },
  "spacing": {
    "4px": "4px",
    "8px": "8px",
    "12px": "12px",
    "17px": "17px",
    "24px": "24px",
    "32px": "32px",
    "48px": "48px",
    "80px": "80px"
  }
}