Component library

Live demos of every utility in the Apple-style design system. Scroll for the colored-panel showcase.

Type scale

.t-hero

.t-display

.t-headline

.t-title

.t-body-large — 17–21px lede sentences.

.t-body — 17px body text used in card descriptions and tier lists.

.t-caption — 14px secondary metadata.

.t-eyebrow

42

Default card

Solid surface, subtle shadow.

Hoverable card

Lifts on hover.

Third card

For comparison.

0

Refresh page to see count-up

Reveal stagger (refresh to see)

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

.section-panel--sapphire

Each palette becomes a panel.

Learn more

.section-panel--emerald

Each palette becomes a panel.

Learn more

.section-panel--sunset

Each palette becomes a panel.

Learn more

.section-panel--amber

Each palette becomes a panel.

Learn more

.section-panel--mono

Each palette becomes a panel.

Learn more

.section-panel--violet

Each palette becomes a panel.

Learn more

.section-panel--prismatic

Each palette becomes a panel.

Learn more

.section-panel--ember

Each palette becomes a panel.

Learn more

.section-panel--vapor

Each palette becomes a panel.

Learn more

.section-panel--aurora

Each palette becomes a panel.

Learn more