Raw profile

Chrome roles

The window's own materials: what a client area, a control and a separator are made of.

Text role: the standard ink (--color-text).

Text role: muted — column headers, status strings (--color-text-muted).

Text role: greyed out (--color-text-disabled).

Field roles

The editable well. Distinct from surface: surface is what a control is made of, field is what you type into.

The top edge is darker than the other three — light falls from above, so the inside of a recess is shadowed at the top. A one-pixel lie, in every Windows text box since 1995.

Selection roles

The one role that is never subtle.

Control roles

A control border is not a separator border. Aero draws separators at steel-200 and control edges at steel-500, and no amount of squinting makes those one role.

Window furniture

Title bar, menu bar and status bar are not "surface". They are a window's furniture, they change independently of content, and Windows named them separately for thirty years.

Accent roles

The system blue, doing the job a brand colour does elsewhere. Win10 sets it to #0078d7, Aero to its sky ramp, Luna to the XP selection blue, and Classic to the title navy, because the desktop teal was the only colour of that era that was not blue, grey or white and it belonged to the desktop.

Text role: accent-coloured text (--color-accent-text).

Tooltip

Its own two colours since 1995, shared by no one.

Status

Held back until a page needed one. Windows never put these in the palette — GetSysColor has no entry for an error — and carried them in the message box icons instead: a red disc, a yellow triangle, a blue disc, redrawn once per era. So the fill moves with the era, and the glyph does not. White on red, black on yellow, white on blue, unchanged from Windows 95 to Windows 7 while the disc beneath it was redrawn three times. That is why on-solid is a role and not a value.

The values are matched rather than published or sampled: chosen to sit right beside the era, not lifted per-pixel off the icon. The primitives say so, because the alternative is inventing numbers in a file whose authority is that it does not.

Surface roles

The axis colour, type, space and border cannot express — and most of what makes this identity legible. Switch to Classic and watch these change mechanism: the gradients become flat greys and the gloss becomes a two-ring bevel, while the role names hold.

Control fills

Wells and fields

List rows

Elevation

Both go to none under Classic. Windows 95 had no drop shadows, and setting the role to nothing is how the presentation never learns the era removed it.

Type scale

Three scales ship; the roles below are bound to the points one. Windows UI type is specified in points by definition, 9pt is the shell's own default and therefore step 0, and the steps are the sizes the shell actually offered rather than a computed ratio. The pre-ClearType eras sized in pixels instead, because bitmap faces had to land on whole pixels or they blurred. And there is a rem scale — a 1.25 ratio, step 0 at 1rem — for an author who wants type that answers the reader's browser setting.

The roles do not know which. Re-point --text-size-ui at --font-size-rem-0 and every control on the page starts scaling, with nothing else edited.

Display --text-size-display

Heading --text-size-heading

Caption — the title bar --text-size-caption / --text-weight-caption

UI — what a control, a menu item and a label all take --text-size-ui

Status — status bars, tooltips --text-size-status

Code 1234 --text-size-code

The chrome face is --font-family-ui: Segoe UI under Win10 and Aero, Tahoma under Luna, MS Sans Serif under Classic. Every era re-points it and nothing else has to know. Win10 kept Aero's face and changed everything around it, which is the clearest evidence that face and era are separate facts.

Space scale

The primitive rhythm (n = px ÷ 4). Windows laid dialogs out in dialog units, and at the default face a horizontal DLU is close to 2px — which is why every measurement in a Windows dialog is even, and why the rhythm is 4px rather than the 8px a web project would reach for.

It ships twice, once fixed and once scalable. The roles are bound to the pixel steps, because a 23px control that grows with the reader's font size stops being a control. The rem steps mirror them exactly, for the parts of a page that should grow.

Pixels — what the roles use

Rem — the same steps, scalable

Identical at the browser default. Raise the browser's font size and this set moves while the one above holds — which is the whole difference, and the reason both exist.

Chrome metrics

Drawn at true size, because that is the only way to check them. These are the shell's own numbers, and they are the difference between a page that resembles Windows and one that is mistaken for it. 23px is not 24px.

Radii & widths

The ramp is short because the identity is short: Windows rounded almost nothing, and Classic sets all three roles to zero. The roles resolve to the pixel radii — 2 for a field, 3 for a control, and that one-pixel difference is nobody's conscious observation and everybody's complaint when it's wrong. A wider rem ramp ships alongside, unused by any role, for an author who wants softer corners than the shell ever drew.

Radius roles

Border widths

Bevels, reached for directly

Focus ring

Windows drew focus as a 1px dotted rectangle inside the control, not as a ring around it — hence the negative offset (--focus-ring-width, --focus-ring-style, --focus-ring-offset, --focus-ring-color).

Tab to a focusable link, then a focusable button.

Under forced-colors these roles flip to a solid Highlight ring at a positive offset — the one context where the native convention is the wrong answer.

Accessibility floor

There is a screen-reader-only note right after this sentence — this text is visually hidden but announced by assistive tech (.sr-only). invisible on screen, present to a screen reader.

The skip-link behaviour ships in the profile; the visible focused state is the consumer's to style. The floor does not vary by identity, so it is borrowed unchanged from the document profile this one is a sibling to.