Publish Continue Approve Add section More

Small Medium Large

Disabled Disabled Disabled

Height is a token, not an outcome

Every single-line control sets block-size from --se-control-h rather than accumulating a height out of line-height plus padding plus border. That is what makes the height identical in every state: a border growing from 1px to 2px is absorbed inward by border-box, an outline never participates in layout, and padding-inline only moves the text. Buttons and fields read the same token, so they sit level in a row, and one override under (pointer: coarse) lifts all of them to 44px.

Base colour and state colour must share a tier

An inline style outranks any stylesheet rule without !important, so a variant colour set inline makes every :hover, :active and :disabled rule unreachable. Geometry stays inline so specimens paint immediately; colour lives in the stylesheet with the states that override it.

The touch floor is a media query, not a max()

Wrapping every size in max(2.75rem, …) makes small, medium and large the same height on a desktop — destroying the size scale to solve a problem that only exists for fingers. The floor belongs under (pointer: coarse), where it is true.

There is no primary, secondary or tertiary

Those three names conflate two independent questions — primary means both loudest and accent-coloured, which leaves no way to describe a loud destructive action without inventing something like secondary danger. Emphasis answers how loudly, intent answers what it means, and the familiar tiers fall out of the pair:

Splitting them is what makes negative + solid available as the loudest destructive action, and accent + transparent available as a quiet action that still reads as the main intent. If a team adds a data-variant="primary" alongside these, the hierarchy has two sources and they will disagree within a release.

Emphasis carries the border, not the fill

All three emphases draw the same 1px border — outline and solid in colour, transparent invisible. That is what makes them interchangeable in place: a toolbar does not reflow when a button changes emphasis. It is also the one border weight the contract already names, so the button adds nothing of its own.

An icon-only button still needs a name

The icon carries aria-hidden and the button carries an aria-label. That is the anatomy’s responsibility — a skin has no way to add an accessible name, so it cannot be left to one.

Error is an attribute on the field, not a colour on the border

data-invalid on the wrapper lets a skin restyle label, control and message together. A skin that could only recolour the border would have no way to make an error legible in a high-contrast theme.

Never colour alone

The red border is reinforced by a message in words, because roughly one man in twelve cannot separate it from the neutral state. The same rule the status tones follow.

Reserve the message row, not the label

The message row keeps a 1.4em minimum height whether or not it holds text, which is what makes a row of fields align: controls share one baseline and every field ends at the same depth. Reserving a slot in the label was tried and removed — it indented the labels that had no icon, which read as a mistake rather than as alignment.

Placeholder is not a label

It vanishes the moment someone types, so it can only hold an example. Every field above has a real label, and the placeholder shows a sample value.

The label is the target, not a caption

Each row is a <label>, so the whole line is clickable and the row carries min-block-size — 1.75rem on a fine pointer, 2.75rem under (pointer: coarse). The box stays 1.25rem at every density, because a checkbox that grows on touch stops matching the type beside it. This is the one place the target and the visible control are deliberately different sizes.

Native inputs, appearance stripped

appearance: none removes the platform control but keeps :checked, :indeterminate, :disabled and the whole keyboard contract — space to toggle, arrows to move within a radio group. The mark is a background-image built from the Phosphor bold check and minus, so it inherits nothing and needs no extra element inside a void tag.

Checkbox squares, radio rounds, switch slides

Shape is the only thing separating them, and it has to be unambiguous: --se-radius-sm for a checkbox, --se-radius-pill for a radio. A switch is a checkbox that reports a setting rather than a selection — it applies immediately, so it never appears in a form that has a Save button.

The ring goes on the highlighted item, not the focused element

In a menu, DOM focus stays on the container while the arrow keys move a highlight. The browser can only ring the element that actually has focus, so it has nothing to draw — which is exactly why the focus indicator is the anatomy's job and not the browser's. Highlight is a data attribute, so a skin restyles it and cannot remove it.

A menu item has no hover state

The pointer moves the highlight instead. A menu has exactly one current item, so a hover tint alongside the keyboard highlight would show two — and if the mouse rests on one item while the arrow keys have moved to another, the two indicators disagree about what Enter will do. Hovering sets aria-activedescendant just as ArrowDown does, which is what the WAI-ARIA menu pattern asks for. Buttons and fields do have hover states, because they have no notion of a current item to conflict with.

A tooltip may never hold anything interactive

