Foundations
The parts every screen is built from
Graphite, hairlines and one signal colour. The viewport is the room; everything else is instrumentation. The model is the only thing allowed to glow.
Every hex on this page is read from the running stylesheet, and every component below is the real one other screens use — not a redrawing. The contrast ratios are computed in your browser rather than asserted.
01 / Colour
Reading the tokens…
Status is never carried by hue alone. Ready, running and failed differ in lightness as well as colour, and each one also carries a word — see 03.
02 / Contrast, computed
Computing…
03 / Type
Display · 600, tight tracking
Keep the mesh
Headings and headlines only, 18px and up. Tight tracking gives the product a precision-tool voice rather than a brochure one.
Interface · 400 / 500 / 600
Body copy, labels, buttons and every control
400 for prose, 500 for labels, 600 for anything you press. Never below 12px for text that has to be read.
Data · monospace
41,208 tris · 26 u · 8.1 MB
Every number, every file name, every seed, and the small-caps section labels. If it is a quantity, it is monospaced.
04 / Parts
Buttons
The heights below are measured off the rendered element, not read off the class.
7px radius. 44px is used for the one call to action a screen is built around; 38px for a normal control; 32px and 30px only inside a dense table or beside a larger target. That is not 44px everywhere — see 06.
Status and licence
Each chip carries the word, so the state survives the colour not being readable. Licence uses one component on every screen, so the words and the explanation behind them cannot drift apart between pages.
Choices
A segment is a single choice: one lifted out of the track. A chip is a multi-select. Both carry aria-pressed, so a screen reader says the state and not just the name.
Fields
Placeholders use ink-3 on page: 5.25:1, which passes.
Messages
An ordinary aside.
Done, and the units are back.
Something needs a decision from you first.
It failed, and nothing was charged.
Surfaces
page
panel
panel-2
raised
Four levels, not three. The stage has its own gradient because it is the only lit region — which is also why it is not in this table.
05 / Six rules the screens follow
01
One line describes the job
From what, make what. Inputs and outputs are two choices on one surface, not four separate modes you have to pick between before you can start.
app/bench/page.tsx
02
Cost is shown before commitment
The number of units sits next to the Run button and changes as the settings change. The quote comes from the same code path that charges, so the two cannot disagree.
components/CommissionDock.tsx · backend/internal/tariff
03
Licence is never buried
Public or private appears on the run, on the shelf, on the spec sheet and in the sign-up copy — through one component, so the wording can never differ.
components/ui.tsx · LicenceChip
04
Failure costs nothing
A failed or cancelled job is refunded in the same transaction that marks it failed, and the ledger shows the refund as its own line so the arithmetic is checkable.
backend/internal/store/jobs.go · FailJobAndRefund
05
The model gets the room
Controls float over the stage in one dock rather than walling it in with panels. Everything that is not the model is graphite, hairlines and small type.
components/ModelStage.tsx · CommissionDock.tsx
06
Region picks the language
An Indonesian time zone or browser language opens Bahasa Indonesia and Rupiah; everywhere else gets English and USD. A manual pick always wins and is remembered.
lib/i18n.tsx
06 / Where this page disagrees with the design file
The design file closes its foundations with a green panel listing five accessibility claims and a tick beside each. Three of them are true. Two are not — and because section 02 computes the numbers, neither can be hidden. Below is what was actually built, rather than what was promised.
“Body text clears 4.5:1 on every surface.”
True of body text: ink and ink-2 clear 4.5 on all four surfaces by a wide margin. But the table in 02 covers two further text tokens. ink-3 — labels, metadata, placeholders — drops to 4.29 on raised, and ink-4 sits around 2.0–2.4 everywhere. ink-4 is therefore confined to three places, none of which carries information: the “—” that means there is no value, the breadcrumb separator slash, and one inactive state in the converter. No sentence is ever set in it.
“44px minimum for anything tappable.”
Not as stated. 44px is used for the one call to action per screen; a normal control is 38px; chips and segments are 32px; the icon controls in the top bar are 30px. All of them clear WCAG 2.2 AA's target-size minimum of 24×24px, and none of them reaches the AAA guidance of 44×44px. The number under each button in 04 is measured off the rendered element, so this claim cannot be restored by editing prose.
“Real buttons, links, labels and tables.”
Holds. Button renders a <button> and ButtonLink renders an <a> through next/link — the first is never used to navigate and the second never to act. Field ties a <label> to its control with htmlFor, and tabular data is in a <table> with <th> on its axes.
“Icon-only controls carry a label.”
Holds. The three icon-only controls in the top bar — notifications, search, account — each carry a bilingual aria-label, and the search button also carries a title for its shortcut. The glyph inside is never the control's only name.
“State is never colour alone.”
Holds, and is enforced by the component's shape. StatusChip takes the status as a string and prints it; there is no way to call it that yields a coloured chip with no word. The four state colours also differ in lightness, so the order survives being read in greyscale.