ibp.Styleguide
Digitale Designrichtlinien für das ibp.Kollektiv
Digital Design Guidelines for the ibp.Kollektiv
Version: 0.91 (Stand: August 2026)
Sprache / Language: Deutsch & English
Status: Release Candidate
1. Farben / Colors
ibp.Farbpalette (ibp.Color Palette)
| Name | HEX | Slug | Marken-Zuordnung |
|---|---|---|---|
| ibp.Silver / ibp.Silber | #c0c0c0 | ibp-silver | Neutral / Akzent |
| ibp.Orange | #ec6608 | ibp-orange | ibp.Akademie / ibp.Seminare |
| ibp.Purple / ibp.Purpur | #5f0e78 | ibp-purple | ibp.Kanzlei |
| ibp.Blue (Blau) | #3b68ae | ibp-blue | Neutral / Vertrauen |
| ibp.Green (Grün) | #51ae32 | ibp-green | ibp.Institut |
| ibp.Turquoise (Türkis) | #40e0d0 | ibp-turquoise | Neutral / Frische |
| ibp.Grey (Grau) | #808080 | ibp-grey | Neutral / Struktur |
| ibp.Yellow (Gelb) | #fdc300 | ibp-yellow | Neutral / Warnung |
Hinweis / Note: Alle Farben sind in der theme.json hinterlegt und stehen als Presets & Styles zur Verfügung.
Korrektur August 2026: ibp.Green wurde auf den Originalwert #51ae32 zurückgesetzt (vorher temporär #00A950).
2. Schriftarten / Typography
Primäre Schriftart / Primary Typeface:
Source Sans 3 (lokal eingebunden — Update von Source Sans Pro)
Slugs: source-sans-3
Verfügbare Schnitte / Available Weights:
| Gewicht | Wert | Einsatz |
|---|---|---|
| 400 Regular | 400 | Fließtext (Body) |
| 600 Semibold | 600 | Sub-Headlines, UI-Elemente |
| 700 Bold | 700 | Überschriften (H1–H6) |
| 900 Black | 900, 900italic | Hervorhebungen, Display |
3. Layout & Abstände / Layout & Spacing
| Element | Wert / Value | Bemerkung |
|---|---|---|
| Inhaltsbreite / Content Width | 800px | Korrigiert von 960px auf 800px (August 2026) |
| Weite Breite / Wide Width | 1200px | Unverändert |
| Section Spacing (Large) | clamp(2rem, 10vw, 6rem) | Responsive |
| Blockabstand (Gap) | 0 | Custom spacing tokens |
Custom Spacing Tokens:
--wp--custom--spacing--small /* 0.5rem / 8px */
--wp--custom--spacing--medium /* 1rem / 16px */
--wp--custom--spacing--large /* 2rem / 32px */
4. Duotone-Filter
Standard-Duotone: Verwendet für SVGs, Filtergrafiken & Galerien
| Filter-Name | Farben | Einsatz |
|---|---|---|
| Standard | ["#ec6608", "#ec6608"] | Alle ibp.Orange-Anwendungen |
| Dual-Tone | ["#5f0e78", "#ec6608"] | Kombinierte Marken-Übergänge |
Setzt SVGs automatisch in die jeweilige Markenfarbe um.
5. Komponenten / Components
Buttons
| Variante | Hintergrund | Text | Hover |
|---|---|---|---|
| Primary | #ec6608 (Orange) | #ffffff | #37939d (Sekundär) |
| Secondary | #5f0e78 (Purple) | #ffffff | #37939d |
| Ghost | transparent | #ec6608 | #5f0e78 Fill |
| Accent-Fill | #ec6608 | #ffffff | #000000 (Dark) |
Links
| Zustand | Farbe | Dekoration |
|---|---|---|
| Default | #c0c0c0 (ibp.Silver) | Unterstrichen |
| Hover | #37939d (Sekundär) | Unterstrichen |
| Active | #5f0e78 (ibp.Purple) | Unterstrichen |
6. Assets & Logos
Logoformate:
- SVG (empfohlen, farbsteuerbar)
- PNG (Backup)
- Auflösung: mind. 512×512 px
Speicherort:/wp-content/themes/ibp-spectra-child-240901-version-0-85/assets/images/logos/
Dateiname-Schema:ibp-bubble-{color}-transparent.svgibp-logo-{color}-transparent.svg
Verfügbare Bubble-Varianten: Orange, Purple, Green, Blue, Grey, Turquoise, Yellow, White (8 Stück)
Verfügbare Logo-Varianten: Orange, Black (2 Stück)
Status August 2026: SVG-Dateien müssen noch in das Theme-Verzeichnis hochgeladen werden.
7. Theme-Informationen
| Attribut | Wert |
|---|---|
| Theme-Name | ibp.one child 0.91 |
| Parent-Theme | Spectra One |
| Text Domain | ibp-spectra-child-240901-version-0-85 |
| Version | 0.91 (Release Candidate) |
| Erstellt mit | create-block-theme (WP CLI) |
| Styles | ibp-orange.json, ibp-silver.json, ibp-branding.json |
8. Changelog v0.9 → v0.91
- ibp.Green korrigiert: Zurückgesetzt auf Originalwert
#51ae32(war temporär #00A950) - contentSize aktualisiert: Von 960px auf 800px korrigiert (entspricht theme.json)
- Schriftart aktualisiert: Source Sans Pro → Source Sans 3
- Weight-Schema erweitert: Neue 600 Semibold-Ebene für UI-Elemente
- Farbtabelle ergänzt: Spalte „Marken-Zuordnung“ hinzugefügt
- Logo-Pfad korrigiert: Pfad angepasst an aktuelle Struktur
9. Offene Punkte
- Logo-SVGs hochladen (8 Bubble + 2 Logo-Varianten)
- Animierte SVGs implementieren (Hover, Loading-State)
- Sprachversionen auf v0.91 synchronisieren
- Tone-of-Voice Guide ergänzen
- Icon-System dokumentieren
