A score runs from red through yellow and green to the theme's accent, so a 10 always matches the theme. On light themes the colors are darker so they stay readable.

Each app's logo, a filled icon. They show in every app's switcher.

Hover an icon to see its name.

Accent text, a soft accent border, and a faint accent fill. Never a tick: ticks are only for checkboxes.

Any icon works on either backdrop, round or square, alone or several in one capsule. Any button can be glass too: it keeps its shape and color, and the surface turns to glass. Use Solid on a plain page and Glass where the control floats over a picture or content that scrolls under it. Pressing one shrinks it a little.

A toggle icon is the outline icon when off and the filled one, in accent, when on, with a quick pop as it turns on. Use data-ico-toggle (and data-ico-on for a different "on" icon) or iconToggle(). Every button and icon reacts to a press the same way: it sinks and tips toward your finger with a glow under it, then a wave runs out and it springs back. Add .ripple to give a tile or card the same; .no-ripple leaves one out.

A switch is for a setting that takes effect at once (<button class="switch" role="switch" aria-checked="false">; it sends a toggle event). A setting with words goes in a <label class="switch-row">: the words on the left, the switch on the right. Hold one down and the knob stretches toward where it's going. Every segmented control's highlight slides to the new choice by itself.

A control that narrows the list turns accent while it's in use. Counts sit muted on the right of a menu, or are left off, or left off only the "All" row. A Filter menu's choices are rows or chips. Menus and drop-downs share three kinds of section, in this order: plain, folding (always closed to start), and a separate group at the foot.filterButton() filterMenu() sortMenu() customSelect()

Pages. Under a long list: plain numbers, the current page accent and underlined, the shared chevrons either side. Try it.pagerHTML()

Frosted is a mostly solid bar with a line under it. Glass is clearer and blurs more, with light along its bottom edge instead of a line. Every app uses the same one.

For an app whose ☰ opens a side drawer. On a phone it stays one row, the search box filling it.

While cards are chosen it covers the top bar: ✕ clears, the count, then what you can do with them. Pick cards with the Select checkbox (Forms), shown on hover.

Top bar on a phone is the same in every app, with nothing to set up: the brand, a search button, the main action, and ☰ on one line; the page tabs on the next, scrolling sideways when they don't fit (the chosen tab stays in view). Search folds into its button and opens as a full-width line; the button turns into ✕, which clears it and folds it away. An app with no search, or a tab where search is hidden, has no search button.

Side navigation runs down the left of a page (Recipes): big sections with an icon and a count, opening into sub-sections. The chosen one has the pressed look; empty ones are dimmed. Under 760px it becomes one sideways row of pills.

Side drawer is the other thing ☰ can open, instead of the ☰ menu (the planner uses it, like Google Keep). It slides in from the left over the dimmed page with every page of the app, each with its own sections under it (the same ones as its side navigation), and the menu's own rows at the foot. The page you're on shows its sections; the chevron beside any page shows or hides its sections, the page you're on included. Picking a row goes there while the drawer slides shut; so do a tap outside it, ✕, and Escape. Try ☰ above. On a computer it can stay open as the page's left column instead (dock), with ☰ hidden. Every row ends at the same edge, the chevrons in a column of their own. Any app gets one with no code: data-drawer on its ☰ button builds it from the page's tabs, sections, and ☰ menu.

Tab strip switches between a few panes inside one card or preview page, like a place's card in Places (Info, Hours, Notes). Small underlined tabs, the chosen one with an accent bar; ← and → move between them. A pane with nothing in it says so in faint text. Not for whole pages: use the switch or the page tabs above. Try it.

Section picker (sidenav.js sectionPick): choose several of the same sections, in an even grid with their icons. A chosen section with sub-sections opens a row of them underneath; choosing a sub-section chooses its section, and taking a section away takes its sub-sections. With single: true it chooses just one section (and one of its kinds): picking another replaces it. Recipes uses that for a recipe's category. Try it.

Price boxes keep the $ in front and are only as wide as the amount.

Four kinds, off and on. Add fill and/or round to the checkbox (or its .check label). Ticks appear only in checkboxes, never in menus. Try them.

Box and tick grow together. Add lg or xl to the checkbox (or its .check label), or set --check-scale for anything in between.

Text boxes. Three kinds, one look. A text box for one line. A note for a few lines (most notes). An expandable note for writing that can run long: a show's write-up, a recipe's steps. Once there's more than fits, a note scrolls with the same floating bar as everything else (grab it, or click its arrows).

Every menu opens the way it prefers, unless that side hasn't room in the window or the section it sits in and the other side has more. Too big for either: it gets shorter and scrolls. Set a first choice with data-open ("up", "left", "up left").placePop()

Three sizes, the same in every app (shown at half size). Small: a confirm, a quick add, a short list. Standard (plain .modal): a form, settings, Appearance; most dialogs. Wide: a page of its own (a recipe and its Edit, a title, an item, a chart). Never give a dialog its own width.

Shared settings composition. The stack owns section spacing; sections own their internal spacing. Panels opt into a surface treatment. Rows do not imply dividers or depth.

Hover a bar to thicken it, drag it, or use the arrows on the sideways one.

List tabs pick the list; the genre row under them scrolls sideways.

Rating scorecard. Each part is scored on its own; the overall score is weighted. Each part uses the rainbow rating slider (.slide.rate), the same as rateInput() above; a part not rated yet is faded. The numbers 1–10 underneath are the shared .rate-ticks, each centered where the handle sits at that score.