Tokens, building blocks, voice.
The open reference for Struqo's visual system, from tokens to whole pages. Every value comes live from the code, Figma follows it. Agents read the same building blocks in apps/web/components/styleguide/catalog.ts.
Atoms
Building blocks that cannot be split further without losing their purpose. Independent of timber or editor state.
Text button in four ranks: main action (primary), side path (secondary), quiet action (ghost), irreversible (destructive).
Icon-only button with mandatory label and tooltip.
Composed of: Icon set
Short hint on hover, via .tooltip-wrap.
The brandmark lockup: a square mark plus the mono wordmark. Presentational only, wrap it in a link where it should navigate. It inherits its text colour from the parent so a wrapping link's hover state carries through.
Brand lockup for marketing, app and editor.
Account initials in the account menu.
The bar on its own, for waits outside the loading indicator. Deliberately without a value prop: as long as no load path measures real progress, a filling bar would be a claim without ground. Silent for screen readers, the surrounding live region carries the statement.
Bar for waits of unknown length.
Marketing navigation link, with a coming-soon state instead of a dead link.
Saved is the resting state and stays put, saving pulses. Offline and a save error are two situations: amber means it carries on by itself, red means there is something to do. The title beside it keeps its colour in every state.
Dot at the top of the editor: saved, saving, offline, error.
Switch for system, light, dark.
No live demo on this page.
The only approved mono label style, 12 px, uppercase.
No live demo on this page.
Colour dot in pickers such as the pen colour choice.
No live demo on this page.
Select field in Struqo style.
No live demo on this page.