ui kit

Type is the interface. Large, light and lowercase for headers; regular for body; semibold only for short emphasis. Hierarchy comes from size and color (fg vs subtle), never from boxes or lines.

Two themes (dark is the default), one accent. The accent marks what is interactive or selected — use it sparingly so it keeps its meaning. Flat fills only: no gradients, no shadows.

Outlined and transparent by default; inverts on press. Use the accent variant for the single primary action on a surface. Buttons tilt towards where they are pressed.

The round icon button. One of the only circles in Metro. Icons are single-color SVGs tinted by CSS; labels are one lowercase word.

For settings that take effect immediately. Always print the state in words next to the switch — never rely on the fill color alone.

Check boxes for independent options that are applied later (e.g. on save). Radio buttons for one-of-many; if there are more than ~5 options, use a list picker instead.

Flat track filled with the accent, narrow rectangular thumb. Show the value when it matters to the user.

Header above the box, never placeholder-only. The box lights up (solid + accent border) while focused. Errors go under the box in red, in plain words.

The Metro combo box. Expands in place and pushes content down instead of floating a dropdown; the selected option is shown in the accent color.

Indeterminate dots when you can't tell how long it will take; the determinate bar only when you can. The ring is for inline or blocking waits in a small space.

Large light title + one subtle line. Whitespace separates items — no dividers, no chevrons. Items enter with a stagger and tilt on press.

Several filtered views of the same content. Tap a header or swipe. The selected header always moves to the front; headers run off the edge to hint there is more.

A single wide canvas you scroll through horizontally, with the title and background moving slower than the content (parallax). Each section should peek into the next.

Up to four round icon buttons for the most common commands, plus a text menu for the rest. Tap the ellipsis to reveal labels and the menu. Pass `fixed` to pin it to the viewport.

A full-width band across the middle of a dimmed screen (top-anchored on phones). No close button: every exit is an explicit, verb-labelled command. Escape = cancel.

Short, glanceable, and optional to act on. Slides in from the right on desktop, drops from the top on phones, and dismisses itself.

Fast and decelerating: things arrive quickly and settle. Exits are shorter than entrances. Related items move together with a small stagger. Every class below is plain CSS you can put on any element.