Labs · Design system
TopxAI Paper
The visual design spec of the TopxAI desktop app: warm white and charcoal, the system font in the workspace and brand blue only where you press. Version 1.1 fills the gaps found in the first draft. Light and dark tokens, CSS, 29 components and 18 screens, free to reuse.
Three rules
- Blue only where you press: warm white and charcoal carry the window; brand blue is kept for the main button, focus, selection and anything running.
- Say what happened and what to do: count what the agent did, ask plainly when it needs you, and make every error a fix.
- Serif only for brand moments: the workspace uses the system font; Noto Serif SC and Instrument Serif appear only on launch, sign-in, the device code and the home greeting.
Download the kit (version 1.1.1) · README.md · tokens.json · tokens.css · bundle.css
What is in the kit
The English edition: light and dark tokens, CSS, 29 components with a light and a dark preview and a guide each, 18 screens of the desktop app at 1440 by 900 drawn in English with the HTML they were taken from, the logos and the fonts under the SIL Open Font License. Prices, balances and names in the screens are made up.
What version 1.1 changes
We checked the first draft against its own rules, its eighteen screens and WCAG 2.1 AA.
- Corrections: success text, form-control outlines and keyboard focus now meet their contrast floors; control heights have one value each; the launch icon CSS matches the icon file; status words, times and countdowns each have one way to be written; the stylesheet gains real hover, focus and disabled states and motion that respects reduced motion.
- Additions: number, time, token and money formats; busy, offline, low-balance, provider-error and stopped states; accessibility rules; a shortcut table and minimum window; Dialog, Message and Tabs components; dark previews and bundled fonts; an English edition with English copy rules, Instrument Serif display styles and every screen drawn in English.
- Still to decide: what Return does while an approval waits, agent colours that differ mostly in hue, row dividers that match the hover colour, and English translations of the poster quotations.