Tokens, typography, voice.
A live reference for Struqo's visual system. Every value is read from apps/web/app/globals.css at render time, so this page cannot drift from the code.
Code is the source of truth. The Figma library and this page mirror globals.css, never the other way around.
Four conventions, graded by urgency. Warning (red) for blocking errors or data inconsistency. Alert (orange) for non-blocking attention. Hint (blue) for neutral information. Success (green) for confirmations. Color carries the message; the container stays restrained.
Warning
Alert
Hint
Success
The plain statement leads through position, not through brightness. All text stays in the same quiet tone; only the activity signals are loud. Below it an indeterminate bar runs at working pace (1.6s, linear): a determinacy sign that claims no percentage nobody has. The indicator appears from the first millisecond and fades out over 180ms at the end, so it never invents waiting time. Only after 6 seconds do the elapsed counter and the sawing Struqo craftsman join in, where distraction helps rather than slows. Under prefers-reduced-motion the stripe holds still, the text remains.
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.
Drawing line widths per DIN EN ISO 128-20, line group 1. The standard series steps by a factor of the square root of 2; a line group picks a wide-to-narrow pair at a 2:1 ratio. Whatever the section plane cuts gets the wide solid line, whatever sits behind it gets the narrow one.
The samples draw 1:1, the way the canvas draws at zoom 1. On the stage, line width scales with the zoom.
List-item container in three variants: static for passive info, interactive with a hover state, and with an actions menu for secondary operations. The card body is always the primary click target. Secondary actions live in the ⋯ menu in the top-right, never as parallel buttons.
Secondary info, kept neutral
Secondary info, kept neutral
Secondary info, kept neutral
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.
Page title with slots for title, actions, breadcrumb and a meta line, with an optional divider. It sits inside the page and is not the app-shell chrome (that arrives as its own organism).
Projects
Projects
Projects
Label, helper text, error message and the a11y wiring around any control. The error state sets aria-invalid and tints the border. Control-agnostic: input, select or textarea.
We never share it.
Required field.
One selection list for five instances: project, sheet, type, snap step, unit. The entry in force is marked and stays selectable; disabled is reserved for what does not exist. Click the button to open, Esc closes it and returns focus.
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.
The drawings rail shows per view whether the projection still matches its source plan. This is not a save status: it knows nothing about the network or the server, it only compares derivation against source. A closed ring means complete, an open arc means something is missing. One click brings it up to date.
Tree treatments.
Three answers to "What would Dieter Rams do?" for the wood building block. Same geometry, three dialects. Used on the landing ("Why wood") and the stance page.
Tree as a wood drawing: hatched post trunk, mono dimension, faceted crown.
Pure line dialect, the same language as the ValueProps diagrams.
Flat pictogram in muted green, the softest and most organic.
Self-aware, relaxed, with a wink.
Measured: three to five beats per longer page. The product is meant to grow and become big; the posture can already smile at itself today without making itself small.
text-text-3 currently fails WCAG AA contrast, panel inputs suppress the global focus ring, and wood species swatches still live outside the CSS token system. Details in docs/DESIGN_SYSTEM.md under Known gaps.