{ "$schema": "https://design-tokens.org", "brand": "C3 marketing agentur GmbH", "version": "2.4.0", "updated": "2026-09-30", "color": { "black": { "value": "#000000", "rgb": [0, 0, 0], "role": "Typografie, Kontrastflächen, Logo" }, "yellow": { "value": "#fdc300", "rgb": [253, 195, 0], "role": "Markenfarbe — Akzent, sparsam (der gelbe Anstecker)" }, "offwhite": { "value": "#fffaef", "rgb": [255, 250, 239], "role": "Grundfläche, Hintergrund" }, "cyan": { "value": "#01cfd5", "rgb": [1, 207, 213], "role": "Sekundärakzent (Creative Strategy Studio, Illustration) · Phase curious" }, "coral": { "value": "#ff647c", "rgb": [255, 100, 124], "role": "Sekundärakzent (Creative Strategy Studio, Illustration) · Phase clever" } }, "phase": { "curious": { "color": "cyan", "value": "#01cfd5", "use": "Phase 1 — Wissen sammeln" }, "clever": { "color": "coral", "value": "#ff647c", "use": "Phase 2 — Strategie definieren" }, "creative": { "color": "yellow", "value": "#fdc300", "use": "Phase 3 — Strategie sichtbar machen" } }, "font": { "headline": { "family": "Funnel Display", "weights": { "extrabold": 800, "semibold": 600, "light": 300 }, "use": "Head- und Sublines" }, "copy": { "family": "Funnel Sans", "weights": { "bold": 700, "medium": 500, "light": 300 }, "use": "Fließtext, UI" }, "marker": { "family": "IBM Plex Mono", "weights": { "regular": 400 }, "use": "Special Marker, Labels, Anmerkungen" } }, "typescale": { "$ref": "../inhalt/design/typografie-hierarchie.md", "canvas": { "w": 1280, "h": 720, "ratio": "16:9", "ptPerPx": 0.75 }, "roles": { "display": { "font": "headline", "weight": 800, "px": 104, "pt": 78, "lineHeight": 0.95, "tracking": "-2.5%" }, "title": { "font": "headline", "weight": 800, "px": 60, "pt": 45, "lineHeight": 1.0, "tracking": "-2%" }, "heading": { "font": "headline", "weight": 800, "px": 40, "pt": 30, "lineHeight": 1.05, "tracking": "-1.5%" }, "subline": { "font": "headline", "weight": 300, "px": 28, "pt": 21, "lineHeight": 1.3 }, "subhead": { "font": "headline", "weight": 600, "px": 24, "pt": 18, "lineHeight": 1.15 }, "lead": { "font": "headline", "weight": 300, "px": 24, "pt": 18, "lineHeight": 1.3 }, "body": { "font": "copy", "weight": 300, "px": 20, "pt": 15, "lineHeight": 1.5, "emphasis": 500 }, "bulletL1":{ "font": "copy", "weight": 500, "px": 20, "pt": 15, "lineHeight": 1.4 }, "bulletL2":{ "font": "copy", "weight": 300, "px": 17, "pt": 13, "lineHeight": 1.4 }, "quote": { "font": "headline", "weight": 300, "px": 44, "pt": 33, "lineHeight": 1.2, "tracking": "-1%" }, "kicker": { "font": "marker", "weight": 400, "px": 14, "pt": 11, "lineHeight": 1.2, "tracking": "+12%", "case": "upper" }, "caption": { "font": "copy", "weight": 400, "px": 13, "pt": 10, "lineHeight": 1.4, "tracking": "0", "opacity": 0.7 }, "kpi": { "font": "headline", "weight": 800, "px": 88, "pt": 66, "lineHeight": 1.0, "tracking": "-2%" }, "footer": { "font": "marker", "weight": 400, "px": 12, "pt": 9, "lineHeight": 1.0, "tracking": "+8%" } } }, "logo": { "files": { "signet": "../assets/logos/signet_{black|white|yellow}.svg", "wortbildmarke_vertikal": "../assets/logos/logo_top_{black|white|yellow}.svg", "wortbildmarke_horizontal": "../assets/logos/logo_long_{black|white|yellow}.svg", "web_variante": "../assets/logos/logo_site_{black|white|yellow}.svg", "studio": "../assets/logos/logo_studio.svg", "sticker_echte": "../assets/logos/sticker_echte.svg", "titel_lockup": "../assets/logos/title_echte_werbung.svg", "grundformen": "../assets/grafiken/element_{circle|square|triangle}[_outline].svg", "illustrationen": "../assets/grafiken/graphic_*.svg (22 Meet-and-Brief-Motive)", "buch_illustrationen": "../assets/illustrationen/illustration_*.svg (42 grosse Motive, auf Dunkel nur auf Offwhite-Kachel)", "png_fallback": "../assets/logos/logo_*.png" }, "rules": ["Signet immer im Kreis", "Auf Schwarz: Gelb oder Offwhite", "Auf Offwhite: Schwarz oder Gelb", "Wortmarke in Versalien: C3 MARKETING AGENTUR GMBH", "sticker_echte sparsam als Echtheits-Marker"], "minSize": { "signet_px": 24, "wortbildmarke_breite_px": 90, "fuss_signatur_px": 19 }, "fussSignatur": "logo_long auf jeder Folie unten rechts (~19px) — weiss auf dunkel, schwarz auf hell/farbig" }, "illustration": { "familien": { "element": "Grundformen (Kreis/Quadrat/Dreieck, gefuellt+outline) — FREI in allen 5 Markenfarben einfaerbbar, kombinierbar zu Mustern", "graphic": "Meet&Brief-Icons (graphic_*) — feste Farbfuellung, Motiv passend zum Inhalt", "illustration": "Buch-Illustrationen (illustration_*) — feste Farbfuellung, fuer Akzente/Trenner" }, "rules": [ "Grafiken und Illustrationen auf hellem/Offwhite-Grund ODER direkt auf farbigen Markenflaechen (Tuerkis/Koralle/Gelb) — ohne Kachel", "NIE auf schwarzen Flaechen", "Keine Offwhite-Kacheln hinter Illustrationen noetig (schwarze Linienfuehrung traegt auf hell und auf Farbe)", "Illustrations-/Grafikmotive nicht umfaerben oder verzerren", "Grundformen (element_*) duerfen frei eingefaerbt und gemustert werden", "Echte Projektfotografie statt Stock; S/W mit Gelb-Anker" ] }, "ui": { "$ref": "../inhalt/design/ui-system.md", "stylesheet": "c3-ui.css", "gilt_fuer": "Alle digitalen Werkzeug-Oberflaechen (C3 Play, Kontext, Charakter Check, Beileger-Planer, OLAF, weitere) — nicht die Website myc3.com, nicht Decks/Print/Dokumente (dort c3-os.css)", "rollen": { "flaeche": { "color": "offwhite", "value": "#fffaef", "use": "Grund jeder Seite, auch Felder und Karten" }, "text": { "color": "black", "value": "#000000", "use": "Schrift, Linien, aktive Auswahl" }, "weiter": { "color": "yellow", "value": "#fdc300", "use": "Die eine Hauptaktion pro Ansicht, Fokus, aktueller Tab, Fortschritt, Ablage, Hinweis" }, "erledigt": { "color": "cyan", "value": "#01cfd5", "use": "Bestaetigung, Pruefung bestanden, erledigter Kommentar" }, "achtung": { "color": "coral", "value": "#ff647c", "use": "Fehler, passt nicht, offener Kommentar, Loeschen" } }, "ampel": { "passt": { "rolle": "erledigt", "zeichen": "✓" }, "hinweis": { "rolle": "weiter", "zeichen": "!" }, "passt_nicht": { "rolle": "achtung", "zeichen": "✕" } }, "schwarz_stufen": { "rule": "Abstufungen nur als Transparenz von Schwarz (auf dunkel: von Offwhite), nie als Hex-Grau. Schrift nur in 100 oder 60.", "ink-60": { "value": "rgba(0,0,0,.6)", "dunkel": "rgba(255,250,239,.66)", "use": "Nebentext, Labels, Metadaten", "kontrast_offwhite": "5.6:1" }, "ink-25": { "value": "rgba(0,0,0,.25)", "dunkel": "rgba(255,250,239,.28)", "use": "Feld- und Chip-Rahmen, gestrichelte Leerflaechen" }, "ink-12": { "value": "rgba(0,0,0,.12)", "dunkel": "rgba(255,250,239,.14)", "use": "Trennlinien" }, "ink-08": { "value": "rgba(0,0,0,.08)", "dunkel": "rgba(255,250,239,.10)", "use": "Sekundaerknopf, Kopflinie" }, "ink-04": { "value": "rgba(0,0,0,.04)", "dunkel": "rgba(255,250,239,.05)", "use": "Hover" } }, "dunkel": { "flaeche": "#000000", "text": "#fffaef", "logo": "logo_long_white.svg (nie CSS-Filter)" }, "weiss": "#ffffff nur auf der Buehne (fremde Inhalte: Kundenentwurf, simuliertes Werbeumfeld)", "ecken": "0 — rund nur Personenfotos (Kreis), Signet, Statuspunkte, Ampeln, Pins", "regeln": [ "Jede Farbe hat eine Aufgabe", "Klickbar hat Flaeche, Zustand hat Rahmen", "Ein gelber Knopf pro Ansicht", "Farbe sagt nie etwas allein", "Rund heisst Mensch oder Status", "Ein Ding, ein Name (Glossar in ui-system.md)" ] }, "principles": ["Offwhite trägt, Schwarz spricht, Gelb markiert", "Echte Fotografie statt Stock", "Handgemachtes (Handschrift, Tape, Skizzen) als Echtheits-Signal", "Durchstreichung als Stilmittel", "Ein-Wort-Headlines mit Punkt"] }