Designsystem

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.

03

Molecules

Wenige Atoms mit einem gemeinsamen Zweck, etwa Beschriftung, Feld und Hinweis als Formularfeld.

Hinweise und Status

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

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

Warnung

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

Hinweis

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

Erfolg

Projekt gespeichert.
Bestätigung nach Aktion
<Notice tone="success">

Hinweis im Fluss in vier Tönen: Warnung, Alert, Hinweis, Erfolg.

Molecules · ReadyCode: components/ui/Notice.tsx
Ladeanzeige

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.

Projekt „Carport Winni“ wird geladen …
Füllt die Wartefläche (Canvas, Viewport)
<LoadingIndicator variant="overlay">
Projekt „Carport Winni“ wird geladen …
Das dauert länger als üblich.
Langer Fall: Zeit in Gelb und Figur kommen dazu
<LoadingIndicator figure hint={…}>
Projekt „Carport Winni“ wird geladen …
Prüfe bitte Deine Internetverbindung.
Aus der Feststellung wird eine Handlung, die Zeit steht rot
<LoadingIndicator figure hint={…}>
Laden …
Kompakt in Zeilen und Panels
<LoadingIndicator variant="inline">

Ladeanzeige: Text führt, Balken trägt, Figur erst im langen Fall.

Molecules · ReadyCode: components/ui/LoadingIndicator.tsx

Seitenkopf der App-Seiten mit Breadcrumb, Titel, Aktionen und Meta.

Molecules · ReadyCode: components/ui/PageHeader.tsx
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
error · aria-invalid
required
control-agnostic (select)

Beschriftetes Eingabefeld mit Hilfe- und Fehlertext.

Molecules · ReadyCode: components/ui/FormField.tsx
TabNav
<TabNav items activeId ariaLabel testIdPrefix />

Reiterleiste aus Links für Seitenbereiche, die der Server über die Adresse tauscht.

Molecules · ReadyCode: components/ui/TabNav.tsx
Tabs
Maße, Material und Lage des gewählten Bauteils.

Reiter anklicken, dann Pfeiltasten, Pos1 und Ende.

<Tabs items value onChange ariaLabel idBase testIdPrefix /> + <TabPanel idBase id />

Reiter, die Panels im Browser umschalten, mit Pfeiltasten, Pos1 und Ende.

Molecules · ReadyCode: components/ui/Tabs.tsx
ConfirmDialog
<ConfirmDialog title body confirmLabel cancelLabel onConfirm onCancel />

Rückfrage vor einer Aktion, die sich nicht zurücknehmen lässt. Nennt das Objekt und startet auf Abbrechen.

Molecules · ReadyCode: components/ui/ConfirmDialog.tsx

Ort, Modus, Wechsel und Anlage an einem Ort über der Zeichnung.

Molecules · ReadyCode: components/editor/Breadcrumb.tsx
Picker

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.

<Picker side="bottom" sections={…} />

Liste zum Wechseln zwischen Zeichnungen oder Projekten.

Molecules · ReadyCode: components/editor/Picker.tsx
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>

Fläche für ein Objekt mit Titel, Aktionen und Kurzinfo.

Molecules · ReadyCode: components/ui/Card.tsx

Menü am auslösenden Control mit Einträgen, auch destruktiv.

Molecules · ReadyCode: components/ui/DropdownMenu.tsx
Frische abgeleiteter Ansichten

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.

Aktuell
Veraltet, aktualisieren

Zeigt, ob eine abgeleitete Zeichnung frisch ist.

Molecules · ReadyCode: components/editor/SyncStatusButton.tsx
Bild (Marketing)

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.

Fig. 2 · GrundrissKVH 120 × 120
Struqo-Editor, Grundriss des Beispiel-Carports mit gewähltem Pfosten, im Panel der Querschnitt KVH 120×120Struqo-Editor, Grundriss des Beispiel-Carports mit gewähltem Pfosten, im Panel der Querschnitt KVH 120×120
Grundriss mit gewähltem Pfosten. Rechts im Panel der Querschnitt, am Rand die Schnitthöhe.
Mit Kopfzeile, 16:9 · Startseite
Struqo-Editor, Grundriss des Beispiel-Carports mit gewähltem Pfosten, im Panel der Querschnitt KVH 120×120Struqo-Editor, Grundriss des Beispiel-Carports mit gewähltem Pfosten, im Panel der Querschnitt KVH 120×120
Grundriss mit gewähltem Pfosten. Rechts im Panel der Querschnitt, am Rand die Schnitthöhe.
Ohne Kopfzeile, 16:10 · 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.

Molecules · ReadyCode: components/marketing/LandingFigure.tsx
Schriftfeld (Marketing)

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
Beispielwerte. Auf der Startseite kommen Stand, Blattzahl und Phase aus dem Code.

Schriftfeld für Marketing-Seiten: wenige Eckdaten als Begriff und Wert in Mono, vier Felder in einer Reihe, auf dem Handy zwei mal zwei.

Molecules · ReadyCode: components/marketing/TitleBlock.tsx
Selectable-Tile

Wählbare Kachel in Kontextmenüs.

Molecules · DraftCode: components/canvas/PenStrokeContextMenu.tsx

Ohne Live-Demo auf dieser Seite.

ProductVideo

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.

Molecules · ReadyCode: components/marketing/ProductVideo.tsx

Ohne Live-Demo auf dieser Seite.

MoreDetails

Aufklapper „Mehr" unter einem Abschnitt einer Unterseite: Fakten aus dem Produktstand, zugeklappt.

Molecules · ReadyCode: components/marketing/MoreDetails.tsx

Ohne Live-Demo auf dieser Seite.

Seitenpfad (PageTrail)

Seitenpfad über der H1 einer Unterseite: Startseite, bei Funktionsseiten „Funktionen“, dann die Seite selbst als Text.

Molecules · ReadyCode: components/marketing/PageTrail.tsx

Ohne Live-Demo auf dieser Seite.

PanelSection

Klappbarer Abschnitt im Eigenschaften-Panel.

Molecules · ReadyCode: components/ui/PanelSection.tsx

Ohne Live-Demo auf dieser Seite.

Blatt (DrawingsRailCard)

Blatt in der Zeichnungen-Leiste mit Miniatur und Zustand.

Molecules · ReadyCode: components/editor/DrawingsRailCard.tsx

Ohne Live-Demo auf dieser Seite.

Kontextmenü (Canvas)

Kontextmenü auf der Zeichnung mit Kacheln für Werkzeug-Einstellungen.

Molecules · ReadyCode: components/canvas/PenStrokeContextMenu.tsx

Ohne Live-Demo auf dieser Seite.

Toast

Schwebende Rückmeldung, die Fläche trägt den Status.

Molecules · DraftCode: components/editor/AutoSaveErrorToast.tsx

Ohne Live-Demo auf dieser Seite.

Segment-Control

Umschaltleiste wie 2D|3D.

Molecules · DraftCode: components/editor/Breadcrumb.tsx

Ohne Live-Demo auf dieser Seite.

Designsystem · Struqo