Components
The component set as live specimens — buttons, inputs, cards, tables, navigation, feedback, overlays, and data display.
Every specimen on this page is live markup styled by the brand tokens, ported from the supplied kitchen-sink mockup. They follow your colour mode — switch the theme and they change with the documentation.
Measurements listed here are normative: a 40px input is 40px.
Buttons#
Five variants, three sizes. Plus Jakarta Sans 600, 6px radius, 200ms transitions.
| Variant | Fill | Border | Text | Contrast | Use |
|---|---|---|---|---|---|
| Primary | midnight-9 | none | white | 12.75:1 | Default action |
| Accent | accent-solid #cc4528 | none | white | 4.72:1 | The single most important action |
| Outline | transparent | 1.5px orange-9 | orange-11 | 5.13:1 | Secondary action |
| Ghost | transparent | 1px border | slate-9 | — | Tertiary, toolbars |
| Danger | #a8261c | none | white | 7.10:1 | Destructive action |
orange-9 (#E05232) is the identity accent and is unchanged as a mark,
border, active state, or syntax colour. But white on it measures 3.87:1 —
below the 4.5:1 floor for 13–14px labels. Solid accent controls therefore fill
with --color-accent-solid (#cc4528), white at 4.72:1; hover
uses opacity 0.88 rather than inventing a lighter or darker brand colour.
Hover is structural across components: primary surfaces move to opacity:.88
and card borders move to midnight-7. Pressed controls remain at their hover
state and never scale down. Do not lighten or darken a brand colour to create an
interaction state.
Use exactly one accent button per view. Give every button a verb — “Deploy”, “Save changes”.
Place two accent buttons side by side, or use a danger button for a reversible action.
Inputs#
Default height 40px (sm 32, lg 48). Source Sans 3 at 13px, slate-7 border,
and a 2px focus ring at midnight 15% alpha.
Full rules — labels, validation, focus — are on Forms.
Cards#
Radius 9px, padding 16px 24px, 1px slate-5 border, flat at rest. shadow-1
is reserved for hover; nested
controls step down one radius.
Transparency is restricted. Use backdrop blur only for dark-on-dark modal
scrims and dark-panel inner cards, where the inner surface is
rgba(255,255,255,.04). Do not put frosted glass on a light surface. Tags and
badges use solid pale tints, never alpha overlays.
Tables#
Header cells use the overline style. Striping uses the subtle background step, never a border-only rule. Wide tables scroll inside their own container.
| Pipeline | Policy | Agents | Status |
|---|---|---|---|
| validate-deploy | strict | 2 | Healthy |
| nightly-audit | advisory | 1 | Degraded |
| release-train | strict | 4 | Blocked |
Table with search and filters#
A toolbar above the table carries the search field and filter chips. Active filters are shown as removable chips so the current view is always legible — never leave a filter applied with no visible indication.
| Pipeline | Policy | Owner | Status |
|---|---|---|---|
| release-train | strict | platform | Blocked |
| nightly-audit | strict | security | Failed |
Multi-level headers#
Grouped columns use a two-row header. The group row is centred over its span and separated by a vertical rule — the only place the system uses one.
| Pipeline | This week | Last week | ||||
|---|---|---|---|---|---|---|
| Runs | Pass | p95 | Runs | Pass | p95 | |
| validate-deploy | 412 | 98.1% | 4m12s | 388 | 97.4% | 4m40s |
| nightly-audit | 7 | 71.4% | 18m03s | 7 | 85.7% | 17m22s |
| release-train | 14 | 92.9% | 9m51s | 12 | 91.7% | 10m08s |
Grouped rows and totals#
Row groups act as sub-headings inside the table. A totals row is separated by a 2px rule — heavier than the body rules, so it reads as a summary rather than another record.
| Workload | Runs | Cost |
|---|---|---|
| Platform | ||
| validate-deploy | 412 | €48.10 |
| release-train | 14 | €12.60 |
| Security | ||
| nightly-audit | 7 | €21.40 |
| secret-scan | 96 | €9.05 |
| Total | 529 | €91.15 |
Wide tables#
A wide table scrolls inside its own container, never the page, and pins its first column so the row identity stays visible while scrolling.
| Pipeline | Policy | Owner | Runs | Pass | p50 | p95 | Region | Status |
|---|---|---|---|---|---|---|---|---|
| validate-deploy | strict | platform | 412 | 98.1% | 2m01s | 4m12s | eu-central | Healthy |
| nightly-audit | strict | security | 7 | 71.4% | 11m40s | 18m03s | eu-west | Degraded |
Right-align numeric columns and set them in IBM Plex Mono so digits line up. Show the active filter state and the result count together.
Add vertical rules between ordinary columns, let a wide table scroll the whole page, or apply a filter without a visible chip saying so.
Navigation#
The navbar follows the colour mode: midnight-1 at 88% alpha in light,
midnight-dark-1 at 88% in dark, both over a 12px backdrop blur so content
scrolling underneath stays legible. It is separated by a 1px border, not a
fill — the header is chrome, and a solid midnight band at the top of every page
spends the brand’s darkest surface on navigation.
The active link carries a 2px accent-solid underline plus the
high-emphasis text step. The underline is accent-solid rather than orange-9
because it sits directly against 13px text and is read as part of it.
This specimen mirrors .td-navbar — the header at the top of this page. Switch
the theme and both change together.
Alerts and feedback#
Four semantic colours as a 4px left border on a tinted background. The hues are mode-specific — see Colour.
Success, warning, and danger carry meaning. Do not use them to add visual variety to neutral content.
Modals and overlays#
Modal radius 13px with shadow-3; scrim is midnight at 40% alpha. Focus is
trapped while open and restored to the trigger on close; Esc always closes.
Data display#
Pair every status dot with a text label, so meaning does not depend on colour perception.
Use a bare coloured dot, or rely on red/green alone to distinguish states.
Code and terminal#
The code surface is dark by default. Use the complete light companion only for an explicitly light panel; never switch it automatically with interface mode. See Code.
Plan: 3 to add, 0 to change, 0 to destroy.
✓ Policy check passed
● Deploying to staging…