struqo
DEEN
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.

Illustration

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.

Konstruktion

Tree as a wood drawing: hatched post trunk, mono dimension, faceted crown.

Strich

Pure line dialect, the same language as the step icons on the home page.

Aicher

Flat pictogram in muted green, the softest and most organic.

Grove

Two trees on a ground line, one stroke that stays the same at every size. Frames the “Why wood” section on the home page.

Voice and tone

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.

Pattern
Still X
Do
v0.9 · wooden construction planner · still beta
Avoid
v0.9 · wooden construction planner · in beta
Still signals we know where we are and we are working on it. In just hangs there.
Pattern
Parenthetical hedge
Do
Plan and BOM for (small) wooden projects.
Avoid
Plan and BOM for wooden projects.
The parenthesis smiles at current smallness without closing the door on growth.
Pattern
Competence pivot
Do
More expensive tools exist for that.
Avoid
Better tools exist for that.
More expensive states a fact. Better would be self-deprecation that lowers product value.
Pattern
Honest punchline
Do
One developer, reachable. Mostly.
Avoid
One developer, always here for you.
The second sentence hedges honestly and earns trust.
Known gaps

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.

Design system · Struqo