Brand-System · Phase 3

Ecklicht Living Styleguide

Die sichtbare Wahrheit der Marke. Diese Seite rendert Farben, Typografie, Komponenten, Icons und Motion live aus den Design-Tokens. Was du hier siehst, ist exakt das, was die Live-Site nutzt.

Single Source of Truth: brand/ecklicht-tokens.css Theme: hell und dunkel Font: Inter Variable (self-hosted)

Was das hier ist

Ein lebendiges System, keine PDF-Momentaufnahme.

Jeder Wert auf dieser Seite kommt aus brand/ecklicht-tokens.css, der einzigen Quelle der Wahrheit. Ändert sich ein Token, ändert sich diese Ansicht mit. Der Styleguide bringt sein eigenes Layout mit und referenziert die Tokens über einen relativen Pfad. Komponenten-Demos nutzen ausschließlich Token-Variablen, kein rohes Marken-Hex.

  • Drei-Ebenen-Architektur: Primitive, Semantic, Component
  • Marken-Navy und UI-Navy strikt getrennt geführt
  • Light und Dark aus denselben semantischen Rollen
  • Icons erben Farbe über currentColor, ohne Dark-Regeln

Palette

Farben

Navy plus ein rotes Akzent-Signal. Jede Kachel zeigt Hex, Rolle und den Weiß-Kontrast. Schalte oben das Theme um, dann zeigt jede semantische Rolle ihren Dark-Wert.

