Base

Styles for native HTML elements, one file per element or element family, all in @layer base.

Overview

What @layer base covers, how the 23 files are grouped, and the two conventions that run through all of them.

Body

The six tokens on body that every other element inherits from.

Headings

One shared rule for h1 to h6, and a per-level size token that each element reassigns.

Paragraphs

Block spacing and a measure cap on p, and the two places that cap is deliberately removed.

Links

Colour, underline and focus ring on a, and the automatic marker on target="_blank".

Lists

Prose list indentation in em, sized for the marker, and item spacing, wrapped in :where() so a navigation list…

Blockquotes

An inline-start border, italic body text, and a muted cite line set as a block.

Code

Inline code, block code, kbd and samp, and the component-token-with-semantic-fallback pattern this file demonstrates.

Address

Undoing the user agent italic on address, and the paragraph spacing that would otherwise break it apart.

Abbreviations

A dotted underline on abbr[title], and why this is the one file in the layer with hardcoded values.

Superscript

Raising sup without growing the line box, and why that matters for form labels.

Figures

A flex column around the image and its caption, with a caption that turns into a row at 48rem.

Picture

One declaration, and the descender gap it is there to make predictable.

Video

Fluid sizing on the native element, and where the aspect ratio and the controls come from instead.

Tables

Collapsed borders, token-driven cell padding, a tinted header, and the last row that drops its rule.

Details

A bordered disclosure with a masked marker, an open state, and the summary + div contract it expects.

Inputs and labels

label, legend and every text-like input, the inset box-shadow outline, and the per-type handling for search, number,…

Checkboxes

A custom checkbox built from appearance none, with a masked tick, an indeterminate state and a clickable adjacent label.

Radios

The same box as the checkbox, drawn round, with a ::before dot that scales in from zero.

Range

The slider, its two vendor track and thumb implementations, and the .range-value output that follows the thumb via…

Select

A select with its own chevron, the padding that keeps text off it, and the multiple case that drops it.

Switch

A track and knob built from a checkbox with role="switch", moved with flex-grow rather than translation.

Textarea

A textarea that grows with its content through field-sizing, with a 5lh floor and vertical resizing kept.

Accessibility helpers

.visually-hidden and .visually-hidden-focusable, the only two classes in @layer base.