Akkodorf UI Kit v1.2 — 2026
🎨 Design System  ·  v1.2 · 2026

Akkodorf UI Kit 2026

„Jeder Mensch ist musikalisch und hat das Recht, seine Musikalität zu entwickeln."

🎨 Farben: 5 Primär + 6 Akzent
✏️ Schrift: Tildasans + Lora
🧩 Komponenten: 14 Abschnitte
WCAG 2.1 AA konform
📱 Mobile First
1

Farben

Exakt aus Web Seite Farben.JPG — offizielle Markenfarben + lebendige Akzente vom Kinderfest-Banner.

Primärpalette — Grün (offizielle Farben)
Primärgrün#1e7030Hauptfarbe
Moosgrün#1b6b26Hover
Tiefgrün#154d1cAktiv
Hellgrün#e8f5ebHintergrund
Anthrazit#272727Texte
Hellgrau#f5f5f5Sektionen
Weiß#ffffffKarten/BG
Akzentpalette — Kinderfest-Banner (pädagogische Bereiche & Kinder)
Orange#f97316
Gelb#fbbf24
Pink#ec4899
Violett#8b5cf6
Blau#3b82f6
Türkis#14b8a6
2

Typografie

Tildasans (= Inter) für alle UI-Elemente · Lora Italic für Slogans, Zitate und emotionale Texte.

H1 — HeroInter 800 · 50px

font-weight:800
font-size:50px
Musik verbindet
H2 — AbschnittInter 800 · 32px
Unsere Kurse 2026
H3 — KarteInter 700 · 18px
Gitarrenunterricht für alle Altersgruppen
Body — FließtextInter 400 · 16px · 1.75
Wir glauben daran, dass jeder Mensch musikalisch ist. Deshalb bieten wir Unterricht für alle Altersgruppen — vom Kleinkind bis zum Senior, mit und ohne Behinderung.
Slogan — ZitatLora Italic 600 · 18px
„Jeder Mensch ist musikalisch und hat das Recht, seine Musikalität zu entwickeln."
Label · CaptionInter 700 · 11px · uppercase
Nächste Unterrichtsstunde · Montag 14:00
3

Schaltflächen

Grün für primäre Aktionen · Orange für starke CTAs (Anmeldung) · Inklusiv-Variante mit hohem Kontrast.

Varianten
Größen
Inklusiv & Sonderfälle
4

Badges & Live-Status

Status-Badges für Buchungen + animierte Live-Status-Indikatoren für Kursverfügbarkeit.

Standard-Badges
Aktiv Ausstehend In Bearbeitung Neue Anfrage Probemonat Info Storniert Inaktiv
Live-Kursstatus (animiert)
Kurs findet statt Ausgebucht 2 Plätze frei Bezahlt Offene Rechnung Neu ab 2026 EinsPlus15
5

Formulare & Multi-Step

Multi-Step-Formular mit Tabs (Schnupperstunde ↔ Vollständige Anmeldung) + Tilda-CRM-Integration.

Schritt 1 von 333%
✓ Gültige Adresse
⚠ Bitte gültige Nummer eingeben
6

Karten & Widgets

Standard-Karten, Stat-Karten, Trust/Versicherungs-Karte, Inklusions-Karte — alle aus MGA Planung abgeleitet.

Standard-Inhaltskarten
🎸
Gitarrenunterricht
Für Anfänger bis Fortgeschrittene. Klassik, Pop, Rock — alle Stile willkommen.
Verfügbar
🎹
Melodika · Piccolo
Das Piccolo-Programm für Grundschulkinder — Spaß am Musizieren von Anfang an.
3 Plätze frei
🎤
Gesangsunterricht
Stimmbildung und Bühnenpräsenz für alle Genres und Altersgruppen.
Ausgebucht
Statistik-Karten
Aktive Schüler
248
▲ +12 diesen Monat
Stunden / Woche
86
▲ +5 vs. Vormonat
Zweigstellen
9
▲ Metrum neu 2026
Duo-Unterricht EinsPlus15 — Spezial-Karte
🎓 Neu 2026
Duo-Unterricht EinsPlus15
Gemeinsam wachsen mit EinsPlus15. Jeder Schüler bringt 15 Minuten Zeit ein — daraus entsteht eine intensive Einheit von 30–40 Minuten. Voneinander lernen, Musik als soziales Erlebnis entdecken.
30–40Minuten Einheit
2Schüler je Gruppe
15+15Minuten Einsatz
Trust- und Versicherungskarten
🛡️
Versicherungsschutz für junge Musiker
In Kooperation mit der Subdirektion Andreas Ponert (Mannheimer Versicherung) bieten wir exklusiven Rundum-Schutz: weltweite Absicherung für Instrumente, Spezialtarife für Schüler und Orchester.
✓ Offizieller Partner
🏫
Soziale Integration — Bildungspartner
Kooperation mit dem Einstein-Gymnasium und lokalen Schulen. Teamgeist erleben und durch gemeinsames Musizieren neue Freunde finden. Tief integriert in die Bildungslandschaft der Region.
✓ Einstein-Gymnasium
Inklusions-Block — Barrierefreiheit (hoher Kontrast)
♿ Musik für alle Menschen
Wir bieten speziell angepasste Angebote für Menschen mit körperlichen und geistigen Einschränkungen. Unsere Lehrer sind ausgebildet, auf individuelle Bedürfnisse einzugehen.
Angepasste Unterrichtsmethoden
Barrierefreie Räumlichkeiten
Screenreader-kompatible Website
Hohe Kontrastverhältnisse
Ermäßigte Tarife auf Anfrage
Individuelle Förderpläne
7

