Foundations
Nitti Intelligence and Polyther share every value on this page except the accent. Switch light and dark at the top right; everything follows.
Neutrals
Near-neutral greys with a trace of warmth. Areas separate by these fills, not by outlines; text clears 7:1 against the page.
Accents
The only values that differ by brand. Filled accent always carries text at 7:1 or better.
Status
Each status pairs a reading colour with a quiet surface, used together.
Typography
Instrument Serif sets the page: titles, greetings, the first line someone reads. Geist carries everything else. Mono is for data only, never for navigation or labels.
Surfaces
Three levels, told apart by fill and, for what floats, by shadow.
Radius
Soft, consistent corners from one --radius of 12px.
Sizes
One scale of heights for everything that can share a row: buttons, toggles, avatars, fields. The same name is the same height in every component, so a row is built by giving its parts one size. A status in such a row is a dot with its word (Status), not a filled pill: a pill would be one more shape at one more height, and would look like something to press. Badge stays for labels inside content.
Lists in menus
Every menu, picker, select and command palette uses one anatomy, so a heading never reads as one more row. Weight belongs to the heading; rows are regular. Set once in globals.css as list-label, list-title and list-note.
- list-label
- A group's heading: 12 px, medium, muted, with 10 px of air above and 5 px below. It takes the same side padding as its rows, so it lines up with them.
- list-title
- A row's name: 14 px, regular, in the text colour. Never bold; the chosen row is marked by a fill and a check, not by weight.
- list-note
- The line under a name saying what it means: 13 px, regular, muted. Extra facts about a row (who serves a model, a shortcut) sit at its right edge in 12 px muted.
Motion
Three curves and three durations (160, 280, 460ms) in CSS, for entrances, hovers and loops. Anything that follows the pointer or makes room uses Motion for React with the same feel as named springs (makeRoom, settle, lift, snap in lib/motion), so a move that is interrupted carries its speed on. Under reduced motion every movement becomes an immediate change.