It appears on hover and on focus, and it has no focus of its own — so a link or a button inside one is unreachable by keyboard and invisible to touch. If the content needs a click, it is a popover. This is the distinction that decides which of the three you are building.

Floating, not overlay

All three take --se-shadow-floating and dismiss on click outside, because they are transient rather than modal. They never trap focus and never dim the page — that is the overlay level, and it belongs to Dialog. Height tells the reader how to get rid of something, so the two levels must not borrow each other's shadow.

Entry is animated, exit is not

The floater fades and rises 0.25rem over --se-duration-fast, which tells the reader where it came from. Dismissal is immediate: someone who has decided to close a menu is not interested in watching it leave. The reduced-motion reset collapses the entry to nothing without affecting either behaviour.

Delete project Publish settings

Native dialog, not a div

showModal() gives the focus trap, Escape, the inert background and ::backdrop for free, and returns focus to the trigger on close. Every one of those is a thing hand-rolled overlays get wrong. Radix Dialog is still the production answer once you need animated exit or nested overlays — native dialog cannot animate its own closing — but the anatomy is the same either way, which is the point of specifying parts rather than implementations.

A destructive dialog names what is lost

The title asks a question, the description says what disappears and what breaks, and the confirming button repeats the verb — Delete permanently, never OK. Where the action is irreversible the dialog also asks the reader to type the name, which is the only affordance that reliably stops a reflex click.

A sheet is a dialog with a different anchor

Same parts, same dismissal, same overlay shadow — it only changes which edge it is attached to and which corners stay square. Use it when the content is long or the reader needs to keep the page in view; use a dialog when the decision must be made before anything else happens.

The backdrop is mixed, not a new colour

32% of --se-text over transparent, so a skin changing its text colour gets a backdrop in the same temperature without defining one. It dims rather than blurs: a blurred backdrop costs a repaint on every scroll behind it, and on the cheapest device your readers own that is the frame budget for the animation you actually want.

5 projects · 1 selected

Compact

Select	Project	Kind	Status	Views	Updated
	Northlight	Case study	Published	2,481	12 Mar
	Résumé 2024	Document	Published	974	4 Mar
	Motion reel	Video	Unsaved	—	2 Mar
	Ceramics	Gallery	Draft	—	28 Feb
	Old portfolio	Case study	Failed	—	11 Feb

Numbers are right-aligned on tabular figures

A column of numbers is only comparable if the digits line up, which needs both — right alignment so the units column is shared, and font-variant-numeric: tabular-nums so every digit takes the same width. Proportional figures make 1,111 narrower than 8,888 and the column stops reading as a magnitude. Text columns stay start-aligned; only quantities move.

This is what the density dial is for

Toggle Compact above: rows drop from --se-control-h to --se-control-h-sm and the type does not change. Every other component looks much the same at either density, but a table is where the reader's actual goal is more rows on screen — which is why density moves space and never type.

Sort is a button in the header, not a clickable cell

Only sortable columns get a button, so the pointer only changes where something will happen, and aria-sort tells a screen reader the current direction rather than leaving it to an arrow glyph. The caret appears on the sorted column and rotates rather than swapping for a second icon — one element, two states.

Selection is on the row, hover is not

aria-selected carries the state and paints --se-accent-soft; hover paints --se-surface-sunk and is suppressed on a selected row, so the two never stack into a third colour nobody chose. The header stays visible while the body scrolls, because a column heading you have scrolled past is a column you can no longer read.

Nothing here is new

Section rows reuse the menu item's geometry, the inspector is fields and choice controls at --se-control-h-sm, the canvas blocks are the list row with a border, and the shell is the Sidebar primitive with a second panel. The only value this screen introduces is the 32rem threshold at which the inspector leaves.

Selection is one thing, in two places

aria-current marks the selected section in the panel and the selected block on the canvas, and both paint --se-accent-soft — so the reader can see what the inspector is editing without reading a word. Two selection colours, or a selected row that looked different from a selected block, would make the link something you have to learn.

The container decides, not the viewport

The shell is a query container, so the inspector leaves at 46rem of its own width rather than the window's. That is what lets the same builder sit in a full page, a preview pane and a docs example without three sets of rules — and it is the case Responsive rule 04 was written for, since collapsing three regions to one is a change of shape rather than a reflow.

Drag is the one place springs are allowed

Reordering a section is the exception the Motion section carves out: the reader's own hand sets the velocity, so physics reads better than a curve, and a dragged row takes --se-shadow-dragging to say it is attached to the cursor rather than to the page.