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 brand/html/projectious-kitchen-sink.html. They follow your colour mode —
switch the theme and they change with the documentation.
Measurements listed here are normative: a 40px input is 40px.
Five variants, three sizes. Plus Jakarta Sans 600, 6px radius, 200ms transitions.
Variants — medium (40px)
Sizes — sm 32px · md 40px · lg 48px
On a midnight surface
| 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 |
Accent buttons fill with accent-solid, not step 9
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
continues to accent-dark (#b84228, 5.46:1).
Do
Use exactly one accent button per view. Give every button a verb — “Deploy”,
“Save changes”.
Don't
Place two accent buttons side by side, or use a danger button for a reversible
action.
Default height 40px (sm 32, lg 48). Source Sans 3 at 13px, slate-7 border,
and a 2px focus ring at midnight 15% alpha.
Text, textarea, select
States — default, focus, error, disabled
Full rules — labels, validation, focus — are on
Forms.
Cards
Radius 9px, padding 24px, 1px slate-4 border, shadow-1 at rest. Nested
controls step down one radius.
Basic, with image, with actions
Validate & deploy
Runs policy checks before promoting to staging.
Image / diagram
Architecture
Nodes, flows, and policy gates.
Agent: auditor
Idle for 2 hours.
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.
Data table with sort indicator
| 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.
Search, filter chips, pagination footer
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.
Two-row header with column groups
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.
Row groups, indented children, totals
| 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.
Horizontal scroll with a sticky first column
Do
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.
Don't
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.
Navbar — follows the colour mode; 1px border, 2px accent underline on the active link
This specimen mirrors .td-navbar — the header at the top of this page. Switch
the theme and both change together.
Breadcrumbs, tabs, pagination, sidebar
OverviewRunsSettings
accent underline on activecurrent in midnight-9
active: 600 weight
Alerts and feedback
Four semantic colours as a 4px left border on a tinted background. The hues are
mode-specific — see Colour.
Alerts
Info
Pipeline requires at least one validation agent.
Success
All checks passed. Deployment ready.
Warning
Agent "monitor" has been idle for 2 hours.
Danger
Policy violation — deployment blocked.
Badges, progress, spinner
Default
Urgent
v0.1.0
Breaking
Semantic colour is not decoration
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.
Dialog, dropdown, tooltip
Delete pipeline?
This removes the pipeline and its run history. This cannot be undone.
Re-run
Duplicate
Export logs
Last run 4 minutes ago12px, 3px radius
Data display
Avatar, stat card, tags
JD
AS1,284
Runs this week
▲ 12% vs last week
List and timeline
validate-deploy4m ago
nightly-audit2h ago
release-train1d ago
Deploying to staging
09:16Status indicators — always a dot plus a label
Healthy
Degraded
Failed
Idle
Do
Pair every status dot with a text label, so meaning does not depend on colour
perception.
Don't
Use a bare coloured dot, or rely on red/green alone to distinguish states.
Code and terminal
The code surface is always dark — see Code.
Terminal
$ tofu apply -auto-approve
Plan: 3 to add, 0 to change, 0 to destroy.
✓ Policy check passed
● Deploying to staging…