Styleguide

Arbeitsstand, kein Endzustand: Diese Tokens entwickeln die CI 2018/19 weiter (TT Norms bleibt, Mint bleibt Markenakzent, Text-/Interaktionsfarben sind barrierefrei abgeleitet). Die Grundsatz-Entscheidung „CI weiterentwickeln vs. Neudesign" trifft Marco an diesem Prototyp.

Marken-Palette (Original-CI 2018)

Mint #60BFA4 Kontrast auf Weiß: 2,2:1 Nur Flächen/Deko/Logo — nie Text auf Weiß
Mint hell #77D9BD Kontrast auf Weiß: 1,7:1 Flächen, Verläufe
Rosé #F0E9E9 Kontrast auf Weiß: — Hintergrund-Fläche
Grau-Grün #E6EBE9 Kontrast auf Weiß: — Hintergrund-Fläche
Beere #B92F48 Kontrast auf Weiß: 5,9:1 ✓ AA Warnungen, sparsame Akzente
Tinte #0B131A Kontrast auf Weiß: ≈18:1 ✓ Primärtext

Refresh 2026: barrierefreie Ableitungen

Mint fällt mit 2,2:1 für Text durch (WCAG-AA braucht 4,5:1). Diese Töne übernehmen Text und Interaktion, ohne die Farbwelt zu verlassen:

Teal 600 #3D8F7A Kontrast auf Weiß: 3,9:1 ✓ AA groß Große Headlines, Icons, Fokus-Ring
Teal 700 #2E6E5E Kontrast auf Weiß: 6,0:1 ✓ AA Links, Buttons, Text-Akzent
Teal 800 #24574A Kontrast auf Weiß: 8,3:1 ✓ AA Hover/Active
Grau 700 #4A5A55 Kontrast auf Weiß: 7,3:1 ✓ AA Gedämpfter Text

Typografie — TT Norms

Vollständig lizenziert (Web + Desktop), als woff2 eingebunden. Schnitte: Regular 400, Italic, Medium 500, Bold 700.

Hero · 48px Bold — Gardinen, Plissees & Sonnenschutz

H1 · 38px Bold — Gardinen, Plissees & Sonnenschutz

H2 · 30px Bold — Gardinen, Plissees & Sonnenschutz

H3 · 24px Bold — Gardinen, Plissees & Sonnenschutz

H4 · 20px Medium — Gardinen, Plissees & Sonnenschutz

Fließtext · 16px Regular — Gardinen, Plissees & Sonnenschutz

Meta · 14px Regular — Gardinen, Plissees & Sonnenschutz

Motive — eigenständig statt generisch

Drei wiederkehrende Gestaltungs-Motive aus dem Handwerk, überall wiederverwendbar. Sie machen den Unterschied zwischen „Template" und „Raumausstatter-Portal".

1 · Gardinenstangen-Linie

Horizontaler Trenner mit Endkappen wie eine Vorhangstange — ersetzt generische <hr>/Border-Trenner zwischen Hauptsektionen. Komponente Stangenlinie.astro, ohne Props, volle Breite.

2 · Faltenwurf-Band

Weiche vertikale Streifen wie Stofffalten, ausschließlich aus der Mint-Familie. Globale Utility .faltenband für Hero- und Sektionsflächen — subtil, kein Tapeten-Effekt. Text darauf ist immer Tinte.

So liegt Text auf dem Stoff

Faltenwurf als Fläche — der Hintergrund arbeitet, ohne zu stören.

3 · Eyebrow-Label

Kleine Überzeile über Headlines: globale Utility .eyebrow — 14 px, Versalien, gesperrt, Teal 700 (auf dem Faltenband automatisch Teal 800).

Branchenportal des Handwerks

So sitzt die Überzeile über der Headline

Qualifikations-Badges (Platzhalter)

Hierarchie sichtbar, Held ist der Meister. Wording und Gestaltung der dritten Stufe sind offen — Bericht 26 liefert Benennungs-Varianten, entschieden wird hier am sichtbaren Design.

Raumausstatter-Meister Raumausstatter Stufe 3 (Wording offen)

Reale Betriebe ohne belegte Qualifikation bekommen keine Einstufung (Ehrlichkeits-Leitplanke): eine neutrale Status-Pill, dazu — falls aus dem ZVR-Datenbestand belegt — der rein faktische Innungs-Marker:

Einstufung folgt Innungsbetrieb (ZVR)

Flächen & Karten

Karte auf Weiß (shadow-card)
Fläche Grau-Grün
Fläche Rosé
Mint als Deko-Fläche
Text darauf: Tinte oder Weiß je nach Größe