/* * Jeveaux — Design-Tokens * * Drei Schichten: Primitiv → Semantik → Komponente. * In Bauteilen wird NIE eine Primitivfarbe verwendet, immer die semantische * oder die Komponenten-Ebene. So lässt sich eine Farbrolle an einer Stelle * ändern, ohne die Marke anzufassen. * * Quellen der Primitivwerte: * - Farbnamen und Hexwerte: Partnerseiten-Vorlage vom 14.08.2026, die sie * ausdrücklich als „Alle Farben und Schriften aus dem Jeveaux Brand Book" * ausweist. * - Gegengeprüft an den SVG-Quelldateien des Corporate Designs * (Images/Pattern/SVG, Jaguar Pattern, Newsletter). * - Schriften: Milk and Clay (Monotype, lizenziert) für Überschriften, * Outfit (SIL OFL) für Fließtext. * * Offene Punkte sind unten am Ende vermerkt. */ /* =================================================================== Schriften =================================================================== */ @font-face { font-family: "Milk and Clay"; src: url("../fonts/milkclay-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Milk and Clay"; src: url("../fonts/milkclay-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Outfit"; src: url("../fonts/outfit-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Outfit"; src: url("../fonts/outfit-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } :root { /* =============================================================== 1 · PRIMITIV — die Marke. Namen und Werte aus dem Brand Book. Diese Ebene wird in Bauteilen nicht direkt benutzt. =============================================================== */ --jev-lagune: #154c59; --jev-bluete: #ff7345; --jev-creme: #e8d3c8; --jev-duene: #ffe5cc; --jev-asche: #a1928a; --jev-nacht: #2d3140; --jev-kaffee: #403939; --jev-tonka: #66514a; --jev-mondschein: #d8dad0; /* Nicht im Brand Book benannt, aber in Gebrauch — siehe „Offene Punkte“. */ --jev-weiss: #ffffff; /* reines Weiß, nur als Kartengrund */ --jev-papier: #fbf6f4; /* heller Seitengrund */ --jev-terrakotta: #d9804c; /* nur in den Illustrationen, nicht in der Palette */ /* * Grün. Das Brand Book führt keins — Lagune ist ein Petrol (Farbton 192°) * und liest sich als Blau, nicht als Zustimmung. Für „das trifft auf dich * zu" braucht es aber ein Ja-Zeichen, das ohne Beschriftung als Ja gelesen * wird. Tanne liegt mit 166° dicht an Lagune und gehört damit sichtbar zur * selben Familie; die helle Fassung ist dieselbe Rolle auf dunklem Grund. * Gemessen: Tanne auf Weiß 6,38:1, auf Papier 5,95:1; Tannenlicht auf * Nacht 6,84:1. */ --jev-tanne: #1d6b57; --jev-tannenlicht: #8fc9ac; /* * Rot. Auch keins im Brand Book, und Blüte ist keines: Sie liegt bei * Farbton 15° und ist hell — auf der Partnerseite trägt sie jeden Knopf, * ein Nein in Blüte wäre so laut wie der Aufruf zur Bewerbung. Granat liegt * bei 5° und ist dunkel; unterschieden werden die beiden über die * Helligkeit, nicht über den Farbton. Gemessen: Granat auf Weiß 6,54:1 — * fast auf den Punkt so schwer wie Tanne mit 6,38:1, damit keine der * beiden Spalten lauter ist als die andere. Granatlicht auf Nacht 6,48:1. */ --jev-granat: #a8352b; --jev-granatlicht: #f0a596; /* =============================================================== 2 · SEMANTIK — wofür eine Farbe steht, nicht wie sie heißt. Diese Ebene benutzen Bauteile. =============================================================== */ /* Flächen */ --jev-grund: var(--jev-papier); /* Seitengrund */ --jev-flaeche-warm: var(--jev-creme); /* warme Sektionsfläche */ --jev-flaeche-hell: var(--jev-duene); /* helle Sektionsfläche */ --jev-flaeche-kuehl: var(--jev-mondschein); /* kühle Sektionsfläche */ --jev-flaeche-weiss: var(--jev-weiss); /* Fläche ohne Ton, für Tabellen */ --jev-flaeche-tief: var(--jev-lagune); /* dunkle Fläche mit Tiefe */ --jev-flaeche-nacht: var(--jev-nacht); /* dunkelste Fläche */ /* Schrift */ --jev-text: var(--jev-nacht); /* Fließtext */ --jev-text-leise: var(--jev-tonka); /* Sekundärtext, Fußnoten */ --jev-text-titel: var(--jev-lagune); /* Überschriften auf hellem Grund */ --jev-text-invers: var(--jev-duene); /* Text auf dunkler Fläche */ --jev-text-invers-leise: var(--jev-mondschein); /* Signal — sparsam. Buttons, Preise, ein Unterstrich. Nie als Fläche. */ --jev-signal: var(--jev-bluete); --jev-signal-tief: #ef6238; /* Signal im Hover-Zustand */ /* Zustimmung und Ablehnung — Haken und Kreuz. Nie als Fläche. */ --jev-ja: var(--jev-tanne); --jev-ja-invers: var(--jev-tannenlicht); --jev-nein: var(--jev-granat); --jev-nein-invers: var(--jev-granatlicht); /* Linien und Platzhalter */ --jev-rand: color-mix(in srgb, var(--jev-lagune) 14%, transparent); --jev-rand-stark: color-mix(in srgb, var(--jev-lagune) 30%, transparent); --jev-rand-invers: color-mix(in srgb, var(--jev-duene) 38%, transparent); --jev-platzhalter: var(--jev-asche); /* Schriftfamilien */ --jev-schrift-titel: "Milk and Clay", Georgia, serif; --jev-schrift-text: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; /* =============================================================== 3 · KOMPONENTE — je Bauteil, damit Einzelfälle ohne Nebenwirkung angepasst werden können. =============================================================== */ /* Button: Lagune ist die Grundform, Blüte das Signal. */ --jev-knopf-grund: var(--jev-flaeche-tief); --jev-knopf-text: var(--jev-grund); --jev-knopf-grund-hover: color-mix(in srgb, var(--jev-lagune) 85%, #000); --jev-knopf-signal-grund: var(--jev-signal); /* * Weiß auf Blüte, auf ausdrücklichen Wunsch. Der Kontrast beträgt 2,70:1 * und liegt damit unter den geforderten 4,5:1; Nacht ergäbe 4,79:1, sah * aber nicht gut aus. Als offener Punkt vermerkt. */ --jev-knopf-signal-text: var(--jev-weiss); --jev-knopf-signal-hover: var(--jev-signal-tief); --jev-knopf-radius: 999px; --jev-karte-grund: var(--jev-grund); --jev-karte-rand: var(--jev-rand); /* Musterkacheln: Standard ist die Originalpaarung des CD. */ --jev-muster-figur: var(--jev-bluete); --jev-muster-grund: var(--jev-nacht); --jev-muster-kachel: 48px; /* =============================================================== Maße — keine Markenwerte, deshalb sachliche Namen. =============================================================== */ /* Typo-Skala, Verhältnis 1,25 auf 1rem Basis */ --jev-t-xs: 0.8rem; --jev-t-s: 0.9rem; --jev-t-m: 1rem; --jev-t-l: 1.25rem; --jev-t-xl: 1.563rem; --jev-t-2xl: 1.953rem; --jev-t-3xl: 2.441rem; --jev-t-4xl: 3.052rem; /* Abstände, 8er-Rhythmus */ --jev-a-1: 0.25rem; --jev-a-2: 0.5rem; --jev-a-3: 1rem; --jev-a-4: 1.5rem; --jev-a-5: 2.5rem; --jev-a-6: 4rem; --jev-a-7: 6rem; /* * Rand der Bänder, die über die volle Breite laufen — Kopfzeile und * Studio-Finder. Sie folgen nicht der Hülle, denn die ist zentriert und * wandert mit dem Fenster; ein Band braucht eine feste Kante. Der Wert * stammt von der Live-Seite: 50px bei 1440px Fensterbreite. */ --jev-band-rand: 3.125rem; --jev-breite: 1200px; --jev-breite-text: 68ch; --jev-radius: 4px; } /* * =================================================================== * OFFENE PUNKTE — mit dem Kunden zu klären * =================================================================== * * 1. Seitengrund. #fbf6f4 stammt aus dem stg-Aufbau, nicht aus dem Brand * Book. Die Palette der Vorlage nennt keine Farbe für den hellen Grund. * Entweder benennen oder durch Creme/Düne ersetzen. * * 2. Terrakotta #d9804c. Kommt in den Illustrationen und im Jaguar-Muster * vor, steht aber nicht in der Palette der Vorlage. Gehört sie dazu? * * 3. Milk and Clay, kleine Umlaute. Im gelieferten Webfont-Kit sind die * zusammengesetzten Glyphen für ä, ö, ü defekt — es rendern nur die * Punkte, der Grundbuchstabe fehlt (gemessen: 242 Farbpixel oben, * 0 unten; die großen Umlaute Ä/Ö/Ü sind einwandfrei). Umgangen durch * `text-transform: uppercase` auf allen Überschriften, was zugleich der * Display-Typografie des CD entspricht. Beim Anbieter ein korrigiertes * Kit anfragen. * * 4. Milk and Clay ist eine Versalschrift: Kleinbuchstaben bilden dieselben * Glyphen wie Großbuchstaben. Für Fließtext daher ungeeignet — dort steht * Outfit. */