Brand CI-System

CI-Schemas, Design-Tokens, Areas und CSS-Deploy — wie das Brand-System aufgebaut ist und wann es greift.

Überblick

Das Excellence Journey Brand-System besteht aus 3 CI-Schemas (S1/S2/S3) und 5 Areas. Die Kombination aus Schema + Area erzeugt via API ein maßgeschneidertes CSS-Bundle, das auf Website, Mitgliederportal und E-Mail-Templates geladen wird.

Schema (S1–S3)

Area (master, lifestyle, …)

→

brand.css via API

→

Website / Portal / E-Mail

Die drei CI-Schemas

S1 — Logo Original

Teal-Ivory-Gold — das klassische Excellence Journey CI. Warme Erdtöne, Premium-Auftritt.

Ivory

Teal

Gold

Forest

S2 — Natur & Wachstum

Grün-dominiertes Schema. Stärker naturverbunden, frischer Auftritt für Lifestyle & Longevity.

Sage

Forest

Olive

Dark

S3 — Sky & Happiness

Blau-dominiertes Schema. Klar, vertrauenswürdig, modern — für digitale & wissenschaftliche Inhalte.

Sky

Sapphire

Gold

Dark

Unveränderliche Anker: Ivory #f5f0e8, Teal Deep #2a6b5a, Gold Warm #c9a84c und Forest Dark #1a3d32 sind schema-übergreifend konstant — sie bilden das visuell erkennbare Logo-Fundament.

Design-Tokens

Alle Werte sind in der Tabelle brand.tokens gespeichert, aufgeteilt nach setting (s1/s2/s3) und category.

Kategorie	Token-Keys (Auswahl)	Beschreibung
`anchors`	ivory, teal_deep, gold_warm, forest_dark	Logo-Farben, schema-übergreifend konstant
`colors`	background, primary, accent, text_dark, muted, border	Haupt-Farbpalette je Schema
`typography`	font_heading, font_body, weight_headline, weight_body, body_lineheight, label_spacing	Typografie-Entscheidungen (Cormorant Garamond + Jost, schema-übergreifend gleich)
`brand`	name, claim, salutation, email_sender_name, email_footer	Textueller Markenauftritt (identisch in allen Schemas)
`area_*`	accent, accent_light, accent_name, label, tagline, pills, suffix	Area-spezifischer Akzent wird zur Laufzeit in `area`-Kategorie gemappt

Typografie (schema-übergreifend)

Token	Wert
`font_heading`	Cormorant Garamond
`font_body`	Jost
`weight_headline`	700
`weight_body`	300
`body_lineheight`	1.7
`label_spacing`	0.18em

Areas

Jede Area überschreibt den --color-accent und verwandte Variablen im CSS. So kann dieselbe Seite je nach Inhalt (Longevity-Artikel vs. Community-Post) in einer anderen Akzentfarbe erscheinen.

master

Performance trifft Lebensqualität.

GanzheitlichEvidence-basedPremium

lifestyle

Mehr Energie. Mehr Fokus. Ab morgen.

SchlafErnährungQuick Wins

longevity

Dein biologisches Alter ist verhandelbar.

BiomarkerEpigenetikAdvanced

digital

Dein System. Dein Tempo. Jederzeit.

WorkbooksProgrammeDownloads

community

Gleichgesinnte. Echte Impulse. Gemeinsam.

NewsletterEventsContent

CSS-Deploy: Wann und warum?

Das CSS wird nicht statisch ausgeliefert, sondern bei jedem Request dynamisch generiert. Das ermöglicht sofortige Schema-Wechsel ohne Deployment.

Endpunkt

GET /api/public/brand.css?setting=s1&area=master

Antwort: vollständiges CSS mit :root-Variablen, Google Fonts Import und Utility-Klassen.

CSS-Variablen (Auswahl)

:root {
  /* Logo-Anker (unveränderlich) */
  --iv: #f5f0e8;        /* ivory */
  --tl: #2a6b5a;        /* teal deep */
  --gd: #c9a84c;        /* gold warm */
  --fo: #1a3d32;        /* forest dark */

  /* Schema-Farben */
  --bg:               #f5f0e8;
  --color-text:       #1a3d32;
  --color-primary:    #2a6b5a;
  --color-accent:     #2a6b5a;   /* ← überschrieben durch Area */
  --color-muted:      #8a7e6a;
  --color-border:     rgba(42,107,90,.1);

  /* Typografie */
  --font-heading:     'Cormorant Garamond', serif;
  --font-body:        'Jost', sans-serif;
}

Wann wird das CSS geladen?

Website (excellencejourney.tech): via <link id="ej-brand-css"> — wird dynamisch befüllt durch das Brand-Bootstrap-Script. Schema aus localStorage oder URL-Parameter ?setting=s2.
Member Portal (portal.html): identisches Bootstrap-Script. Area wird nach Login-Kontext gesetzt (z. B. Longevity-Bereich → area=longevity).
E-Mail-Templates: Bei Brand-Versionen wird das CSS eingebettet (Snapshot-Prinzip) — kein Live-Request aus dem E-Mail-Client.

Brand-Snapshot für E-Mails

Wenn im CRM eine neue Template-Version generiert wird (Admin → E-Mail Templates → Generieren), ruft die API /api/public/brand.css?setting=s1&area=master ab und bettet das CSS direkt in den HTML-String ein. Das Template ist dadurch client-unabhängig und zeitstabil.

Warum Snapshot? E-Mail-Clients können keine externen Stylesheets nachladen. Außerdem soll ein versendeter Newsletter immer genau das Design zeigen, das zum Versandzeitpunkt aktiv war — unabhängig von späteren Brand-Änderungen.

Brand-Version im CRM verwalten

Unter Admin → E-Mail Templates kannst du für jedes Template neue Brand-Versionen generieren:

Schema (S1/S2/S3) und Area auswählen
Generieren klicken — API baut HTML + CSS-Snapshot zusammen
Version voransehen (Vorschau-Button)
Freigeben — diese Version ist nun aktiv, n8n nutzt sie ab sofort

Achtung: Ein Klick auf Freigeben archiviert die bisherige aktive Version automatisch. Bereits versendete E-Mails sind davon nicht betroffen (Snapshot-Prinzip).

API-Referenz

Endpunkt	Beschreibung
`GET /api/public/brand.css?setting=s1&area=master`	CSS-Bundle live generieren (öffentlich)
`GET /api/public/brand.json?setting=s1&area=master`	Token-Werte als JSON (öffentlich)
`GET /api/brand/settings`	Alle verfügbaren Schemas + aktuell aktive Version
`POST /api/brand/templates/:id/generate`	Neue Brand-Version für ein Template erstellen
`POST /api/brand/templates/:id/versions/:v/publish`	Version als aktiv markieren
`GET /api/brand/templates/:id/versions/:v/preview`	HTML-Vorschau einer Version