Kursplan — Dynamisches Grid

Karten-Grid mit Live-Status-Indikator — ✅ Kurs findet statt / 🚫 Noch Plätze frei / ❌ Ausgebucht.

🎸
Findet statt
Gitarre · Montag
16:00–16:45 Uhr · Offenburg · Herr Braun
ab 42 €/Monat
🥁
2 Plätze frei
Schlagzeug · Dienstag
14:30–15:15 Uhr · Kehl · Herr Koch
ab 48 €/Monat
🎤
Ausgebucht
Gesang · Donnerstag
17:00–17:45 Uhr · Hausach · Frau Müller
Warteliste
8

Zitat & Maskottchen

Emotionaler Slogan-Block + Kroki das Krokodil als Markenmaskottchen für Kinder-Bereiche.

„Jeder Mensch ist musikalisch und hat das Recht, seine Musikalität zu entwickeln."
— Musikschule Akkodorf · Schwäbisch Hall
🐊

Kroki — das Akkodorf-Maskottchen

Kroki begleitet Schüler durch alle Kurse als handgezeichnete Illustration. Auf Karten, Bestätigungs-E-Mails, Zertifikaten und der „Danke"-Seite nach der Anmeldung. Er macht die Schule für Kinder zugänglich und schafft Wiedererkennung.

9

Tabelle

Für Schülerlisten, Buchungsübersichten, Unterrichtspläne und Zweigstellen-Übersicht.

SchülerKursZweigstelleNächste StundeStatus
LMLena MaierMelodika · PiccoloOffenburgMo, 14:00 UhrAktiv
TKTim KleinPosaune · AnfängerKehlDi, 16:30 UhrAusstehend
SWSofia WeberGesang · EinsPlus15HausachDo, 18:00 UhrNeue Anfrage
FAFelix AmannKlavier · MittelstufeWolfachFr, 10:00 UhrProbemonat
10

Systemmeldungen

Feedback für Buchungen, Zahlungen, Fehler, Ankündigungen — plus Kroki-Motivationsmeldung.

Buchung bestätigt!Ihre Schnupperstunde am Montag, 14:00 Uhr wurde gespeichert. Wir freuen uns auf Sie!
⚠️
Zahlung ausstehendDie Rechnung für März 2026 ist noch offen. Bitte überweisen Sie bis zum 31.03.2026.
Termin nicht verfügbarDieser Termin wurde bereits gebucht. Bitte wählen Sie eine andere Zeit oder melden Sie sich auf die Warteliste.
ℹ️
WeihnachtsferienDie Schule ist vom 23.12.2026 bis 06.01.2027 geschlossen. Frohe Feiertage!
🐊
Kroki gratuliert!Super! Du hast deine 10. Unterrichtsstunde abgeschlossen. Weiter so — du wirst immer besser!
11

Social Media

Die Schule ist aktiv auf Instagram, Facebook und YouTube — Social-Buttons für Navigation und Footer.

12

Abstände

4px-Raster — einheitliche Abstände für konsistentes Layout auf allen Seiten.

4px--sp1
8px--sp2
12px--sp3
16px--sp4
24px--sp6
32px--sp8
48px--sp12
64px--sp16
13

Eckenradius

Organische runde Formen — passend zum Logo-Stil und der warmen Schulatmosphäre.

0px--r-none
4px--r-xs
8px--r-sm · Inputs
12px--r-md · Buttons
20px--r-lg · Karten
28px--r-xl · Hero
--r-full · Pills
14

CSS-Tokens & Master-Prompt

Alle Design-Tokens als CSS-Variablen + fertiger Master-Prompt für Claude-Aufgaben.

--g700 (Primär)#1e7030
--g600 (Hover)#1b6b26
--n900 (Text)#272727
--n100 (Sektion)#f5f5f5
--orange (CTA)#f97316
--yellow (Akzent)#fbbf24
--ff-uiInter / Tildasans
--ff-serifLora Italic
--r-sm (Inputs)8px
--r-md (Buttons)12px
--r-lg (Karten)20px
--sh-md0 4px 16px rgba(30,112,48,.13)
📋 Master-Prompt für Claude — einfach kopieren!
Akkodorf UI Kit v1.2 · 2026

Primärfarbe: #1e7030 · Hover: #1b6b26 · Aktiv: #154d1c
CTA-Farbe: #f97316 (Orange für Anmeldung/Conversion)
Akzente: Gelb #fbbf24, Pink #ec4899, Violett #8b5cf6
Texte: Anthrazit #272727 · Sektion-BG: #f5f5f5

Schrift: Tildasans (=Inter) für UI · Lora Italic für Slogans
Radien: 8px Inputs · 12px Buttons · 20px Karten · 28px Hero
Schatten: 0 4px 16px rgba(30,112,48,.13)

Stil: warm + modern + inklusiv
Zielgruppen: Kinder (verspielt) · Eltern (seriös, mobil) · Erwachsene (professionell)
Maskottchen: Kroki 🐊 für Kinder-Bereiche
Slogan: „Jeder Mensch ist musikalisch…"
WCAG 2.1 AA · Mobile First · Tilda CRM-Integration
Musikschule Akkodorf · akkodorf.de
Quellen: Flyer & Bilder + MGA Planung (NotebookLM)
Tilda Block T123 v1.2