Primitives
The raw scales. Facts about the world, with no opinion about use: a colour is a colour, a size is a size, and nothing here knows what it is for. That is the other half of the line, and it is kept in Semantics.
Three kinds of value live here, and the difference is worth reading rather than smoothing over. Ramps are constructed, sampled from what shipped, and climb monotonically like any design scale. Schemes are not constructed: Windows published Luna and Classic as fixed sets, so they are recorded whole, under Microsoft's own names. Matched values are the weakest claim, used only where Windows documented nothing to quote, and they say so.
Primitives
Name and value, both read from the CSS. No hand-kept meaning: a primitive's value is its meaning.
Colour — Steel (ramp)
Aero’s neutrals, sampled from the Vista/7 control palette. A constructed ramp: monotonic in lightness.
| token | swatch | value |
|---|---|---|
| --color-black | #000000 | |
| --color-white | #ffffff | |
| --color-steel-50 | #f6f6f6 | |
| --color-steel-100 | #f2f2f2 | |
| --color-steel-200 | #ebebeb | |
| --color-steel-300 | #cfcfcf | |
| --color-steel-400 | #aeb2b5 | |
| --color-steel-500 | #8e8f8f | |
| --color-steel-600 | #767676 | |
| --color-steel-700 | #4a4a4a | |
| --color-steel-800 | #383838 | |
| --color-steel-900 | #222222 | |
| --color-steel-950 | #101010 |
Colour — Sky (ramp)
Aero’s blue. Steel-blue holds only the two steps Aero actually used; the gaps are deliberate.
| token | swatch | value |
|---|---|---|
| --color-sky-50 | #f5fbfe | |
| --color-sky-100 | #eaf6fd | |
| --color-sky-200 | #e5f4fc | |
| --color-sky-300 | #bee6fd | |
| --color-sky-400 | #c4e5f6 | |
| --color-sky-500 | #a7d9f5 | |
| --color-sky-600 | #98d1ef | |
| --color-sky-700 | #68b3db | |
| --color-sky-800 | #3c7fb1 | |
| --color-sky-900 | #0066cc | |
| --color-sky-950 | #003399 | |
| --color-steelblue-500 | #6d91ab | |
| --color-steelblue-600 | #5586a3 |
Colour — Luna (scheme)
Windows XP, as published. Not constructed — a fixed set, recorded with Microsoft’s own names.
| token | swatch | value |
|---|---|---|
| --color-luna-face | #ece9d8 | |
| --color-luna-light | #f1efe2 | |
| --color-luna-border | #d4d0c8 | |
| --color-luna-shadow | #aca899 | |
| --color-luna-dark | #716f64 | |
| --color-luna-title | #0054e3 | |
| --color-luna-title-gradient | #3d95ff | |
| --color-luna-title-inactive | #7a96df | |
| --color-luna-selection | #316ac5 | |
| --color-luna-desktop | #004e98 | |
| --color-luna-control-border | #003c74 | |
| --color-luna-control-hover | #e59700 | |
| --color-luna-control-press | #dedbc8 | |
| --color-luna-close | #c75050 | |
| --color-luna-close-hover | #e08080 | |
| --color-luna-error | #cc3333 | |
| --color-luna-error-lit | #e24a4a | |
| --color-luna-warning | #ffd24a | |
| --color-luna-warning-lit | #ffe066 | |
| --color-luna-info | #3c7dd9 | |
| --color-luna-info-lit | #5b9bff |
Colour — Classic (scheme)
Windows 95 through 2000, as published.
| token | swatch | value |
|---|---|---|
| --color-classic-face | #c0c0c0 | |
| --color-classic-light | #dfdfdf | |
| --color-classic-shadow | #808080 | |
| --color-classic-dark | #000000 | |
| --color-classic-title | #000080 | |
| --color-classic-title-gradient | #1084d0 | |
| --color-classic-title-inactive | #808080 | |
| --color-classic-selection | #000080 | |
| --color-classic-desktop | #008080 | |
| --color-classic-error | #a80000 | |
| --color-classic-error-lit | #c00000 | |
| --color-classic-warning | #ffc20e | |
| --color-classic-warning-lit | #ffd200 | |
| --color-classic-info | #0050e0 | |
| --color-classic-info-lit | #0078d7 |
Colour — Constants
| token | swatch | value |
|---|---|---|
| --color-info-window | #ffffe1 |
Type
Three scales, one vocabulary. `point` is what the shell asks GDI for and what the roles ship pointing at; `pixel` records the pre-ClearType eras, whose bitmap faces had to land on whole pixels; `rem` is a 1.25 ratio for an author who wants type that answers the reader’s browser setting. Reaching for a unit is a decision, so the unit is in the name.
| token | value |
|---|---|
| --font-family-segoe | 'Segoe UI', 'Segoe UI Variable Text', Tahoma, 'Noto Sans', sans-serif |
| --font-family-tahoma | Tahoma, Verdana, 'Nimbus Sans', Arial, sans-serif |
| --font-family-sans-serif | 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, Geneva, sans-serif |
| --font-family-mono | Consolas, 'Cascadia Mono', ui-monospace, Menlo, 'Courier New', monospace |
| --font-size-point--1 | 8pt |
| --font-size-point-0 | 9pt |
| --font-size-point-1 | 10pt |
| --font-size-point-2 | 12pt |
| --font-size-point-3 | 15pt |
| --font-size-point-4 | 20pt |
| --font-size-pixel-0 | 11px |
| --font-size-pixel-1 | 13px |
| --font-size-rem--2 | 0.64rem |
| --font-size-rem--1 | 0.8rem |
| --font-size-rem-0 | 1rem |
| --font-size-rem-1 | 1.25rem |
| --font-size-rem-2 | 1.56rem |
| --font-size-rem-3 | 1.95rem |
| --font-size-rem-4 | 2.44rem |
| --font-size-rem-5 | 3.05rem |
| --font-size-rem-6 | 3.81rem |
| --font-weight-light | 300 |
| --font-weight-normal | 400 |
| --font-weight-medium | 500 |
| --font-weight-semibold | 600 |
| --font-weight-bold | 700 |
| --line-height-flush | 1 |
| --line-height-tight | 1.2 |
| --line-height-normal | 1.5 |
| --line-height-loose | 1.6 |
| --letter-spacing-normal | 0 |
| --letter-spacing-wide | 0.02em |
| --letter-spacing-wider | 0.08em |
Space
The same rhythm twice: n = px ÷ 4, once fixed and once scalable. Pixels ship as the default because a 23px control that grows with the reader’s font size stops being a control; the rem steps are there for the parts of a page that should grow.
| token | value |
|---|---|
| --space-void | 0 |
| --space-hairline | 1px |
| --space-pixel-1 | 4px |
| --space-pixel-2 | 8px |
| --space-pixel-3 | 12px |
| --space-pixel-4 | 16px |
| --space-pixel-5 | 20px |
| --space-pixel-6 | 24px |
| --space-pixel-7 | 28px |
| --space-pixel-8 | 32px |
| --space-pixel-12 | 48px |
| --space-pixel-16 | 64px |
| --space-pixel-32 | 128px |
| --space-rem-1 | 0.25rem |
| --space-rem-2 | 0.5rem |
| --space-rem-3 | 0.75rem |
| --space-rem-4 | 1rem |
| --space-rem-5 | 1.25rem |
| --space-rem-6 | 1.5rem |
| --space-rem-7 | 1.75rem |
| --space-rem-8 | 2rem |
| --space-rem-12 | 3rem |
| --space-rem-16 | 4rem |
| --space-rem-32 | 8rem |
Borders
The pixel radii are Windows’ own — 2 for a field, 3 for a control, and the one-pixel difference is the point. The rem radii are a wider modern ramp, unused by the roles and offered for an author who wants softer corners than the shell ever drew.
| token | value |
|---|---|
| --border-width-1 | 1px |
| --border-width-2 | 2px |
| --border-width-4 | 4px |
| --border-radius-void | 0 |
| --border-radius-circle | 50% |
| --border-radius-pill | 9999px |
| --border-radius-pixel-sm | 2px |
| --border-radius-pixel-md | 3px |
| --border-radius-rem-sm | 0.25rem |
| --border-radius-rem-md | 0.375rem |
| --border-radius-rem-lg | 0.5rem |
| --border-radius-rem-xl | 0.75rem |
Surfaces
| token | swatch | value |
|---|---|---|
| --gradient-glass | linear-gradient( to bottom, var(--color-steel-100) 45%, var(--color-steel-200) 45%, var(--color-steel-300) ) | |
| --gradient-glass-lit | linear-gradient( to bottom, var(--color-sky-100) 45%, var(--color-sky-300) 45%, var(--color-sky-500) ) | |
| --gradient-glass-pressed | linear-gradient( to bottom, var(--color-sky-200), var(--color-sky-400) 30% 50%, var(--color-sky-600) 50%, var(--color-sky-700) ) | |
| --gradient-glass-dark | linear-gradient( to bottom, var(--color-steel-700) 45%, #3c3c3c 45%, var(--color-steel-900) ) | |
| --gradient-glass-dark-lit | linear-gradient(to bottom, #484e60 45%, #3b4255 45%, #366685) | |
| --gradient-glass-dark-pressed | linear-gradient(to bottom, #4b5166, #384058 30% 50%, #2a344d 50%, #2a5579) | |
| --gradient-close | linear-gradient( to bottom, var(--color-ember-300) 45%, var(--color-ember-500) 45%, var(--color-ember-700) ) | |
| --gradient-close-lit | linear-gradient( to bottom, #f5a79e 45%, #e2604e 45%, #b62c20 ) | |
| --gradient-luna | linear-gradient(to bottom, var(--color-white), var(--color-luna-face) 55%, var(--color-luna-border)) | |
| --gradient-luna-lit | linear-gradient(to bottom, var(--color-white), #fdf4d8 55%, #f8dfa0) | |
| --gradient-luna-pressed | linear-gradient(to bottom, var(--color-luna-control-press), var(--color-luna-face) 55%, var(--color-white)) | |
| --gradient-luna-close | linear-gradient(to bottom, #e8a49f, var(--color-luna-close) 55%, #a03a3a) | |
| --gradient-luna-close-lit | linear-gradient(to bottom, #f3c4c0, var(--color-luna-close-hover) 55%, #c05c5c) | |
| --pattern-dither | repeating-conic-gradient( var(--color-white) 0% 25%, var(--color-classic-face) 0% 50% ) 0 0 / 2px 2px | |
| --gradient-well-block | linear-gradient(to bottom, var(--color-steel-200), var(--color-steel-100) 20%) | |
| --gradient-well-inline | linear-gradient(to right, var(--color-steel-200), var(--color-steel-100) 20%) | |
| --gradient-row-hover | linear-gradient(to bottom, #ebf4fc, #def0fc) | |
| --gradient-row-selected | linear-gradient(to bottom, #edf5fd, #d2ecfc) | |
| --bevel-raised-outer | inset -1px -1px var(--color-classic-dark), inset 1px 1px var(--color-white) | |
| --bevel-raised-inner | inset -2px -2px var(--color-classic-shadow), inset 2px 2px var(--color-classic-light) | |
| --bevel-sunken-outer | inset -1px -1px var(--color-white), inset 1px 1px var(--color-classic-dark) | |
| --bevel-sunken-inner | inset -2px -2px var(--color-classic-light), inset 2px 2px var(--color-classic-shadow) | |
| --bevel-window-outer | inset -1px -1px var(--color-classic-dark), inset 1px 1px var(--color-classic-light) | |
| --bevel-window-inner | inset -2px -2px var(--color-classic-shadow), inset 2px 2px var(--color-white) | |
| --bevel-flat | none | |
| --bevel-gloss | inset 0 0 0 1px rgb(255 255 255 / 0.8) | |
| --bevel-gloss-pressed | inset 1px 1px 0 rgb(0 0 0 / 0.2), inset -1px 1px 0 rgb(0 0 0 / 0.06) | |
| --bevel-field | inset 0 0 0 1px #f4f4f4, inset 1px 1px 0 1px #aeaeae, inset -1px -1px 0 1px #dddddd, inset 3px 3px 6px #cccccc | |
| --shadow-raised | 0 8px 24px rgb(0 0 0 / 0.35) | |
| --shadow-art | 5px 5px 4px -4px rgb(0 0 0 / 0.75) |