Onepager


ibp.Styleguide

Digitale Designrichtlinien für das ibp.Kollektiv

Digital Design Guidelines for the ibp.Kollektiv

Version: 0.9 (Stand: April 2025)
Sprache / Language: Deutsch & English


1. Farben / Colors

ibp.Farbpalette (ibp.Color Palette)

NameHEXSlug
ibp.Silver / ibp.Silber#c0c0c0ibp-silver
ibp.Orange#ec6608ibp-orange
ibp.Purple / ibp.Purpur#5f0e78ibp-purple
ibp.Blue (Blau)#3b68aeibp-blue
ibp.Green (Grün)#51ae32ibp-green
ibp.Turquoise (Türkis)#40e0d0ibp-turquoise
ibp.Grey (Grau)#808080ibp-grey
ibp.Yellow (Gelb)#fdc300ibp-yellow

Hinweis / Note: Alle Farben sind in der theme.json hinterlegt und stehen als Presets & Styles zur Verfügung.


2. Schriftarten / Typography

Primäre Schriftart / Primary Typeface:
Source Sans Pro (lokal eingebunden)
Slugs: source-sans-pro
Verfügbare Schnitte: 400, 700, 900, 900 italic

Verwendung / Usage:

  • Überschriften (H1–H6): 700
  • Fließtext: 400
  • Hervorhebungen: 900 oder 900 italic

3. Layout & Abstände / Layout & Spacing

ElementWert / Value
Inhaltsbreite / Content Width960 px
Weite Breite / Wide Width1200 px
Section Spacing (Large)clamp(2rem, 10vw, 6rem)
Blockabstand (Gap)0 (custom spacing tokens)

Custom Tokens:

--wp--custom--spacing--small
--wp--custom--spacing--medium
--wp--custom--spacing--large

4. Duotone-Filter

Standard-Duotone:
Verwendet für SVGs, Filtergrafiken & Galerien

  • Für ibp.Orange: ["#ec6608", "#ec6608"]

Setzt SVGs automatisch in Primärfarbe um


5. Komponenten / Components (Auszug)

Buttons:

  • Standard: Primärfarbe mit weißer Schrift
  • Hover-Zustand: Sekundärfarbe (#37939d)

Links:

  • Farbe: ibp.Silver (#c0c0c0)
  • Hover: Sekundärfarbe

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/

Dateiname-Beispiel:
ibp-bubble-black-512-512.svg


7. Theme-Informationen (Entwicklung)

AttributWert
Theme-Nameibp.one child 0.9
Parent-ThemeSpectra One
Text Domainibp-spectra-child-240901-version-0-85
Version0.9 (Beta)
Erstellt mitcreate-block-theme (WP CLI)
Stylesibp-orange.json, ibp-silver.json usw.

8. Weiterentwicklung

Diese Seite bildet die Grundlage für Version 1.0.
Geplant:

  • Downloadbereich mit .zip & .scss
  • Technische Unterseiten je Thema (Farben, Header, Footer etc.)
  • Git- oder JSON-Dokumentation pro Release

Sprachumschalter / Language Switch

Deutsch (alle Details) | English (all details)


Color Palette
Color 1
Color 2
Color 3
Color 4
Color 5
Color 6