Design system

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.

03

Molecules

A few atoms with one shared purpose, such as label, field and hint forming a form field.

Notices and status

Four conventions, graded by urgency. Error (red) for blocking errors or data inconsistency. Warning (yellow) for attention that does not block. Hint (blue) for neutral information. Success (green) for confirmations. Color carries the message; the container stays restrained.

Error

Drawing diverges from cross-section. Width 120 → 100 mm.
Blocking error, data inconsistency
<Notice tone="error">

Warning

Email not confirmed yet. Save reminders are paused.
Attention needed, non-blocking
<Notice tone="warning">

Hint

Dimensions are stored in mm. Display follows your selected unit.
Neutral information, tip, tooltip, legal disclaimer
<Notice tone="info">

Success

Project saved.
Confirmation after an action
<Notice tone="success">

Inline notice in four tones: warning, alert, hint, success.

Molecules · ReadyCode: components/ui/Notice.tsx
Loading indicator

The plain statement leads through position, not through brightness. Label and hint stay in the same quiet tone. The activity signals are loud, and so is the elapsed time, which turns yellow after 6 seconds and red after 12, in the colour language of the save dot in the header. 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.

Loading project “Carport Winni” …
Fills the waiting area (canvas, viewport)
<LoadingIndicator variant="overlay">
Loading project “Carport Winni” …
This is taking longer than usual.
Long case: elapsed time in yellow and figure join in
<LoadingIndicator figure hint={…}>
Loading project “Carport Winni” …
Please check your internet connection.
The statement turns into an action, the time turns red
<LoadingIndicator figure hint={…}>
Loading …
Compact in rows and panels
<LoadingIndicator variant="inline">

Loading indicator: text leads, bar carries, figure only when it takes long.

Molecules · ReadyCode: components/ui/LoadingIndicator.tsx

Header of app pages with breadcrumb, title, actions and meta.

Molecules · ReadyCode: components/ui/PageHeader.tsx
FormField

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.

helper
error · aria-invalid
required
control-agnostic (select)

Labelled input with helper and error text.

Molecules · ReadyCode: components/ui/FormField.tsx
TabNav
<TabNav items activeId ariaLabel testIdPrefix />

Tab bar of links for page sections that the server swaps via the address.

Molecules · ReadyCode: components/ui/TabNav.tsx
Tabs
Dimensions, material and position of the selected component.

Click a tab, then use the arrow keys, Home and End.

<Tabs items value onChange ariaLabel idBase testIdPrefix /> + <TabPanel idBase id />

Tabs that switch panels in the browser, with arrow keys, Home and End.

Molecules · ReadyCode: components/ui/Tabs.tsx
ConfirmDialog
<ConfirmDialog title body confirmLabel cancelLabel onConfirm onCancel />

Confirmation before an action that cannot be undone. Names the object and starts on cancel.

Molecules · ReadyCode: components/ui/ConfirmDialog.tsx

Place, mode, switching and creation in one spot above the drawing.

Molecules · ReadyCode: components/editor/Breadcrumb.tsx
Picker

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.

<Picker side="bottom" sections={…} />

List for switching between drawings or projects.

Molecules · ReadyCode: components/editor/Picker.tsx
Card

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.

Sample item

Secondary info, kept neutral

Static
<Card>
Sample item

Secondary info, kept neutral

Interactive
<Card interactive>
Sample item

Secondary info, kept neutral

With actions menu
<Card interactive> + <DropdownMenu>

Surface for one object with title, actions and summary.

Molecules · ReadyCode: components/ui/Card.tsx

Menu at its trigger with items, including destructive ones.

Molecules · ReadyCode: components/ui/DropdownMenu.tsx
Freshness of derived drawings

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.

Up to date
Out of date, refresh

Shows whether a derived drawing is up to date.

Molecules · ReadyCode: components/editor/SyncStatusButton.tsx
Image (marketing)

A sheet of the example as a way into the editor. With a head line it sits as on a board, the image 8 px below its baseline. Without it, it appears like this on the subpages.

Fig. 2 · PlanKVH 120 × 120
Struqo editor, plan of the example carport with a selected post, cross-section KVH 120×120 in the panelStruqo editor, plan of the example carport with a selected post, cross-section KVH 120×120 in the panel
Plan with a selected post. Cross-section in the panel on the right, cut height at the edge.
With head line, 16:9 · home page
Struqo editor, plan of the example carport with a selected post, cross-section KVH 120×120 in the panelStruqo editor, plan of the example carport with a selected post, cross-section KVH 120×120 in the panel
Plan with a selected post. Cross-section in the panel on the right, cut height at the edge.
Without head line, 16:10 · subpages

Dimming: what carries the message stays bright, the result on the drawing area and the marked control. Everything else is darkened when the image is taken, 50 % in the light and 60 % in the dark image.

Image of the editor on the marketing pages, frame with radius 8 and a strong line, caption in mono, backlit against the page. Optionally with a head line (figure and detail) as on the home page. A click opens the example in the editor.

Molecules · ReadyCode: components/marketing/LandingFigure.tsx
Title block (marketing)

Key facts in the tone of a plan. Each field takes two modules of the register, the lines move no baseline.

Updated
2026-09-30
Stage
Beta
Example
12 sheets
Changes
Journal
Sample values. On the home page, date, sheet count and stage come from the code.

Title block for marketing pages: a few key facts as term and value in mono, four fields in a row, two by two on a phone.

Molecules · ReadyCode: components/marketing/TitleBlock.tsx
Selectable-Tile

Selectable tile in context menus.

Molecules · DraftCode: components/canvas/PenStrokeContextMenu.tsx

No live demo on this page.

ProductVideo

Product video on a marketing page, in the same frame as the editor image: poster with one start button, only the click loads the video and shows the browser controls with subtitles. Counts `video.started` once per page view.

Molecules · ReadyCode: components/marketing/ProductVideo.tsx

No live demo on this page.

MoreDetails

"More" disclosure under a section of a subpage: facts from the product state, collapsed.

Molecules · ReadyCode: components/marketing/MoreDetails.tsx

No live demo on this page.

Seitenpfad (PageTrail)

Page trail above the H1 of a subpage: home, “Features” for feature pages, then the page itself as text.

Molecules · ReadyCode: components/marketing/PageTrail.tsx

No live demo on this page.

PanelSection

Collapsible section in the properties panel.

Molecules · ReadyCode: components/ui/PanelSection.tsx

No live demo on this page.

Sheet (DrawingsRailCard)

Sheet in the drawings rail with thumbnail and state.

Molecules · ReadyCode: components/editor/DrawingsRailCard.tsx

No live demo on this page.

Context menu (canvas)

Context menu on the drawing with tiles for tool settings.

Molecules · ReadyCode: components/canvas/PenStrokeContextMenu.tsx

No live demo on this page.

Toast

Floating feedback, the surface carries the status.

Molecules · DraftCode: components/editor/AutoSaveErrorToast.tsx

No live demo on this page.

Segmented control

Toggle bar such as 2D|3D.

Molecules · DraftCode: components/editor/Breadcrumb.tsx

No live demo on this page.

Design system · Struqo