Zum Inhalt springen
JuConnect
Hilfen zur Erziehung
Suche
Leitlinie
Klar · seriös · freundlich.
Primärfarbe führt, Akzent unterstützt.
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

Do

- „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
Helfer
Gruppe

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

1. Anfrage
2. Rückmeldung
3. Abstimmung

Kontaktmöglichkeiten für Träger.

Kurz, neutral, ohne Pathos.

Schritte, Zuständigkeiten, Zeitrahmen.

## 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

## Beispiel-Modal

Modals sparsam verwenden. Für kritische Bestätigungen oder komprimierte Prozesse.