Akkodorf UI Kit
🎨 Design System

Akkodorf UI Kit

Das offizielle Designsystem der Musikschule Akkodorf — Farben, Schriften, Komponenten und Abstände für alle Seiten.

Farben

Primärpalette basierend auf dem Akkodorf-Grün, ergänzt durch semantische Farben.

Primär — Grün
green-900 #1a4d1a Hover / Aktiv
green-700 #2d7a2d Primary
green-600 #3a9c3a Fokus-Ring
green-500 #4db84d Erfolg
green-200 #c8eac8 Hintergrund
green-100 #e8f5e8 Karten-BG
Semantisch
gray-900 #1a1a1a Überschriften
gray-700 #374151 Fließtext
gray-500 #6b7280 Hinweistext
Fehler #ef4444 Destructive
Warnung #f59e0b Amber
Info #3b82f6 Blau

Typografie

Playfair Display für Überschriften · DM Sans für Fließtext und UI-Elemente.

H1 — SeitentitelPlayfair Display 700 · 48px
Musikschule Akkodorf
H2 — AbschnittPlayfair Display 700 · 32px
Unsere Kurse
H3 — KartePlayfair Display 700 · 20px
Gitarrenunterricht für Anfänger
Body — FließtextDM Sans 400 · 16px
Wir bieten Unterricht für alle Altersgruppen und Spielstufen an. Vereinbare jetzt deine kostenlose Schnupperstunde und entdecke die Freude am Musizieren.
Small — UI-TextDM Sans 500 · 13px
Letztes Update: 15. März 2026 · 24 Quellen
Label — FormularDM Sans 600 · 13px
Vorname des Schülers

Schaltflächen

Varianten, Größen und Zustände für alle interaktiven Aktionen.

Varianten
Größen
Mit Symbolen

Badges & Status

Kleine Statusmarkierungen für Buchungen, Schüler und Ereignisse.

Aktiv Ausstehend Abgebrochen Neu Inaktiv Bezahlt Offen Überfällig Probe

Eingabefelder

Formulare für Anmeldungen, Buchungen und Kontaktdaten.

Bitte Vornamen eingeben
✓ Gültige Adresse
⚠ Bitte gültige Telefonnummer eingeben

Karten

Inhaltskarten für Kurse, Lehrer und Neuigkeiten.

🎸
Gitarrenunterricht
Für Anfänger bis Fortgeschrittene. Alle Stile von Klassik bis Rock.
🎹
Klavierstunden
Klassisches Klavierspiel, Notenlehre und Improvisation für jedes Alter.
🎤
Gesangsunterricht
Stimmbildung, Atemtechnik und Bühnenpräsenz für alle Genres.
Aktive Schüler
248
▲ +12 diesen Monat
Unterrichtsstunden / Woche
86
▲ +5 vs. Vormonat
Offene Anfragen
14
▼ 3 überfällig

Tabelle

Für Schülerlisten, Buchungsübersichten und Abrechnungen.

Schüler Instrument Lehrer Nächste Stunde Status
LM
Lena Maier
Klavier Frau Schmidt Mo, 16:00 Uhr Aktiv
TK
Tim Klein
Gitarre Herr Braun Di, 14:30 Uhr Ausstehend
SW
Sofia Weber
Gesang Frau Müller Do, 17:00 Uhr Neu
FA
Felix Amann
Schlagzeug Herr Koch Fr, 10:00 Uhr Abgebrochen

Benachrichtigungen

Systemhinweise, Erfolgsmeldungen, Warnungen und Fehler.

Buchung bestätigt!Ihre Schnupperstunde am Montag, 16:00 Uhr wurde erfolgreich gespeichert.
⚠️
Zahlung ausstehendDie Rechnung für März ist noch nicht beglichen. Bitte überweisen Sie bis zum 31.03.2026.
Fehler beim SpeichernDie Änderungen konnten nicht gespeichert werden. Bitte versuchen Sie es erneut.
ℹ️
HinweisDie Musikschule ist vom 24.12. bis 02.01. geschlossen. Frohe Weihnachten!

Abstände

Einheitliche Abstände für konsistentes Layout auf allen Seiten.

4px --space-1
Sehr klein
8px --space-2
Klein
12px --space-3
Eng
16px --space-4
Standard
24px --space-6
Mittel
32px --space-8
Groß
48px --space-12
Sehr groß
64px --space-16
Sektion

Eckenradius

Von scharf bis rund — konsistente Rundungen für alle Elemente.

0px --radius-none
Scharf
4px --radius-sm
Klein
8px --radius-md
Buttons
14px --radius-lg
Karten
22px --radius-xl
Modal
--radius-full
Badges

Schatten

Drei Ebenen für Tiefe und Hierarchie.

Subtil --shadow-sm
Standard --shadow-md
Hervorgehoben --shadow-lg

Avatare

Für Schüler- und Lehrerprofile ohne Foto.

LM
28px
TK
36px
SW
48px
FA
64px

CSS-Variablen (Tokens)

Alle Design-Tokens zum Kopieren in jedes neue Projekt.

--green-700#2d7a2d
--green-900#1a4d1a
--gray-900#1a1a1a
--gray-700#374151
--gray-500#6b7280
--gray-100#f3f4f6
--radius-md8px
--radius-lg14px
--shadow-sm0 1px 4px rgba(0,0,0,.08)
--shadow-md0 4px 16px rgba(0,0,0,.10)
--font-display'Playfair Display'
--font-body'DM Sans'