Design system

Typography

.type-display-large

Technology changes how we build companies and understand the world.

.type-display-body

Entering different worlds, learning about the people and decisions behind them.

.type-ui

Interface labels, metadata, navigation, and supporting information.

.type-ui-micro

Image captions and compact annotations.

--font-family-ui
--font-family-display
--font-weight-ui
--font-weight-display
--font-size-base
--font-size-sm
--font-size-large
--font-size-body
--font-size-small
--font-size-micro
--font-size-clock-number
--font-size-clock-center
--line-height-base
--line-height-large
--line-height-body
--line-height-small
--line-height-ui-tight
--line-height-ui-compact
--line-height-display-relaxed
--line-height-display-mobile

Colour

--color-bg
Page and panel background
--color-text
Primary text and active controls
--color-accent
Persistent secondary text
--color-muted
Interactive hover fill
--color-border
Rules and link underlines
--color-dim
Temporarily de-emphasized content
--color-shadow
Image-card shadow
--color-overlay
Focused gallery backdrop

Spacing

--space-xs
--space-sm
--space-md
--space-lg
--space-xl
--space-2xl
--space-3xl

Radius

--radius-sm

Compact labels inside cards

--radius

Navigation, panels, media, and cards

Controls

This is an inline link.This is an .

Notes row

Image card

Layout & detail

--content-width
--navigation-height
--page-bottom-clearance
--border-width
--link-underline-thickness
--link-underline-offset
--stack-field-height
--stack-field-max-width
--stack-field-aspect
--stack-column-min
--stack-column-gap
--gallery-desktop-slide-size
--gallery-desktop-slide-max
--gallery-slide-width
--gallery-desktop-height-ratio
--gallery-desktop-height-max
--gallery-desktop-caption-clearance
--gallery-gap-min
--gallery-gap-max
--gallery-preview-ratio
--gallery-preview-min
--gallery-preview-max
--gallery-mobile-slide-ratio
--gallery-mobile-height-ratio
--gallery-mobile-height-max
--gallery-mobile-caption-clearance
--gallery-mobile-preview
--gallery-mobile-gap-min
--gallery-backdrop-blur
--shadow-blur
--shadow-offset

Motion

--motion-duration-fast
--motion-duration-standard
--motion-duration-slow
--motion-stack-card
--motion-stack-stagger
--motion-stack-caption-exit
--motion-stack-cycle
--motion-stack-resume-delay
--motion-gallery-open
--motion-gallery-close
--motion-gallery-snap
--motion-gallery-wrap-buffer
--motion-gallery-travel-max
--motion-gallery-travel-factor
--motion-gallery-open-stagger
--motion-gallery-open-stagger-max
--motion-gallery-close-stagger
--motion-gallery-close-stagger-max
--motion-gallery-drag-projection
--motion-gallery-drag-threshold
--motion-inline-enter
--motion-inline-enter-stagger
--motion-inline-exit
--motion-inline-exit-stagger
--motion-credits-cycle
--motion-credits-speed
--ease-enter
--ease-ui
--ease-stack-exit