Brand & Design System
Styleguide
Dieses Dokument ist die verbindliche Referenz für alle gestalterischen Entscheidungen auf digmarketing.de. Es umfasst Designtokens und Typographie ebenso wie Seitenkomponenten und Artikelelemente.
Ziel: Konsistenz im Auftritt und klare Orientierung bei der Weiterentwicklung.
Prinzip: Bestehende Muster bevorzugt wiederverwenden. Neue Elemente zuerst hier dokumentieren, bevor sie in Produktion gehen.
Pflege: Änderungen am Design immer mit einer Aktualisierung dieses Dokuments verbinden. Versionsdatum am Ende anpassen.
Die vier Tabs decken folgende Themenbereiche ab:
- Marke & Tokens: Logo, Farben, Schriften, Icons, Abstände
- Basiselemente: Typographische Hierarchie, Listen, Buttons
- Seitenkomponenten: Tags, Zitat, Accordion, Get in Touch
- Artikel-Elemente: Alle Elemente im Blog-Artikel mit Verwendungshinweisen und Frontmatter-Syntax
Logo
Das digMARKETING Logo ist eine Wortmarke aus dig (Minuskeln) und MARKETING (Versalien). Die Kombination verbindet Zugänglichkeit mit Professionalität.
Negativ (auf Dunkel)
Positiv (auf Hell)
/ App Icon/ Fav-Icon
/ Artikelende
Verwendungsregeln:
- Mindestgröße: 120px Breite (digital)
- Schutzraum: mindestens die Höhe des „d" allseitig freihalten
- Keine Verzerrung, Rotation oder Farbänderung
Farben
digBLUE ist neben digBLACK und digWHITE die Kernfarbe der Marke.
Primärfarben
digBLACK Abstufungen
Eingesetzt für Overlays, Trennlinien und gedimmte UI-Elemente.
Sekundärfarben
Kategorie-Farben
Typographie
Corporate Font: Lato
Hausschrift für Headlines, Labels und UI-Elemente. Humanistische Sans-Serif von Łukasz Dziedzic (2010).
Body Font: Courier Prime
Fließtext-Schrift — Monospace als gestalterisches Element für redaktionellen Charakter. Bildschirmoptimierte Alternative zu Courier Std (Open Font License, lokal gehostet).
Icons
Alle Icons sind SVG-basiert mit stroke="currentColor", stroke-width="1.5" und fill="none". Standardgröße: 24×24px.
Spacing
Einheitliches Abstands-System basierend auf CSS-Variablen. Alle Abstände sind Vielfache von 0.5rem.
--space-xs — 0.5rem (8px)--space-sm — 1rem (16px)--space-md — 2rem (32px)--space-lg — 4rem (64px)--space-xl — 8rem (128px)Headings & Spitzmarken
H1 – Super Heading Number 1
H2 – Heading's Revenge
H3 – Rise of Headings
H4 – Heading's Fall
H5 – Return of the Heading
H6 – The Last Heading
Spitzmarken (Labels) werden als <h6 class="updates-label"> über Headlines gesetzt — Lato Bold, Versalien, letter-spacing: 0.2em. Varianten:
Standard — weiß, für Dunkel
Muted — gedimmt, für Dunkel
Blue — digBLUE, für Hell
Muted Dark — gedimmt, für Hell
Fließtext & Listen
Paragraph
Dies ist ein Standard-Fließtext-Absatz in Courier Prime Light, Schriftgröße 1.05rem, Zeilenhöhe 1.8. Absatzabstand: var(--space-sm) = 1rem.
Links auf dunklem Hintergrund
Links im Seitenkontext erscheinen in rgba(255,255,255,0.85) mit Unterstreichung. Bei Hover: volles digWHITE. Beispiel: interner Link und externer Link.
Ungeordnete Liste
- Listenpunkt eins mit ausreichend Text zur Demonstration
- Listenpunkt zwei
- Untergeordneter Listenpunkt
- Weiterer untergeordneter Punkt
- Listenpunkt drei
Geordnete Liste
- Erster Schritt
- Zweiter Schritt
- Dritter Schritt
Buttons
| Klasse | Hintergrund | Hover | Verwendung |
|---|---|---|---|
btn--primary |
digBLUE | digWHITE + blauer Rand | Primäre CTA |
btn--outline |
Transparent | digBLUE fill | Sekundär auf Dunkel |
btn--outline-dark |
Transparent | digBLACK fill | Sekundär auf Hell |
btn--outline-light |
Transparent | digBLUE fill | Sekundär auf Dunkel, min-width 200px |
btn--black-blue |
Grau #797979 | digBLUE fill | Hero-Slider, Autorbereich |
Kategorie-Tags
Erscheinen in drei Varianten je nach Kontext.
Variante 1 — Solid (hero-slide__category): Hero-Slider & Blog-Cards auf Dunkel.
Variante 2 — Outline (btn-filter): Blog-Filter auf Dunkel. Hover & aktiv: digWHITE Hintergrund.
Variante 3 — Outline farbig (bp-tag): Blog-Post-Tags auf Hell. Hover: farbiger Hintergrund.
Zitat
Großes zentriertes Zitat — eingesetzt auf der Autor- und Über-den-Blog-Seite. Akzentbalken: 40px digBLUE, Text: Courier Light Italic, Autorenzeile: Lato Bold Versalien.
„Wenn alle miteinander reden, dann ist das noch lange keine Kommunikation."Stephan Göckler
Accordion
Eingesetzt auf der Autorseite für Kompetenz- und Erfahrungsübersichten. Header ist klickbar, +-Icon rotiert zu × beim Öffnen.
Get in Touch
Kontakt-CTA-Komponente — erscheint auf Startseite, Blog und Profil-Seite. Foto-Panel links (65%) mit Overlay, CTA-Panel rechts (35%). Wrapper: class="git-section". Text anpassbar via git_text-Parameter beim Include.
Verlinkungen
Inline-Links im Artikel-Fließtext erscheinen in digBLUE (#1346E7) mit Unterstreichung. Hover: Unterstreichung entfällt, Farbe bleibt digBLUE bei 75% Deckkraft. Externe Links öffnen in neuem Tab mit rel="noopener".
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gutes Marketing braucht Strukturen — und genau dabei hilft ein interner Link auf eine weiterführende Seite. Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium. Weitere Impulse findest du auf digmarketing.de, wo Themen wie Branding, KI und Kommunikation regelmäßig beleuchtet werden.
Ihr habt Fragen? Kontaktiert mich gerne über das Kontaktformular.
Markdown: [Linktext](/interne-seite) · [Externer Link](https://example.com)
Blockquote
Blockquotes heben Kernaussagen im Fließtext hervor. Hintergrund: digGREY (#D9D7CC), linker Rand: 4px digBLUE. Markdown: > Zitattext
Omnichannel scheitert selten am einzelnen Kanal. Es scheitert an den Übergängen, die niemand wirklich verantwortet.
Info-Box
Erscheint nach dem digM-Artikelende-Icon. Befüllung über Frontmatter: infobox_title + infobox. Label „Info" ist fest im Template verankert.
Praxischeck: Titel des Checks
1. Schritt
Beschreibung des ersten Schritts mit konkreten Fragen oder Aktionen.
KI-Anwendung: Hinweis auf möglichen KI-Einsatz in diesem Schritt.
2. Schritt
Beschreibung des zweiten Schritts.
Frontmatter:
infobox_title: "Praxischeck: Titel"
infobox: |
**1. Schritt**
Frage oder Beschreibung.
*KI-Anwendung: Hinweis.*Artikel-CTA-Box
Erscheint nach der Info-Box. Befüllung über Frontmatter article_cta. Linker Rand: 4px digBLUE, Hintergrund: #f7f7f5.
Jetzt den eigenen Prozess skizzieren
Kurze Beschreibung des nächsten Schritts — prägnant und handlungsorientiert formuliert.
Tool öffnenFrontmatter:
article_cta:
title: "Titel der CTA-Box"
text: "Beschreibungstext"
url: "https://ziel-url.de"
btn: "Button-Label"digM-Artikelende-Icon
Markiert das Ende des redaktionellen Texts. Erscheint automatisch über das Blog-Post-Template nach page.content — kein Eingriff im Markdown nötig.
Template-Reihenfolge: Artikeltext → digM-Icon → Info-Box → CTA-Box → Über den Autor
Über den Autor
Erscheint am Ende jedes Artikels automatisch über das Template. Autorenbild, Name, Kurzbiografie, CTA zur Autorenseite.
Artikel-Elemente im Überblick
| Element | Herkunft | Pflichtfeld |
|---|---|---|
| Inline-Link | Markdown [text](url) |
— |
| Blockquote | Markdown > text |
— |
| Info-Box | Frontmatter infobox_title + infobox |
— |
| Artikel-CTA-Box | Frontmatter article_cta |
— |
| digM-Ende-Icon | Automatisch (Template) | ✓ |
| Über den Autor | Automatisch (Template) | ✓ |
Stand: 04.06.2026