struqo
DEEN
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-error-subtle
bg-error-subtle
--color-info
text-info
--color-info-subtle
bg-info-subtle
--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
Hinweise und Status

Vier Konventionen, abgestuft nach Dringlichkeit. Warnung (rot) für blockierende Fehler oder Daten-Inkonsistenz. Alert (orange) für nicht-blockierende Aufmerksamkeit. Hinweis (blau) für neutrale Information. Erfolg (grün) für Bestätigungen. Farbe trägt die Botschaft, der Container bleibt zurückhaltend.

Warnung

Zeichnung weicht vom Querschnitt ab. Breite 120 → 100 mm.
Blockierender Fehler, Daten-Inkonsistenz, Haftungsausschluss
<Notice tone="warning">

Alert

E-Mail-Adresse noch nicht bestätigt. Save-Mails sind pausiert.
Aufmerksamkeit nötig, nicht blockierend
<Notice tone="alert">

Hinweis

Maße werden in mm gespeichert. Anzeige folgt der gewählten Einheit.
Neutrale Information, Tipp, Tooltip
<Notice tone="info">

Erfolg

Projekt gespeichert.
Bestätigung nach Aktion
<Notice tone="success">
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
Card

Container für Listen-Items in drei Varianten: statisch für passive Info, interaktiv mit Hover-Zustand, und mit Aktions-Menu für sekundäre Operationen. Der Card-Body bleibt immer das primäre Click-Target. Sekundäre Aktionen leben im ⋯-Menu rechts oben, niemals als parallele Buttons.

Beispiel-Eintrag

Sekundäre Info, neutral gehalten

Statisch
<Card>
Beispiel-Eintrag

Sekundäre Info, neutral gehalten

Interaktiv
<Card interactive>
Beispiel-Eintrag

Sekundäre Info, neutral gehalten

Mit Aktions-Menu
<Card interactive> + <DropdownMenu>
PageHeader

Seitentitel mit Slots für Titel, Aktionen, Breadcrumb und Meta-Zeile, optional mit Divider. Sitzt innerhalb der Seite und ist nicht die App-Shell-Chrome (die kommt als eigenes Organism).

Projekte

<PageHeader title={…} />

Projekte

… actions={…}
Konto

Projekte

Melde Dich an, um fortzufahren.
… breadcrumb meta divider={false}
FormField

Label, Helper-Text, Fehlermeldung und a11y-Verdrahtung um ein beliebiges Control. Der Fehler-Zustand setzt aria-invalid und färbt den Rahmen. Control-agnostisch: Input, Select oder Textarea.

Wir teilen sie mit niemandem.

helper

Pflichtfeld.

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

Baum-Behandlungen.

Drei Antworten auf „Was hätte Dieter Rams gemacht?" für den Holz-Baustein. Gleiche Geometrie, drei Dialekte. Verwendet auf der Landing („Warum Holz") und der Haltungsseite.

Konstruktion

Baum als Holzzeichnung: schraffierter Pfosten-Stamm, Mono-Bemaßung, facettierte Krone.

Strich

Reines Liniendialekt, dieselbe Sprache wie die ValueProps-Diagramme.

Aicher

Flächiges Piktogramm in gedämpftem Grün, am weichsten und organischsten.

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.

Designsystem · Struqo