Tokens, Bausteine, Voice.
Die offene Referenz zum visuellen System von Struqo, von den Tokens bis zu ganzen Seiten. Jeder Wert kommt live aus dem Code, Figma folgt ihm. Agents lesen dieselben Bausteine in apps/web/components/styleguide/catalog.ts.
Molecules
Wenige Atoms mit einem gemeinsamen Zweck, etwa Beschriftung, Feld und Hinweis als Formularfeld.
Vier Konventionen, abgestuft nach Dringlichkeit. Fehler (rot) für blockierende Fehler oder Daten-Inkonsistenz. Warnung (gelb) für Aufmerksamkeit, die nicht blockiert. Hinweis (blau) für neutrale Information. Erfolg (grün) für Bestätigungen. Farbe trägt die Botschaft, der Container bleibt zurückhaltend.
Fehler
Warnung
Hinweis
Erfolg
Hinweis im Fluss in vier Tönen: Warnung, Alert, Hinweis, Erfolg.
Die Sachinformation führt über Position, nicht über Helligkeit. Label und Hinweis bleiben im selben ruhigen Ton. Laut sind die Aktivitäts-Signale und die verstrichene Zeit, die ab 6 Sekunden gelb und ab 12 Sekunden rot steht, in der Farbsprache des Speicher-Punkts im Header. 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.
Ladeanzeige: Text führt, Balken trägt, Figur erst im langen Fall.
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
Seitenkopf der App-Seiten mit Breadcrumb, Titel, Aktionen und Meta.
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.
Beschriftetes Eingabefeld mit Hilfe- und Fehlertext.
Reiterleiste aus Links für Seitenbereiche, die der Server über die Adresse tauscht.
Reiter anklicken, dann Pfeiltasten, Pos1 und Ende.
Reiter, die Panels im Browser umschalten, mit Pfeiltasten, Pos1 und Ende.
Rückfrage vor einer Aktion, die sich nicht zurücknehmen lässt. Nennt das Objekt und startet auf Abbrechen.
Ort, Modus, Wechsel und Anlage an einem Ort über der Zeichnung.
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.
Liste zum Wechseln zwischen Zeichnungen oder Projekten.
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
Fläche für ein Objekt mit Titel, Aktionen und Kurzinfo.
Menü am auslösenden Control mit Einträgen, auch destruktiv.
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.
Zeigt, ob eine abgeleitete Zeichnung frisch ist.
Ein Blatt des Beispiels als Weg in den Editor. Mit Kopfzeile steht es wie auf einer Tafel, das Bild sitzt 8 px unter ihrer Grundlinie. Ohne Kopfzeile steht es so auf den Unterseiten.
Abtönung: hell bleibt, was die Aussage trägt, das Ergebnis auf der Zeichenfläche und das markierte Bedienelement. Alles andere ist beim Aufnehmen abgedunkelt, 50 % im hellen und 60 % im dunklen Bild.
Bild des Editors auf den Marketing-Seiten, Rahmen mit Radius 8 und kräftiger Linie, Unterschrift in Mono, in Gegenlicht zum Seitengrund. Auf Wunsch mit Kopfzeile (Figur und Angabe) wie auf der Startseite. Ein Klick öffnet das Beispiel im Editor.
Eckdaten im Ton eines Plans. Jedes Feld belegt zwei Module des Registers, die Linien verschieben keine Grundlinie.
- Stand
- 2026-09-30
- Phase
- Beta
- Beispiel
- 12 Blätter
- Änderungen
- Journal
Schriftfeld für Marketing-Seiten: wenige Eckdaten als Begriff und Wert in Mono, vier Felder in einer Reihe, auf dem Handy zwei mal zwei.
Wählbare Kachel in Kontextmenüs.
Ohne Live-Demo auf dieser Seite.
Produktvideo auf einer Marketing-Seite, im selben Rahmen wie das Editor-Bild: Poster mit einem Startknopf, erst der Klick lädt das Video und zeigt die Bedienung des Browsers mit Untertiteln. Zählt `video.started` einmal je Seitenaufruf.
Ohne Live-Demo auf dieser Seite.
Aufklapper „Mehr" unter einem Abschnitt einer Unterseite: Fakten aus dem Produktstand, zugeklappt.
Ohne Live-Demo auf dieser Seite.
Seitenpfad über der H1 einer Unterseite: Startseite, bei Funktionsseiten „Funktionen“, dann die Seite selbst als Text.
Ohne Live-Demo auf dieser Seite.
Klappbarer Abschnitt im Eigenschaften-Panel.
Ohne Live-Demo auf dieser Seite.
Blatt in der Zeichnungen-Leiste mit Miniatur und Zustand.
Ohne Live-Demo auf dieser Seite.
Schwebende Rückmeldung, die Fläche trägt den Status.
Ohne Live-Demo auf dieser Seite.
Umschaltleiste wie 2D|3D.
Ohne Live-Demo auf dieser Seite.

