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.
Organisms
Distinct surfaces made of molecules and atoms, often with their own state or domain logic. The live view is the editor.
Term on the left, explanation on the right, hairlines between rows, text 16 px in from both edges. With a target the whole row is a link: a surface on pointer hover, briefly on tap, one focus ring around the row. Without a target the row stays text. In use on the home page.
- Structural
- Struqo does no structural calculation and approves nothing. Have a structural engineer check the design before you build.
Table of term and explanation, optionally with the whole row as a link.
Editor header bar.
No live demo on this page.
Tools and component palette on the left, collapsible via a chevron on the canvas-facing edge.
No live demo on this page.
Footer bar with drawing aids, display and readouts.
No live demo on this page.
Rail with all sheets of a project.
No live demo on this page.
Header of app pages outside the editor.
No live demo on this page.
The drawing surface with grid, ruler and corner label.
No live demo on this page.
Title block of a plan with project, scale, date and sheet number.
No live demo on this page.