Navy-Split-Regel: Das Logo-Navy (#1A3A6C) und das tiefe Marken-Navy (#0F2649) sind nur für Marke und Print: Bildmarke, Wortmarke, Favicon, Negativ-Flächen. Kein UI- oder Komponenten-Token greift darauf zu. Alles Digitale läuft über die UI-Navy-Rampe.

UI-Navy-Rampe speist alle digitalen Tokens

UI-Navy Dark

#0F2B4C

Headlines, Logo-Text, Fokus-Ring, Footer-Headings.

Weiß 14,28:1 · AAA

UI-Navy Mid

#1B4F8A

Eyebrow, Ghost-Border, Header-Pill, Form-Focus, Check-Icon.

Weiß 8,29:1 · AAA

UI-Navy Light

#5BA3E6

Dekorativ: Aurora, Glow, Dark-Mode-Adaption. Nie als Text auf Hell.

Weiß 2,68:1 · zu niedrig

Logo-Navy NUR Marke und Print, nie UI

Marken-Navy (Logo)

#1A3A6C

Referenzfarbe Bildmarke und Wortmarke. Non-negotiable laut Guideline.

Weiß 11,26:1 · AAA

Marken-Navy Tief

#0F2649

Print-Cover, Negativ-Flächen, Wasserzeichen.

Weiß 15,07:1 · AAA

Akzentrot die Signatur, der Funke

Ecklicht Rot

#C8252C

CTA-Fläche und Signatur. Rote Raute, Pillar-Nummern, invalid-Border.

Weiß 5,59:1 · AA

Rot Hover

#A81E24

Dunklerer Hover-Zustand der roten CTA-Fläche.

Weiß 7,4:1 · AAA

Rot Dark-Text

#F94D54

Sattes Rot für rote Schrift auf dunklem Grund.

Dunkel ~5,3:1 · AA

Neutrals Tinte, Flächen, Hairlines

Ink

#0A1628

Haupt-Text hell, zugleich Haupt-Hintergrund dunkel.

auf Weiß · AAA

Muted

#51637A

Gedämpfter Text hell: Leads, Nav-Default, Footer.

auf Weiß 5,9:1 · AA

Surface 1

#F4F7FA

Alternativ-Hintergrund hell: Cards, Sektionen, Footer.

Flächen-Token

Text Dark

#E8EDF4

Haupt-Text im Dark Mode, hellgrau-weiß.

Dark-Token

Muted Dark

#B8C5D6

Gedämpfter Text im Dark Mode.

Dark-Token

Surface 2 Dark

#14223A

Alternativ-Hintergrund im Dark Mode, etwas heller als bg.

Dark-Token

Status Erfolg und Fehler, je Theme

Success-Text Hell

#0B6A45

Erfolgsmeldung im Light Mode, auf grüner 12%-Fläche.

AAA

Success-Text Dunkel

#6FE0AE

Erfolgsmeldung im Dark Mode.

Dark-Token

Error-Text Hell

#A82E2E

Fehlermeldung im Light Mode, auf roter 10%-Fläche.

AAA

Error-Text Dunkel

#FFB3B3

Fehlermeldung im Dark Mode.

Dark-Token

Logo-Navy

Marke und Print. Bildmarke, Wortmarke, Favicon, Negativ. Kein digitales Token zeigt hierauf.

UI-Navy-Rampe

Digital. Headlines, Buttons, Ghost-Border, Eyebrow, Fokus-Ring, Aurora. Speist jedes UI-Token.

Schrift

Typografie

Inter Variable, self-hosted, mit System-Fallback. Die Type-Scale rendert live mit ihren echten clamp()-Größen. Zieh das Browserfenster schmaler, dann skalieren h1, h2 und der Lead mit.

h1clamp(2.5rem, 5vw + 1rem, 4.5rem)
weight 800 · tracking -0.02em

Marketing mit Klarheit

h2clamp(2rem, 3vw + 1rem, 3rem)
weight 800 · tracking -0.02em

Berater, Stratege, Macher

h3 (Pillar)1.25rem
weight 700

Online-Marketing klar denken

Lead1.1rem
line-height 1.55 · muted

Inhouse-Marketer, Agentur-Berater, am C-Level-Tisch und im Developer-Briefing. Ich übersetze zwischen diesen Welten.

Body1rem
line-height 1.6

Ich plane, briefe, prüfe und ziehe die richtigen Werkzeuge so heran, dass am Ende etwas Solides steht. Konkret statt Buzzword-Suppe, Substanz vor Tempo.

Body small0.95rem
muted

Kleinere Fließtexte: Pillar-Beschreibungen, Arbeitsmodelle, Desktop-Navigation.

Rotierender Hero-Akzent das Signatur-Element

Ein fester Präfix, dahinter ein rotes Wort, das durch die Disziplinen rotiert. Der unsichtbare Ghost reserviert die Breite des längsten Worts, damit nichts springt. Motion respektiert prefers-reduced-motion.

Live

Marketing mit Klarheit: Sichtbarkeit

Gewichte Inter Variable, 400 bis 900

Klarheit Aa

400 · Regular

Klarheit Aa

500 · Medium

Klarheit Aa

600 · Semibold

Klarheit Aa

700 · Bold

Klarheit Aa

800 · Extrabold

Klarheit Aa

900 · Black

Bausteine

Komponenten

Live und interaktiv. Fahr mit der Maus über die Buttons, fokussiere das Formularfeld mit Tab. Alle Werte stammen aus den Component-Tokens.

Buttons · Hover und Fokus testen
Kontakt
Eyebrow mit roter Raute · Section-Eyebrow
Marketingberatung aus Hameln

Was ich mache

Pillar-Cards
01

Online-Marketing klar denken

SEO, GEO, Content und Conversion-Optimierung. Audit, Strategie, Umsetzung, Reporting.

02

KI sinnvoll integrieren

Proof of Concept zuerst, dann saubere Implementierung in deine Prozesse. Keine Hype-Tools.

03

Prozesse schlanker machen

Marketing-Workflows, Agentursteuerung, Projektmanagement. Weniger Reibung, mehr Strategie.

Check-Badges
  • Inhouse-Marketer und Agentur-Berater
  • Übersetzer zwischen C-Level und Developer
  • KI im Tagesgeschäft, nicht im Workshop
  • Aus Hameln, remote in DACH
Formularfeld mit Fokus-Ring · mit Tab fokussieren

Bei ungültiger Eingabe färbt sich der Rand rot (invalid-Border).

Status-Meldungen

Danke, deine Nachricht ist raus. Ich melde mich zeitnah.

Das hat nicht geklappt. Versuch es nochmal oder schreib direkt an erik@ecklicht.de.

Set

Icons

Vierzehn Icons im Phosphor-nahen Stil. Jedes nutzt currentColor und erbt seine Farbe vom Eltern-Element, hier Navy beziehungsweise im Dark Mode UI-Navy-Light. Schalte das Theme um, die Galerie passt sich ohne eigene Dark-Regeln an.

arrow-right
calendar
check
burger
envelope
phone
send
theme-moon
theme-sun
linkedin
instagram
x
quora
substack

Rhythmus

Spacing & Motion

Der Spacing-Rhythmus baut auf einer 0,25rem-Basis. Die Balken zeigen die Token-Stufen maßstäblich. Darunter zwei Motion-Demos: die Aurora und das Wort-Rotator-Konzept. Alle Animation steckt hinter einem prefers-reduced-motion-Guard.

Spacing-Stufen Basis 0,25rem

space-1 · 0,25rem
space-2 · 0,5rem
space-3 · 0,75rem
space-4 · 1rem
space-6 · 1,5rem
space-8 · 2rem
space-12 · 3rem
space-16 · 4rem
space-24 · 6rem

Motion-Demos reduced-motion-sicher

Aurora

Driftender Navy-Verlauf, 28s, weicher Mask-Rand. Pausiert bei reduzierter Bewegung.

Wort-Rotator

Sichtbarkeit

Easing: spring (0.22, 1, 0.36, 1) · Dauer: 160 / 200 / 320ms