Componentes

Rectangular, typographic action: primary, signal, neutral or ghost. Renders a link with href.

DS-4 · Static

A modal panel (Reka UI): focus trap, Esc, scroll lock; a sheet from the bottom on phones, centered from 600px.

Época · Needs hydration

A square button carrying only an icon; its required label is the accessible name and the tooltip.

Época · Static

Text link: inline in running text, nav, or a standalone arrow; external links are marked.

DS-4 · Static

A swatch showing the exact color plus the value as editable text.

DS-4 · Needs hydration

A duration as hours : minutes : seconds, each part a drum with steppers above and below; parts carry, held steppers repeat, arrow keys step; v-model in milliseconds.

Época · Needs hydration

Label, hint, control and an explicit error, wired together for assistive technology.

DS-4 · Static

Single-line text, number or email field with explicit focus and invalid states.

DS-4 · Static; hydrate for live behavior

Choose a line: station markers in each line's color as a radio group, each named in words.

Época · Needs hydration

The native select, styled to match Input.

DS-4 · Static; hydrate for live behavior

Single-value range (Reka UI) with the value printed in mono.

DS-4 · Needs hydration

On/off panel switch (Reka UI): rectangular track, square thumb.

DS-4 · Needs hydration

The departure board: DepartureRows whose columns line up across rows, with optional headings and an empty state.

Época · Static

One departure on the board: station, name, state in words, time, and the stretch travelled in the line's color.

Época · Static

Metadata as a definition list: technical-sheet rows or an inline byline.

DS-4 · Static

Hairline rows, mono headers, no zebra; scrolls inside its frame on phones.

DS-4 · Static

Classification marker: small, mono, hairline; optionally prefixed by a line chip.

DS-4 · Static

Time as a departure board prints it: condensed Plex, tabular figures that never jitter, tight leading.

Época · Static

Links to the same page in each locale; locales without an equivalent are omitted.

DS-0 · Static

The station mark and the name, riding the page's current line.

Brand · Static

Previous and next as signs, carrying hooks for ←/→ keys.

DS-4 · Static

Documentation sidebar: grouped links, the current page on a route rule; a disclosure on phones.

Docs · Static

Site header: wordmark, destinations and a locale slot. Works without JavaScript.

DS-4 · Static

Lighting switch: one button showing day, night or system with its icon and label; a press moves to the next. Wired by initThemeSwitches() from @400/ds/theme, without hydration.

Theme · Static

A small technical annotation carrying real data: an index, a date, a coordinate.

DS-2 · Static

Inline SVG from the set: decorative by default, labelled when it carries meaning.

DS-2 · Static

A notice to the public in four tones, each with its own icon shape.

DS-2 · Static

One route in one line color, e.g. a page's sections as stations.

DS-2 · Static; hydrate for live behavior

A transit network: single-color lines, interchanges and branches.

DS-3 · Static; hydrate for live behavior

Wayfinding plate: a destination, a direction, a second language.

DS-2 · Static

A station inline: a ring by state, a capsule for interchanges.

DS-2 · Static

The stage around a live artifact, with station annotations and a hint.

DS-4 · Static

Platform name board: the alternative mark for share cards and signage.

Brand · Static

A project as an editorial composition, not a card: lead, split or column.

DS-4 · Static

Long-form Markdown at a reading measure.

DS-5 · Static

A photograph with caption and credit: ratios, focal crops, art direction, overlays.

DS-3 · Static

Material swatches from tokens: azulejo, ripado, tactile paving, hazard.

DS-3 · Static

Breaks out of the content columns to the viewport edge.

DS-3 · Static

A placement on the Grid, counted from the first content column.

DS-3 · Static

Display type capped to fit its container, for long single words.

DS-3 · Static

Exposes the content columns to its children: 4, 8 or 12 by breakpoint.

DS-3 · Static

Pulls a plane up across the bottom edge of what precedes it.

DS-5 · Static

A solid panel of one surface, mounted on photographs or floated over edges.

DS-5 · Static

An architectural room: its surface, its vertical void and the page grid.

DS-3 · Static

A section's station index, title and optional lede.

DS-3 · Static

Vertical rhythm: children separated by one space token.

DS-3 · Static

Draws the page grid over the viewport; the host toggles its hidden attribute (?grid or Shift+G).

DS-1 · Static