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.
Foundations
Die Tokens aus globals.css und das Icon-Set. Sie stehen vor den fünf Stufen: Brad Frost zählt Farben, Schriften und Icons zu den Atomen, hier stehen sie getrennt, weil sie kein Baustein sind.
Semantische Farben für Flächen, Text, Ränder, Status und Auswahl, in Hell und Dunkel.
Ein Blau für alles, was gewählt ist. Das Bauteil in der Zeichnung, seine Zeile im Panel, der aktive Eintrag im Picker, die offene Zeichnung in der Leiste und der Fokus-Ring lesen denselben Token. Nur die Kante trägt Farbe, die Fläche bleibt neutral.
Ebenen-Panel und Materialliste spiegeln die Auswahl aus der Zeichnung. Die linke Kante trägt das Blau, die Fläche bleibt der gewöhnliche Hover-Ton.
- Konterlatte 6443.9 cm
- Bekleidung West452.0 cm
- Schalung Dach618.0 cm
Picker, Zeichnungs-Leiste und die Liste im Fokus-Modus markieren mit demselben Balken. Die Fläche bleibt die neutrale Karte, damit die Liste ruhig bleibt.
- Ansicht West
- Plan 1
- Schnitt B-B
Der Fokus-Ring liest dieselbe Farbe. Tastatur und Auswahl sprechen damit eine Sprache, und kein zweites Blau steht daneben.
Wer eine neue Fläche baut, die eine Auswahl zeigt, nimmt --color-selection (als Klasse border-selection oder bg-selection) oder SELECTION_ECHO_EDGE aus lib/editor/selection-echo.ts. Der Wert steht einmal in globals.css, damit nicht wieder drei Muster für dieselbe Aussage entstehen. Die gefüllte Fläche der An-Zustände (2D|3D, Icon-Toggles) ist keine Auswahl und bleibt neutral invertiert.
Eine Auswahlfarbe in Zeichnung, Panels und Listen.
Drei Familien, jede mit einem Auftrag: Inter für die Arbeit im Editor, Manrope für das, womit Struqo nach außen spricht, IBM Plex Mono für alles, was man abliest. Die letzte Zeile jeder Karte zeigt, welche Schrift der Browser für die Probe tatsächlich nimmt.
- Wann
- Alles, was man im Editor liest oder bedient: Panels, Menüs, Dialoge, Buttons, Zeichnungstitel, freier Text auf dem Blatt.
- Wo
- Editor, Projektliste, Anmeldung und Registrierung.
- Wann
- Alles, womit Struqo nach außen spricht: Überschriften, Fließtext, Navigation und Buttons.
- Wo
- Jede Seite mit Marketing-Kopf und -Fuß: Startseite, Unterseiten, Journal, Hilfe, Konto, Styleguide. Nie im Editor.
- Wann
- Alles, was man abliest: Maßzahlen mit Einheit (immer tabular-nums), Bemaßung, Achsen, Lineale, Maßstabsbalken, Eyebrows, Bildunterschriften, Token-Namen.
- Wo
- Überall, in Editor und Kommunikation gleich.
Ein Block, eine Schrift. Ein Mono-Label und ein Text in Inter oder Manrope werden zwei Blöcke, sonst passt die Grundlinie nicht (§ Register).
Jede Stufe trägt ihre Zeilenhöhe, ein Vielfaches von 4 px. Die zarten Linien liegen alle 4 px, die kräftigen am Ende jeder Textzeile, also immer auf einer zarten. Rechts stehen Größe und Zeilenhöhe, im Browser gemessen. Die Zeilen liegen damit auf dem Raster, die Grundlinien noch nicht: die Schrift sitzt mittig im Zeilenkasten.
Sparren, Pfetten und Latten
stehen im selben Takt.
Sparren, Pfetten und Latten
stehen im selben Takt.
Sparren, Pfetten und Latten
stehen im selben Takt.
Sparren, Pfetten und Latten
stehen im selben Takt.
Sparren, Pfetten und Latten
stehen im selben Takt.
Sparren, Pfetten und Latten
stehen im selben Takt.
Sparren, Pfetten und Latten
stehen im selben Takt.
Sparren, Pfetten und Latten
stehen im selben Takt.
Sparren, Pfetten und Latten
stehen im selben Takt.
Mit baseline-grid steht die erste Grundlinie auf einer 4-px-Linie der eigenen Box, jede weitere eine Zeilenhöhe tiefer. Die Box bleibt so hoch wie ohne die Klasse, nur die Schrift rückt um höchstens 2 px. Die kräftigen Linien liegen auf den Grundlinien, die zarten alle 4 px. Rechts Grundlinie und Zeilenhöhe, im Browser gemessen.
Sparren, Pfetten und Latten
stehen im selben Takt.
Sparren, Pfetten und Latten
stehen im selben Takt.
Sparren, Pfetten und Latten
stehen im selben Takt.
Sparren, Pfetten und Latten
stehen im selben Takt.
Sparren, Pfetten und Latten
stehen im selben Takt.
Sparren, Pfetten und Latten
stehen im selben Takt.
Sparren, Pfetten und Latten
stehen im selben Takt.
Sparren, Pfetten und Latten
stehen im selben Takt.
Sparren, Pfetten und Latten
stehen im selben Takt.
Dieselbe Karte zweimal, das Raster beginnt an ihrer Außenkante. Links trägt sie einen Rahmen mit border, der den Inhalt um 1 px nach unten schiebt. Rechts liegt der Rahmen als inset-ring innen und verschiebt nichts.
Stückliste
Carport Süd
Zwölf Sparren 8/16, KVH Fichte, alle auf Linie.
12 Stk. · 3,20 m
Stückliste
Carport Süd
Zwölf Sparren 8/16, KVH Fichte, alle auf Linie.
12 Stk. · 3,20 m
Auf Marketing- und Journal-Seiten steht jede Grundlinie auf einem Raster von 24 px, über alle Spalten hinweg. Fließtext trägt eine Zeile von 24 px. Überschriften behalten ihre Zeilenhöhe und belegen ganze Module. Ein Bild beginnt auf der Versalhöhe der ersten Zeile daneben und endet auf einer Grundlinie. Die Linien liegen unter den Grundlinien.
Beispiel
Erst zeichnen, dann sägen.
Holz verzeiht viel, nur keine falschen Längen. Ein Plan, den Du selbst gezeichnet hast, macht aus dem Vorhaben eine Reihenfolge.
Zwölf Sparren 8/16, KVH Fichte. Diese Spalte ist kleiner gesetzt und steht auf denselben Linien.
Schriftgrößen, Zeilenhöhen und Laufweiten als Tokens, Inter für den Editor, Manrope für die Kommunikation, IBM Plex Mono für Maße.
Abstände im 8-px-Raster.
Eckenradien, 4 px als Standard.
Drei Schattenstufen für schwebende Flächen.
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.
Strichstärken nach DIN EN ISO 128-20 für Zeichnung und Druck.
Dauern und Kurve für Übergänge.
Maximale Inhaltsbreite.
Ebenen für Sticky, Menüs, Dialoge und Tooltips.
85 Icons auf einem 16er Raster mit 1,25 px Strich, die Chevrons für Eingabefelder auf 10 px. Sie übernehmen die Textfarbe ihrer Umgebung und lesen sich deshalb in beiden Themes gleich. Gruppiert nach dem Ort, an dem sie sitzen.
- ExportIcon
- FocusIcon
- GridIcon
- HatchIcon
- HelpIcon
- KeyboardIcon
- MenuIcon
- PrintIcon
- ProjectsIcon
- RedoIcon
- RulerIcon
- SettingsIcon
- SnapIcon
- ThemeDarkIcon
- ThemeLightIcon
- ThemeSystemIcon
- UndoIcon
- ZoomFitIcon
- ZoomInIcon
- ZoomOutIcon
- AutoDimensionIcon
- BeamIcon
- CircleIcon
- CutIcon
- DetailMarkerIcon
- DimensionIcon
- MassiveWallIcon
- MeasureIcon
- NorthArrowIcon
- PanIcon
- PenIcon
- PolygonIcon
- ScaleBarIcon
- SectionLineIcon
- SelectIcon
- SketchRectIcon
- TextIcon
- TriangleIcon
- WallIcon
- AlignBottomIcon
- AlignCenterXIcon
- AlignCenterYIcon
- AlignLeftIcon
- AlignRightIcon
- AlignTopIcon
- CheckIcon
- ChevronDownIcon
- ChevronLeftIcon
- ChevronRightIcon
- CloseIcon
- CubeIcon
- DeleteIcon
- DistributeHorizontalIcon
- DistributeVerticalIcon
- DownloadIcon
- DuplicateIcon
- FullscreenIcon
- HiddenIcon
- LockedIcon
- MoreHorizontalIcon
- PlusIcon
- RotateIcon
- ShadowIcon
- SurroundingsIcon
- SyncIcon
- UnlockedIcon
- VisibleIcon
- BeamComponentIcon
- BoardIcon
- CladdingIcon
- JoistIcon
- PanelIcon
- PostIcon
- RafterIcon
- RoofingIcon
- ShrubIcon
- StudIcon
- TreeIcon
- WallFrameIcon
- DetailGlyphIcon
- ElevationGlyphIcon
- IsoGlyphIcon
- MemberGlyphIcon
- PlanGlyphIcon
- SectionGlyphIcon
Jedes Icon sitzt in IconBase, dem einzigen zugelassenen SVG-Rahmen. Bedienbar wird es im IconButton, der Beschriftung und Tooltip mitbringt.
Alle Icons von Editor und App, 16er Raster, 1,25 px Strich, Farbe aus der Umgebung.