Am Schlegelsberg 10, Vellberg
Einkornstraße 17, Schwäbisch Hall

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.

Vorname * Bitte Vornamen eingeben

Nachname *

E-Mail-Adresse ✓ Gültige Adresse

Telefonnummer ⚠ Bitte gültige Telefonnummer eingeben

Nachricht

Karten

Inhaltskarten für Kurse, Lehrer und Neuigkeiten.

🎸

Gitarrenunterricht

Für Anfänger bis Fortgeschrittene. Alle Stile von Klassik bis Rock.

Verfügbar

🎹

Klavierstunden

Klassisches Klavierspiel, Notenlehre und Improvisation für jedes Alter.

2 Plätze frei

🎤

Gesangsunterricht

Stimmbildung, Atemtechnik und Bühnenpräsenz für alle Genres.

Ausgebucht

Aktive Schüler

248

▲ +12 diesen Monat

Unterrichtsstunden / Woche

▲ +5 vs. Vormonat

Offene Anfragen

▼ 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.

28px

36px

48px

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'