SoStudy Admin — Design System

Validierung der Designsprache. Light, Dark und System umschalten und auf mobilen, tablet und desktop Viewports prüfen.

Farb-Tokens

Semantische Token aus der Designvorgabe. Beide Farbschemata werden hier validiert — wechseln Sie das Theme oben rechts.

background

--background

foreground

--foreground

foreground-secondary

--foreground-secondary

foreground-tertiary

--foreground-tertiary

card

--card

card-elevated

--card-elevated

border

--border

border-strong

--border-strong

primary

--primary

primary-hover

--primary-hover

success

--success

warning

--warning

destructive

--destructive

info

--info

Typografie

Poppins als einzige Schriftfamilie. Body 14px für Admin-Dichte.

Der schnelle braune Fuchs springt über den faulen Hund.

h1 · 24 / 500

Der schnelle braune Fuchs springt über den faulen Hund.

h2 · 20 / 500

Der schnelle braune Fuchs springt über den faulen Hund.

h3 · 18 / 500

Der schnelle braune Fuchs springt über den faulen Hund.

h4 · 16 / 500

Der schnelle braune Fuchs springt über den faulen Hund.

body · 14 / 400
Der schnelle braune Fuchs springt über den faulen Hund.caption · 12 / 400
aktive nutzer · letzte 30 tagemicro · 11 / 500 · uppercase

Buttons

Glas-Buttons gemäß Designvorgabe — kein Box-Shadow, Tiefe ausschließlich über Farbverlauf und Border.

Varianten · Größe md
Größen · Variante primär
Mit Icon
Zustände

Hover und Active werden direkt auf den Buttons oben sichtbar — bewegen Sie den Mauszeiger oder drücken Sie sie kurz.

Formularfelder

40px Höhe, abgerundete Glasflächen, Mikro-Label oberhalb. Inline-Fehler in Destruktiv-Farbe.

Bitte geben Sie einen gültigen Wert ein.

Karten

Glas-Oberflächen mit Verlauf und Border. Hover nur für interaktive Karten.

Aktive Nutzer
12.384+8,2 %

vs. Vormonat (de-DE Format)

Vertragsverlängerung

Drei Verträge laufen in den nächsten 14 Tagen aus. Bitte prüfen Sie die Konditionen.

Keine Daten

Es wurden noch keine Nutzer angelegt.

Status-Badges

Pillenform mit getöntem Hintergrund, Border und Textfarbe in derselben Farbfamilie.

AktivAusstehendGesperrtTestphaseArchiviert

Responsiveness

Aktueller Tailwind-Breakpoint zur Validierung der responsiven Umsetzung.

Aktueller Breakpoint:xs · < 640px

Verkleinern Sie das Browserfenster, um mobile, tablet und desktop Layouts zu testen. Mindestbreite 320px wird unterstützt.

Noch nicht implementiert

Diese Komponenten sind im Designsystem spezifiziert, aber noch nicht gebaut.

  • Data Table mit Cursor-PaginationGeplant
  • Sidebar-NavigationGeplant
  • Command Palette (Cmd+K)Geplant
  • Modal / DialogGeplant
  • Toast-BenachrichtigungenGeplant
  • Dropdown-MenüGeplant
  • TabsGeplant