Designsystem
Tokens, Typografie, Voice.
Eine offene Referenz zum visuellen System von Struqo. Alle Werte werden live aus apps/web/app/globals.css gelesen, die Seite kann also nicht vom Code abweichen.
Quelle der Wahrheit ist der Code. Die Figma-Bibliothek und diese Seite spiegeln globals.css, niemals umgekehrt.
Flächen
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
Ränder
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-Objektzustände
--color-state-selected
--color-state-hover
--color-state-locked
--color-state-hidden
--color-state-error
--color-state-warning
--color-state-success
--color-state-info
Holzarten
--color-wood-fichte
--color-wood-laerche
--color-wood-douglasie
--color-wood-eiche
--color-wood-stroke
Typo-Skala
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
Anwendung: Headlines
--leading-heading
Anwendung: Headlines
Letter-Spacing
--tracking-display
Anwendung: Display und Mono-Labels
--tracking-heading
Anwendung: Display und Mono-Labels
--tracking-eyebrow
Anwendung: Display und Mono-Labels
Eyebrow-Utility
KENNT SICH AUS MIT HOLZBAU.eyebrow
Spacing (8px-Raster)
--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 bzw. Easing-Kurve
--duration-normal
Duration bzw. Easing-Kurve
--ease-standard
Duration bzw. Easing-Kurve
Layout
--max-width-container
Container-Maximalbreite
Z-Index
--z-sticky
Stacking-Reihenfolge
--z-dropdown
Stacking-Reihenfolge
--z-modal
Stacking-Reihenfolge
--z-tooltip
Stacking-Reihenfolge
Voice und Tone
Selbstkritisch-entspannt mit Augenzwinkern.
Dosiert, drei bis fünf Pointen pro größerer Seite. Das Produkt soll wachsen und groß werden, die Haltung darf heute schon schmunzeln, ohne sich klein zu machen.
Muster
Noch X
So
v0.9 · Holzbau-Planer · noch Beta
Nicht so
v0.9 · Holzbau-Planer · in Beta
Noch signalisiert: wir wissen, wo wir stehen, wir sind dran. In hängt im Raum.
Muster
Klammer-Relativierung
So
Plan und Stückliste für (kleine) Holzprojekte.
Nicht so
Plan und Stückliste für Holzprojekte.
Die Klammer lächelt über die aktuelle Kleinheit, ohne Wachstum auszuschließen.
Muster
Kompetenz-Pivot
So
Dafür gibt es teurere Werkzeuge.
Nicht so
Dafür gibt es bessere Werkzeuge.
Teurer beschreibt Fakt, bessere wäre Selbstabwertung.
Muster
Honest Punchline
So
Ein Entwickler, erreichbar. Meistens.
Nicht so
Ein Entwickler, immer für dich da.
Der zweite Satz relativiert ehrlich und schafft Vertrauen.
Offene Stellen
text-text-3 scheitert derzeit am WCAG-AA-Kontrast, Panel-Inputs unterdrücken den globalen Focus-Ring, und die Holz-Swatches leben noch außerhalb des CSS-Tokensystems. Details in docs/DESIGN_SYSTEM.md, Abschnitt Known gaps.