Foundations

Tokens

Every value in MDS is a token, exposed as a CSS variable. Change a variable and the whole system moves with it — light and dark, mobile and desktop.

Color

Warm neutrals, one calm accent, and clear status hues.

Background

--mds-bg

App canvas

Surface

--mds-surface

Cards and raised panels

Surface 2

--mds-surface-2

Nested / inset surfaces

Text

--mds-text

Primary content

Muted

--mds-text-muted

Secondary content

Subtle

--mds-text-subtle

Tertiary / placeholder

Border

--mds-border

Hairline separators

Accent

--mds-accent

Primary actions and focus

Success

--mds-success

Positive status

Warning

--mds-warning

Caution status

Danger

--mds-danger

Destructive status

Typography

Five roles. Mono for labels — the MDS signature.

Display

Page titles and hero moments. Used sparingly.

32–48px · 600 · sans

Heading

Section titles and card headers.

22px · 600 · sans

Body

Default reading text. Comfortable line height.

16px · 400 · sans

Label

Monospace eyebrows, tags, and metadata. The MDS signature.

12px · 500 · mono

Caption

Helper text, timestamps, and secondary detail.

13px · 400 · sans

Spacing

A 4-based scale for comfortable, consistent rhythm.

2xs

4px

xs

8px

sm

12px

md

16px

lg

24px

xl

32px

2xl

48px

3xl

64px

Radius

Soft, never sharp.

sm · 8px

md · 12px

lg · 16px

xl · 24px

Motion

Three durations. Subtle and functional.

fast

100ms

base

200ms

slow

300ms

Hover the track to preview each duration.

Shadows

Four soft elevations. Depth without weight.

xs

Hairline lift for resting cards.

sm

Gentle elevation for interactive surfaces.

md

Floating elements — popovers, raised cards.

lg

Overlays and sheets above the page.