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.
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
Alert
Hinweis
Erfolg
Die Sachinformation führt über Position, nicht über Helligkeit. Aller Text bleibt im selben ruhigen Ton; laut sind nur die Aktivitäts-Signale. Darunter läuft ein indeterminierter Balken im Arbeits-Takt (1,6s, linear): ein Determinacy-Zeichen, das keine Prozentzahl behauptet, die niemand hat. Die Anzeige steht ab der ersten Millisekunde, blendet am Ende über 180ms aus und erfindet damit keine Wartezeit. Erst ab 6 Sekunden kommen der Sekundenzähler und der sägende Struqo-Meister dazu, dort wo Ablenkung hilft statt zu bremsen. Unter prefers-reduced-motion steht der Streifen still, der Text bleibt.
Der Balken einzeln, für Wartezeiten außerhalb der Ladeanzeige. Bewusst ohne value-Prop: solange kein Ladepfad einen echten Fortschritt misst, wäre ein sich füllender Balken eine Behauptung ohne Grundlage. Für Screenreader stumm, die umgebende Live-Region trägt die Aussage.
Linienbreiten der Zeichnung nach DIN EN ISO 128-20, Liniengruppe 1. Die Norm-Reihe schreitet mit Faktor Wurzel 2; eine Liniengruppe wählt daraus ein Paar breit zu schmal im Verhältnis 2:1. Was die Schnittebene trifft, bekommt die breite Volllinie, was dahinter liegt die schmale.
Die Proben zeichnen 1:1, so wie der Canvas bei Zoom 1 zeichnet. Auf der Stage skaliert die Strichstärke mit dem Zoom mit.
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.
Sekundäre Info, neutral gehalten
Sekundäre Info, neutral gehalten
Sekundäre Info, neutral gehalten
Das Brandmark-Lockup aus Quadrat plus Mono-Wortmarke. Reine Präsentationskomponente, in einen Link wickeln wo es navigieren soll. Erbt die Textfarbe vom Eltern-Element, damit ein Hover-Zustand des Links durchschlägt.
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
Projekte
Projekte
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.
Pflichtfeld.
Eine Auswahl-Liste für fünf Instanzen: Projekt, Blatt, Typwahl, Snap-Weite, Einheit. Der geltende Eintrag ist markiert und bleibt wählbar; deaktiviert ist nur, was es real nicht gibt. Klick auf den Knopf öffnet sie, Esc schließt sie und gibt den Fokus zurück.
Gesichert ist der Ruhezustand und bleibt stehen, das Speichern pulst. Offline und Speicher-Fehler sind zwei Lagen: amber heißt, es läuft von allein weiter, rot heißt, hier ist etwas zu tun. Der Titel daneben behält in jedem Zustand seine Farbe.
Die Zeichnungen-Rail zeigt je Ansicht, ob die Projektion noch zu ihrem Quell-Plan passt. Das ist kein Speicher-Status: die Anzeige weiß nichts von Netz oder Server, sie vergleicht nur Ableitung gegen Quelle. Geschlossener Ring heißt vollständig, offener Bogen heißt es fehlt etwas. Ein Klick zieht nach.
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.
Baum als Holzzeichnung: schraffierter Pfosten-Stamm, Mono-Bemaßung, facettierte Krone.
Reines Liniendialekt, dieselbe Sprache wie die ValueProps-Diagramme.
Flächiges Piktogramm in gedämpftem Grün, am weichsten und organischsten.
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.
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.