Styleguide
Live-Übersicht aller Komponenten, Modifier und Token-Defaults des studio7a-base Design-Systems. Diese Seite ist die Bot-Referenz beim Anpassen an Kunden-Designs.
Typography
Heading 1 — display
Heading 2 — section
Heading 3 — subsection
Heading 4
Heading 5
Heading 6 (uppercase, muted)
Body text. Strong, emphasis, inline code, link, highlighted. Press Ctrl+S to save.
Lead paragraph — etwas größer als body, gerne als Intro vor einem Text-Block.
Small text, fine print.
This is a blockquote. It is set off with a left border, italic styling, and a brand-coloured rule.Inhaltskonvention
Buttons
Form
Cards
Category
Default Card
Beschreibungstext, kurz und knackig.
Highlight
Featured Card
Hervorgehoben durch dickeren Schatten und Brand-Border.
Person Card
Rolle / Position
Hero & Section-Header
Sektionstitel
Lead-Text als kurze Beschreibung der Sektion.
New release
Hero — brand variant, centered
Token-getriebene Komponente. Background, Title, Lead, Actions — alle einzeln tweakbar.
Marketing-Bausteine
120+Kunden
15JErfahrung
98%Zufrieden
24/7Support
Diese Plattform hat unseren Workflow grundlegend verändert. Endlich ein System, das mit uns wächst statt uns auszubremsen.
Sarah MüllerHead of Product, Acme Corp
UI-Status
Badges
DefaultBrandAccentSuccessWarningDangerInfoSolidOutlineSquare
Alerts
Information
Ein neutraler Hinweis-Block.
Erfolg
Aktion wurde erfolgreich ausgeführt.
Warnung
Achtung, prüfe deine Eingabe.
Fehler
Etwas ist schiefgelaufen.
Pagination
Tooltip
Hover hier: Element mit Tooltip.
Layout-Primitives
Grid
1
2
3
Stack (gap-md)
Item A
Item B
Item C