Components

The three-row application scaffold: toolbar over a left/main/right body over a status bar.

The touch-app frame: a sticky app bar, one scrolling column, and a bottom nav in thumb reach.

The header bar: a title plus structured start, center, and end regions for actions and navigation.

The side rail: a vertical panel pinned to the left or right edge of the shell.

The footer status strip: a compact, monospace row of status items separated by flexible spacers.

A drag-and-drop dockable-panel workspace: tabbed zones that rearrange by dragging.

A draggable divider that resizes an adjacent pane, with configurable bounds and steps.

A surface container that groups related content, with optional header and footer regions.

A titled content region: a header with a configurable heading and actions, a body, an optional footer, and an optional collapsible or scrollable form.

A hairline divider: horizontal or vertical, optionally with a centered label, in two weights.

A vertical flex column with a token-driven gap, the primitive for stacking content.

A horizontal flex row that wraps, for toolbars, tag lists, and inline action groups.

A two-dimensional CSS grid: fixed columns or responsive auto-fit, with a token-driven gap.

A page band or a framed stage: the full-width strips and demo grounds a page is built from.

A whole card that is a single link: the click target is the card, not a button inside it.

A clickable action: five variants across six semantic tones.

An on/off toggle that applies immediately, with an accessible name and optional state labels.

A styled native checkbox: checked, indeterminate, and disabled states.

A single-choice input: a styled native radio plus a group that manages roving focus and arrow-key navigation.

A rating control — interactive or read-only — that scores with any icon and shows fractional values as a partial icon.

A draggable range control for choosing a single value between a min and max, with full keyboard support.

A single-select toggle bar: pick one of a few options from a connected button group.

A stack of collapsible sections, one or many open at a time, driven by pointer or keyboard.

A color chip pairing a colored dot with an optional label and value.

A labelled text input with helper text, validation, adornments, and built-in clear and reveal actions.

A styled native dropdown: .xtyle-control chrome, a custom chevron, and a label, with valid and invalid states across three sizes.

A multi-line text input: styled, labelled, and resizable, in three sizes with an invalid state.

A label / description / error scaffold that wraps any slotted control and wires the accessibility plumbing.

An inline HSV color picker: a saturation/brightness field, a hue track with an opt-in alpha track, optional per-channel sliders for any model, and a switchable multi-format value field.

A numeric field with stepper buttons, bounds, and step snapping, driven by pointer or keyboard.

A text hyperlink: the anchor primitive, in three emphasis variants with an automatic external-link affordance.

A thumb-reachable bottom tab bar: a real tablist with roving focus and an accent indicator.

Sectioned content switching with a full WAI-ARIA tablist: three visual treatments, keyboard-driven.

A hierarchy trail showing where a page sits, with linked ancestors and a marked current location.

A horizontal step indicator for a linear flow: done, current, and upcoming at a glance.

A hierarchical, keyboard-navigable list of expandable nodes built from a data array.

An on-this-page table of contents that highlights the section currently in view.

A page navigator: previous/next controls around a windowed list of page numbers with ellipses.

A compact label, tag, or status chip: three fills across six semantic tones and twelve named hues, optionally removable.

A standalone status dot: a bare indicator in any tone, with optional ping, glow, and pulse.

A corner ribbon: a diagonal banner pinned to a container's corner for a short label, in any tone.

An inline message banner with an optional severity glyph, a title, actions, and a dismissible form; color and meaning on independent axes.

An indeterminate loading indicator: a spinning ring in any of the six semantic tones, in three sizes.

A shimmering loading placeholder in four shapes: text, line, block, and circle.

A transient notification that announces itself and slips away; color and meaning on independent axes, in a live-region stack.

A centered placeholder for a no-data state: an icon, a message, and an action.

A progress bar or capacity meter: a linear bar or circular ring with value thresholds that recolor and pulse.

A hover/focus hint that floats a short description beside its trigger, on any of four sides.

A centered modal built on the native <dialog> element: scrim, focus trap, and Esc-to-close come for free.

A menu button: a trigger that opens an anchored popup list of actions.

A semantic section heading whose visual size is decoupled from its document level.

A body-text primitive: paragraph or inline span across four sizes, four weights, three leadings, and four tones.

A styled data table around native <table>: zebra, bordered, hover, sticky header, and a sortable-header affordance.

A vertical activity feed: an ordered list drawn as a connected rail of dots.

The small uppercase kicker that sits above a heading.

A keycap for the keys in a shortcut.

const theme = derive(algo);emit(theme, "css");

A read-only, syntax-highlighted code block themed entirely from the code-token family.

An identity chip: a photo when one loads, a tinted initials-or-icon fallback when it doesn't.

A row of overlapping avatars with a trailing +N overflow chip, for a contributor, attendee, or reviewer stack.

A functional glyph, or a mark generated from a name, drawn in the current text color.

A responsive image in an aspect-ratio frame, with a loading shimmer and an opt-in lightbox.

A scroll-snap track of slides with prev/next controls, dots, keyboard, and opt-in autoplay.

A layered banner whose layers drift on scroll or follow the cursor, static with no JS or reduced motion.

A top-of-page band that composes an eyebrow, heading, text, actions, and media into a hero.

A themeable QR code that derives its colors from the active theme, drops an icon in the middle, and can fall back to guaranteed-scannable black-on-white.

A single metric: a prominent value with its label, optional trend delta, and caption.

A grouped or stacked bar chart, colored from a theme-derived series palette, with an interactive value readout and opt-in clickable bars.

A tiny, word-sized trend line, area, bar, or occupancy chart, single-tone and axis-free, for inline use or a live time-series.

A 2D intensity grid (the activity-calendar / punch-card shape), colored on a theme-derived ramp, with a per-cell readout and opt-in clickable cells.

A pie or donut chart of parts against a whole, colored from a theme-derived palette, with an interactive readout.