SoStudy Admin — Design System
Validierung der Designsprache. Light, Dark und System umschalten und auf mobilen, tablet und desktop Viewports prüfen.
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 / 500Der schnelle braune Fuchs springt über den faulen Hund.
h2 · 20 / 500Der schnelle braune Fuchs springt über den faulen Hund.
h3 · 18 / 500Der schnelle braune Fuchs springt über den faulen Hund.
h4 · 16 / 500Der schnelle braune Fuchs springt über den faulen Hund.
body · 14 / 400Formularfelder
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.
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.
Responsiveness
Aktueller Tailwind-Breakpoint zur Validierung der responsiven Umsetzung.
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