Design System Version 0.2

Styleguide

Toolbox Styleguide für JuConnect. Klar strukturierte Regeln und kopierbare Code-Snippets für konsistente Gestaltung und Kommunikation.

Primär #1d354f Akzent #8FAE9A

Use-case

Öffentliche Träger

Ton

Sachlich, respektvoll

Akzent

sparsam, unterstützend

Marke & Kommunikation

Kurzregeln für Sprache, Tonalität und visuelle Haltung.

Stimme (Voice)

Sie-Ansprache, respektvoll
kurze Sätze, klare Begriffe
keine Marketing-Floskeln, keine Superlative
keine Emotionalisierung sensibler Themen
präzise Zuständigkeiten & Abläufe

Do / Don’t

„Ablauf in 3 Schritten“
„Zuständigkeit & Kontakt“
„Dokumente & Nachweise“

Don’t

„Wir ändern Ihr Leben“
zu viele Fotos/Emotionen
verspielte UI-Effekte

Bildsprache

Leitlinien für sachliche, respektvolle Illustrationen im JuConnect-Kontext.

Regeln

Stil: sachlich, reduziert, freundlich
Keine Verniedlichung
Keine übertriebenen Emotionen
Klare Formen, ruhige Farben
Eher erklärend als erzählend

Beispiele

Referenz

Prompt-Generator

Thema

Beim Kopieren wird das Thema direkt in den Prompt eingesetzt.

Logo

Anwendung, Schutzraum, Mindestgröße, Varianten.

Logo-Assets

Hell

Dunkel

Download Logo (Standard) Download Logo (Hell)

Hinweis: Auf dunklen Flächen die helle Logo-Variante verwenden.

Icon-Assets

Hell

Dunkel

Download Icon (Standard) Download Icon (Hell)

Regeln

Schutzraum

Rundum mindestens 1× Logo-Höhe Abstand zu anderen Elementen.

Verboten

Strecken/Quetschen
Schatten/Glow hinzufügen
Farben ändern
auf unruhigen Bildern platzieren

Design Tokens

Copy & paste: CSS Variablen als Single Source of Truth.

CSS Tokens (Auszug)

:root{
  --primary: #1d354f;
  --accent:  #8FAE9A;

  --bg:       #f6f7f8;
  --surface:  #ffffff;
  --surface2: #eef1f3;
  --text:     #101922;
  --text2:    #3c4a58;
  --muted:    #607384;
  --line:     #d7dee5;

  --radius: 14px;
  --shadow-sm: 0 6px 16px rgba(16, 25, 34, .08);
  --focus: 0 0 0 3px rgba(143, 174, 154, .35);
}

Farben

Primärfarbe führt. Akzent ist Unterstützung, nicht Hauptdarsteller.

Primär

--primary · #1d354f

Akzent (Salbei)

--accent · #8FAE9A

Hintergrund

--bg · #f6f7f8

Header-Verlauf

Layer 1 (light) · #8FAE9A38 → #8FAE9A00

Layer 2 (light) · #1D354F1A → #1D354F00

Layer 1 (dark) · #8FAE9A2E → #8FAE9A00

Layer 2 (dark) · #8FAE9A26 → #8FAE9A00

Base · var(--surface)

Einsatz: Page-Header, Hero-Flächen und ruhige visuelle Trennung.

Primär in UI

Primärfarbe für Navigation, Headlines, Primary Actions.

Akzent sparsam

Beispiel: dezenter Highlight

Akzent nur als feiner Rahmen / Marker — nicht als große Fläche.

Typografie

Source Sans 3. Lesbarkeit und ruhige Hierarchie.

Skala

H1 — Überschrift

H2 — Abschnitt

H3 — Unterpunkt

Lead: kurze Einleitung. Keine Floskeln, klare Sprache.

Fließtext: max. 75 Zeichen pro Zeile. Link ist deutlich.

Muted: Metadaten, Hilfetexte, sekundäre Inhalte.

Copy Snippets

Regel

Fließtext-Breite begrenzen (max-width: 75ch).

Betonung

Fett sparsam; Bedeutung entsteht durch Struktur, nicht Gewicht.

Buttons

Primär = Markenblau. Akzent bleibt dezent.

Preview

Fokuszustand ist sichtbar, Hover ist zurückhaltend.

Button CSS

.btn--primary{
  background: var(--primary);
  color: #fff;
  border-color: rgba(0,0,0,.06);
}

Formulare

Klare Labels, Hilfetexte, Validierung. Tool-first: HTML direkt kopieren.

Kontaktformular (Snippet)

<form class="form">
  <div class="field">
    <label class="label" for="name">Name</label>
    <input class="input" id="name" type="text" />
    <div class="help">Pflichtfeld.</div>
  </div>

  <div class="field">
    <label class="label" for="email">E-Mail</label>
    <input class="input" id="email" type="email" />
  </div>

  <button class="btn btn--primary" type="submit">Senden</button>
</form>

Name

Pflichtfeld.

E-Mail

Wir antworten i. d. R. innerhalb von 2 Werktagen.

Thema

Nachricht

Datenschutzhinweise gelesen Pflicht für Anfrage.

Zustände

E-Mail

Bitte eine gültige E-Mail-Adresse eingeben.

E-Mail (ok)

Beispiel für korrekte Eingabe.

Regel

Fehlertexte sind konkret, kurz, lösungsorientiert.

Feedback

Modal, Toast, Tooltip, Accordion/Tabs (kopierbar).

Modal

Modal: Esc schließt, Backdrop klick schließt, Fokus-Falle aktiv.

Accordion + Tabs

Kurze, klare Beschreibung der Leistung.

Anfrage
Rückmeldung
Abstimmung

Kontaktmöglichkeiten für Träger.

Was sind „Hilfen zur Erziehung“? Wie läuft eine Anfrage über den Träger?

Layout

Cards, Grid, Tables. Vorlagen für spätere Seiten.

Card

Für Inhalt, nicht für Deko. Konsistente Abstände.

Mehr

Callout

Hinweis

Ruhige Information ohne Alarmismus.

Tabelle

Dokument	Status	Aktion
Leistungsbeschreibung	Entwurf
Datenschutz	Final

Patterns

Basis-Sektionen für die spätere Website (Hero, Section, CTA).

Hero (Template)

<section class="hero">
  <div class="hero__inner">
    <h1 class="h1">Hilfen zur Erziehung – strukturiert & verlässlich</h1>
    <p class="lead">Informationen für öffentliche Träger und Kooperationspartner.</p>
    <div class="row wrap">
      <a class="btn btn--primary" href="#kontakt">Kontakt</a>
      <a class="btn btn--secondary" href="#leistungen">Leistungen</a>
    </div>
  </div>
</section>

Hilfen zur Erziehung – strukturiert & verlässlich

Informationen für öffentliche Träger und Kooperationspartner.

Kontakt Leitlinien