Main Character — checkbox

Checkbox

The browser's own checkbox at 1rem, tinted with accent-color: var(--fill-accent). color-scheme picks the browser's dark or light box, so unchecked it is the platform's grey well, and checked it fills with the lamp amber. It always comes with words: beside a control, or as a row with a definition.

The box

Unchecked, Chrome's box is a --platform-well well in a --platform-rule rule (#3b3b3b in #858585 dark, #ffffff in #767676 light). They are the browser's colours, not ours: tokens only so Figma can follow the theme, in its Platform collection. Checked fills with --fill-accent and the browser picks a mark colour that contrasts with it.

Inline

label.check-inline: a box and a short UI label, 2.2rem tall so it lines up with the buttons beside it. Write's "no reply".

no reply no reply

Row

label.check-row: the whole row is the label. A UI-face name, a dot, and its definition in the dim serif. Unchecked, the name dims to match. serif is settings' row, with a --bg-raised hover. ui (.check-row.ui) is the wizard's: all UI face at --font-xs, no hover fill.

family · parents, siblings, nieces and nephews, extended family family · parents, siblings, nieces and nephews, extended family

Fieldset

.check-group stacks rows .2rem apart, up to 34rem (.ui: no gap, full width). Settings' and the wizard's category lists are this, one row per built-in category.

health · physical or mental health, injuries, illness, sleep family · parents, siblings, extended family pets · the author's own pets and animals

Anatomy

input[type=checkbox]       1rem, accent-color --fill-accent
label.check-inline         box + short label (no reply)
div.check-group[.ui]       the fieldset
  label.check-row[.ui]     one row; the whole row toggles
    input[type=checkbox]
    span > strong + " · " + definition

box

The platform's checkbox. Not redrawn: accent-color and color-scheme are the only styling, so it keeps native focus and keyboard behaviour.

name

UI face 600 in --text-default; --text-muted while unchecked (:has(input:not(:checked))).

definition

--text-muted: the serif at .95rem in a serif row, the UI face at --font-xs in a ui row.

hover

Serif rows only: a --bg-raised fill at --radius-sm.

Tokens

Fill and tick --fill-accent; name --text-default; definition and unchecked name --text-muted; hover --bg-raised; radius --radius-sm; spacing --space-2, --space-3 (ui). In Figma: Checkbox (checked), Check inline, Check row (kind × checked × state) and Checkbox fieldset (kind), each built from instances of the one before.