Kitchen sink
This page is mounted from
examples/shared/kitchen-sink.mdinto both the Docsy and the Hextra example. The markup and the stylesheet behind it are the same files the documentation site uses, so any difference you see between the two examples is a difference between the themes — not between three divergent copies of the brand.
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.
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 continues to accent-dark (#b84228, 5.46:1).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 24px, 1px slate-4 border, shadow-1 at rest. Nested
controls step down one radius.
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
Alerts and feedback
Four semantic colours as a 4px left border on a tinted background. The hues are mode-specific — see Colour.
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 always dark — see Code.
Plan: 3 to add, 0 to change, 0 to destroy.
✓ Policy check passed
● Deploying to staging…