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.
Atoms
Bausteine, die sich nicht weiter zerlegen lassen, ohne ihren Zweck zu verlieren. Ohne Bezug zu Holzbau oder Editor-Zustand.
Textknopf in vier Rängen: Hauptaktion (primary), Nebenweg (secondary), leise Aktion (ghost), unwiderruflich (destructive).
Knopf nur mit Icon, mit Pflicht-Beschriftung und Tooltip.
Besteht aus: Icon-Set
Kurzer Hinweis beim Überfahren, über .tooltip-wrap.
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.
Wort-Bild-Marke für Marketing, App und Editor.
Initialen des Kontos im Konto-Menü.
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.
Balken für Wartezeiten ohne bekannte Dauer.
Link der Marketing-Navigation, mit Coming-Soon-Zustand statt totem Link.
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.
Punkt oben im Editor: gespeichert, speichert, offline, Fehler.
Schalter System, Hell, Dunkel.
Ohne Live-Demo auf dieser Seite.
Einziger zugelassener Mono-Label-Stil, 12 px, Versalien.
Ohne Live-Demo auf dieser Seite.
Farbpunkt in Auswahlen wie der Stift-Farbwahl.
Ohne Live-Demo auf dieser Seite.
Auswahlfeld im Struqo-Stil.
Ohne Live-Demo auf dieser Seite.