Design system
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.
Surfaces
bg-body
bg-body
bg-elevated
bg-elevated
bg-surface
bg-surface
bg-hover
bg-hover
bg-active
bg-active
bg-selected
bg-selected
Text
text-text
text-text
text-text-2
text-text-2
text-text-3
text-text-3
text-text-disabled
text-text-disabled
text-text-on-selected
text-text-on-selected
text-interactive
text-interactive
text-interactive-hover
text-interactive-hover
Borders
border-border-default
border-border-default
border-border-strong
border-border-strong
Status (UI feedback)
--color-success
text-success
--color-success-subtle
bg-success-subtle
--color-warning
text-warning
--color-warning-subtle
bg-warning-subtle
--color-error
text-error
--color-focus-ring
Canvas object states
--color-state-selected
--color-state-hover
--color-state-locked
--color-state-hidden
--color-state-error
--color-state-warning
--color-state-success
--color-state-info
Wood species
--color-wood-fichte
--color-wood-laerche
--color-wood-douglasie
--color-wood-eiche
--color-wood-stroke
Type scale
Ag 1234
--text-xs
Ag 1234
--text-sm
Ag 1234
--text-base
Ag 1234
--text-lg
Ag 1234
--text-xl
Ag 1234
--text-section-xs
Ag 1234
--text-section-sm
Ag 1234
--text-section
Ag 1234
--text-display-xs
Ag 1234
--text-display-sm
Ag 1234
--text-display
Line height
--leading-display
Used for headlines
--leading-heading
Used for headlines
Letter spacing
--tracking-display
Used for display and mono labels
--tracking-heading
Used for display and mono labels
--tracking-eyebrow
Used for display and mono labels
Eyebrow utility
KNOWS ITS WAY AROUND WOOD.eyebrow
Spacing (8px grid)
--spacing-1
--spacing-2
--spacing-3
--spacing-4
--spacing-6
--spacing-8
--spacing-12
--spacing-16
Corner radius
--radius-sm
--radius-md
--radius-lg
Shadow
--shadow-sm
--shadow-md
--shadow-lg
Motion
--duration-fast
Duration or easing curve
--duration-normal
Duration or easing curve
--ease-standard
Duration or easing curve
Layout
--max-width-container
Container max width
Z-index
--z-sticky
Stacking order
--z-dropdown
Stacking order
--z-modal
Stacking order
--z-tooltip
Stacking order
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.