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.

05

Templates

Das Skelett einer Seite: welche Organisms wo sitzen, ohne Inhalt. Jede Fläche im Schema springt zu ihrem Baustein.

Editor

Editor: Kopfleiste oben, Werkzeuge und Blätter links, Canvas in der Mitte, Eigenschaften rechts, Fußleiste unten.

Templates · ReadyCode: components/editor/EditorShell.tsx

Besteht aus: TopBar, LeftRail, DrawingsRail, CanvasViewport, RightSidebar, StatusBar

App-Seite

App-Seiten außerhalb des Editors: Kopf und Inhalt.

Templates · ReadyCode: app/[locale]/(app)/(shell)/layout.tsx

Besteht aus: AppShellHeader

Marketing-Seite

Öffentliche Seiten: Navigation, Inhalt, Fuß.

Templates · ReadyCode: app/[locale]/(marketing)/layout.tsx

Besteht aus: MarketingNav, MarketingFooter

Anmelde-Seite
Logo
Formular

Anmelden und Registrieren: Logo über einem schmalen Formular.

Templates · ReadyCode: app/[locale]/(auth)/layout.tsx

Besteht aus: Logo

Planblatt: Zeichnung auf dem Blatt, Schriftfeld unten rechts.

Templates · ReadyCode: components/print/PrintPlanPage.tsx

Besteht aus: PrintTitleBlock

Designsystem · Struqo