/* VivaPix Design System v2.0 — Token-Ebene ========================================================================== Diese Datei enthaelt ausschliesslich Variablen. Kein Element wird hier gestaltet. Wer eine Farbe, einen Abstand oder einen Radius braucht, nimmt ein Token von hier und schreibt keinen festen Wert in die Komponente. Grundlage: docs/design/design-system.md und die Markenvorgabe design_upload/vivapix_DESIGN.md (Navy, Coral, Turquoise, Violet). Die dort abweichenden Werte (-ink und -strong Varianten) sind keine Willkuer, sondern Kontrastanforderungen — siehe Abschnitt "Farben" unten und den Nachweis in docs/design/design-system.md. Aufbau 1. Schrift 2. Farben (hell) 3. Farben (dunkel) 4. Typografie 5. Abstaende 6. Radien 7. Schatten 8. Bewegung 9. Layout 10. Ebenen (z-index) ========================================================================== */ /* 1. Schrift --------------------------------------------------------------- Geist liegt als Variable Font lokal im Repository (69 KB, SIL OFL, siehe static/fonts/Geist-LICENSE.txt). Kein CDN: eine Fotobox im Eventbetrieb hat manchmal wackliges WLAN, und die Gaestegalerie soll auch dann lesbar sein. Ein einziger Variable Font deckt alle vier Schriftstaerken ab — sieben einzelne Schnitte waeren siebenmal so viele Anfragen. font-display: swap — lieber sofort Systemschrift als eine leere Seite. Das Layout springt dabei leicht; size-adjust haelt den Sprung klein. */ @font-face { font-family: "Geist"; src: url("../fonts/Geist-Variable.dfa48d5a8537.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* 2. Farben — heller Modus ------------------------------------------------- Jede Markenfarbe hat bis zu drei Auspraegungen, weil eine Farbe drei verschiedene Jobs hat und nicht jede Farbe jeden Job kann: --color-x Flaeche, Punkt, Rahmen, Verlauf. Rein dekorativ. --color-x-ink dieselbe Farbe als *Text* auf hellem Grund. --color-x-strong dieselbe Farbe als *Fuellung* unter weisser Schrift. Warum das noetig ist: Coral #FF665C traegt weisse Schrift nur mit 2,87:1, Turquoise #13C6C3 als Text nur mit 2,06:1, Amber #FBBF24 mit 1,57:1. WCAG AA verlangt 4,5:1. Die Markenfarben bleiben deshalb unveraendert dort, wo sie Flaeche sind, und bekommen abgedunkelte Geschwister dort, wo sie Schrift tragen oder Schrift sind. Alle -ink und -strong Werte liegen ueber 4,5:1 gegen #FAFBFD *und* gegen #FFFFFF. Violet #7257E8 ist die einzige Markenfarbe, die beides ohne Abdunkeln kann (4,80:1 gegen den Hintergrund, 4,95:1 unter weisser Schrift) — dort sind Grundton, -ink und -strong deshalb derselbe Wert. --color-x-soft ist die Flaeche fuer Badges und Hinweisboxen: dieselbe Farbe stark aufgehellt, damit -ink darauf lesbar bleibt. */ :root { color-scheme: light; /* Marke — Coral. Die Handlungsfarbe: CTA, Fokus, aktive Zustaende. */ --color-primary: #FF665C; /* Coral — Flaeche, Punkt, Verlauf */ --color-primary-ink: #D13A31; /* 4,60:1 auf Hintergrund */ --color-primary-strong: #D13A31; /* traegt Weiss mit 4,75:1 */ --color-primary-soft: #FFF0ED; --color-primary-violet: #FF8967; /* zweiter Halt im Coral-Verlauf */ /* Akzent — Violet. KI, Technik, Developer. */ --color-accent: #7257E8; --color-accent-ink: #7257E8; /* 4,80:1 — kein Abdunkeln noetig */ --color-accent-strong: #7257E8; /* traegt Weiss mit 4,95:1 */ --color-accent-soft: #F2EEFF; /* Status — Turquoise. Zugleich der B2B-Ton der Marke. */ --color-success: #13C6C3; /* Turquoise — online, fertig */ --color-success-ink: #0E7C7A; /* 4,87:1 */ --color-success-strong: #0E7C7A; /* traegt Weiss mit 5,02:1 */ --color-success-soft: #EAFBFA; --color-warning: #FBBF24; /* Amber — reserviert, verzoegert */ --color-warning-ink: #B45309; /* 4,73:1 */ --color-warning-strong: #B45309; --color-warning-soft: #FEF3D7; --color-error: #EF4444; /* Red — Fehler, offline, Abbruch */ --color-error-ink: #DC2626; /* 4,55:1 */ --color-error-strong: #DC2626; /* traegt Weiss mit 4,83:1 */ --color-error-soft: #FDE8E8; --color-neutral: #949BAB; /* Grau — beendet, inaktiv */ --color-neutral-ink: #5C6478; --color-neutral-soft: #EEF0F5; /* Flaechen */ --color-bg: #FAFBFD; /* Seitenhintergrund */ --color-surface: #FFFFFF; /* Card */ --color-surface-raised: #FFFFFF; /* Dialog, Popover */ --color-surface-sunken: #F1F4F9; /* Bildplatzhalter, Leerzustaende */ --color-surface-inverse: #0B1428; /* Navy Deep — dunkle Baender, Fusszeile */ /* Linien */ --color-border: #E9EDF4; --color-border-strong: #D6DCE8; /* Eingabefelder, Trennung mit Gewicht */ --color-focus: #7257E8; /* Violet — sichtbar auf Coral *und* Teal */ /* Schrift */ --color-text: #111B33; /* Navy — 16,58:1 */ --color-text-muted: #667085; /* 4,82:1 — auch klein noch AA */ --color-text-subtle: #8A93A6; /* nur ab 18px / 14px fett */ --color-text-on-fill: #FFFFFF; /* Schrift auf -strong Flaechen */ --color-text-inverse: #E7EBF3; /* Schrift auf --color-surface-inverse */ /* Bild Der Verlauf, der ueber Bildern liegt, damit weisse Schrift auf einem unbekannten Foto lesbar bleibt. Bilder sind der wichtigste Inhalt der Plattform — der Verlauf verdeckt deshalb so wenig wie moeglich. */ --overlay-image: linear-gradient( to top, rgba(6, 8, 14, 0.72) 0%, rgba(6, 8, 14, 0.38) 32%, rgba(6, 8, 14, 0) 62%); --overlay-scrim: rgba(10, 12, 20, 0.44); /* hinter Dialogen */ --overlay-hover: rgba(10, 12, 20, 0.06); /* Hover auf heller Flaeche */ /* Verlaeufe. Die Vorgabe erlaubt sie nur dezent und verbietet Regenbogenflaechen — deshalb genau zwei Halte je Verlauf. */ --gradient-primary: linear-gradient(135deg, #FF5D63 0%, #FF8B63 100%); --gradient-accent: linear-gradient(135deg, #7257E8 0%, #FF665C 100%); /* Der AI Glow: die drei Markenfarben so schwach, dass keine davon zu benennen ist. Nur hinter Bildern und Heros, nie als Flaeche. */ --gradient-glow: linear-gradient(135deg, rgba(255, 102, 92, 0.17), rgba(114, 87, 232, 0.12), rgba(19, 198, 195, 0.13)); /* Farbe fuer Schattenkerne. Nicht schwarz, sondern das Navy der Marke — dadurch wirken die Schatten weich statt schmutzig. */ --shadow-hue: 222 57% 12%; } /* 2b. Zielgruppen ---------------------------------------------------------- Die Startseite fuehrt Besucher auf zwei Wege, und jeder Weg hat einen eigenen Ton. Das sind bewusst eigene Tokens und nicht die semantischen von oben: --color-success heisst "fertig", nicht "Vermieter". Wer die beiden vermischt, kann spaeter den Status-Gruenton nicht mehr aendern, ohne die B2B-Seite umzufaerben. Der API-Weg ist in der Marke vorgesehen, auf der Startseite aber nur eine Randnotiz — der Ton steht hier trotzdem, damit die Developer-Seiten spaeter nichts erfinden muessen. */ :root { --color-b2c: #FF665C; /* Coral — "Ich plane ein Event" */ --color-b2c-ink: #D13A31; --color-b2c-soft: #FFF0ED; --color-b2b: #13C6C3; /* Teal — "Ich vermiete Fotoboxen" */ --color-b2b-ink: #0E7C7A; --color-b2b-soft: #EAFBFA; --color-api: #7257E8; /* Violet — "Ich entwickle Loesungen" */ --color-api-ink: #7257E8; --color-api-soft: #F2EEFF; } /* 3. Farben — dunkler Modus ------------------------------------------------ Drei Zustaende: ausdruecklich hell, ausdruecklich dunkel, und "wie das System". Die Systemvariante darf eine ausdrueckliche Wahl nie ueberstimmen, deshalb die :not([data-theme="light"])-Absicherung. Die Markenfarben bleiben identisch, nur die Kontraste werden angepasst. Konkret dreht sich das Problem um: auf dem Navy-Grund tragen Coral (6,39:1) und Turquoise (8,65:1) muehelos, dafuer faellt Violet auf 3,71:1 durch. Violet als Text wird deshalb aufgehellt; Violet als Flaeche bleibt, denn Weiss darauf haengt nicht vom Seitenhintergrund ab. */ :root[data-theme="dark"] { color-scheme: dark; --color-primary: #FF665C; --color-primary-ink: #FF665C; /* 6,39:1 auf #0B1428 — unveraendert */ --color-primary-strong: #D13A31; --color-primary-soft: #3A1712; --color-primary-violet: #FF8967; --color-accent: #7257E8; --color-accent-ink: #A08CFF; /* 6,72:1 */ --color-accent-strong: #7257E8; --color-accent-soft: #221A47; --color-success: #13C6C3; --color-success-ink: #13C6C3; /* 8,65:1 — unveraendert nutzbar */ --color-success-strong: #0E7C7A; --color-success-soft: #072B2A; --color-warning: #FBBF24; --color-warning-ink: #FBBF24; /* 11,05:1 */ --color-warning-strong: #92400E; --color-warning-soft: #33260A; --color-error: #EF4444; --color-error-ink: #F87171; /* 6,67:1 */ --color-error-strong: #DC2626; --color-error-soft: #341617; --color-neutral: #6C7488; --color-neutral-ink: #9AA4BA; --color-neutral-soft: #1C2740; --color-bg: #0B1428; /* Navy Deep */ --color-surface: #111B33; /* Navy */ --color-surface-raised: #182444; --color-surface-sunken: #070E1D; --color-surface-inverse: #FAFBFD; --color-border: #22304F; --color-border-strong: #33436A; --color-focus: #A08CFF; --color-text: #E7EBF3; /* 15,05:1 */ --color-text-muted: #9AA4BA; /* 6,72:1 */ --color-text-subtle: #78839B; --color-text-on-fill: #FFFFFF; --color-text-inverse: #111B33; --overlay-image: linear-gradient( to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.42) 32%, rgba(0, 0, 0, 0) 62%); --overlay-scrim: rgba(4, 8, 18, 0.66); --overlay-hover: rgba(255, 255, 255, 0.06); /* Auf dunklem Grund traegt ein Schatten keine Tiefe mehr. Die Ebenen bleiben trotzdem definiert, damit Komponenten nicht umgeschrieben werden muessen — sie werden nur deutlich zurueckgenommen und durch hellere Flaechen (--color-surface-raised) ergaenzt. */ --shadow-hue: 222 70% 2%; /* Zielgruppen: dieselbe Umkehrung wie oben — Coral und Teal tragen auf Navy, Violet muss aufgehellt werden. */ --color-b2c-ink: #FF665C; --color-b2c-soft: #3A1712; --color-b2b-ink: #13C6C3; --color-b2b-soft: #072B2A; --color-api-ink: #A08CFF; --color-api-soft: #221A47; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-primary-ink: #FF665C; --color-primary-strong: #D13A31; --color-primary-soft: #3A1712; --color-accent-ink: #A08CFF; --color-accent-strong: #7257E8; --color-accent-soft: #221A47; --color-success-ink: #13C6C3; --color-success-soft: #072B2A; --color-warning-ink: #FBBF24; --color-warning-strong: #92400E; --color-warning-soft: #33260A; --color-error-ink: #F87171; --color-error-soft: #341617; --color-neutral: #6C7488; --color-neutral-ink: #9AA4BA; --color-neutral-soft: #1C2740; --color-bg: #0B1428; --color-surface: #111B33; --color-surface-raised: #182444; --color-surface-sunken: #070E1D; --color-surface-inverse: #FAFBFD; --color-border: #22304F; --color-border-strong: #33436A; --color-focus: #A08CFF; --color-text: #E7EBF3; --color-text-muted: #9AA4BA; --color-text-subtle: #78839B; --color-text-inverse: #111B33; --overlay-image: linear-gradient( to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.42) 32%, rgba(0, 0, 0, 0) 62%); --overlay-scrim: rgba(4, 8, 18, 0.66); --overlay-hover: rgba(255, 255, 255, 0.06); --shadow-hue: 222 70% 2%; --color-b2c-ink: #FF665C; --color-b2c-soft: #3A1712; --color-b2b-ink: #13C6C3; --color-b2b-soft: #072B2A; --color-api-ink: #A08CFF; --color-api-soft: #221A47; } } /* 4. Typografie ------------------------------------------------------------ Acht Stufen, mehr nicht. Die Zeilenhoehen sind bewusst gestaffelt: grosse Schrift braucht wenig Durchschuss, kleine viel. Die Display- und Hero-Stufen skalieren mit dem Viewport (clamp), damit eine 64px-Ueberschrift auf dem Telefon nicht ueber vier Zeilen laeuft. Ab H2 abwaerts bleiben die Groessen fest — dort ist die Lesbarkeit wichtiger als der Effekt. */ :root { /* Obergrenze 56px, nicht 64: die Vorgabe erlaubt 56-68, aber deutsche Hero-Zeilen sind lang ("auf einem neuen Level"), und bei 64px kippt die zweite Zeile in eine dritte, die den Verlaufstext mittendrin zerreisst. */ --text-display: clamp(2.5rem, 1.7rem + 3.2vw, 3.5rem); /* bis 56 */ --text-hero: clamp(2rem, 1.4rem + 2.4vw, 3rem); /* bis 48 */ --text-h1: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); /* bis 36 */ --text-h2: 1.75rem; /* 28 */ --text-h3: 1.375rem; /* 22 */ --text-body: 1rem; /* 16 */ --text-small: 0.875rem; /* 14 */ --text-caption: 0.75rem; /* 12 */ --leading-display: 1.04; --leading-heading: 1.18; --leading-body: 1.55; --leading-tight: 1.35; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Grosse Schrift wirkt ohne negative Laufweite auseinandergefallen, kleine Schrift mit negativer Laufweite gedraengt. */ --tracking-display: -0.03em; --tracking-heading: -0.02em; --tracking-body: 0; --tracking-caption: 0.04em; /* Grossbuchstaben in Labels */ } /* 5. Abstaende ------------------------------------------------------------- Die Skala aus der Spezifikation: 4 8 12 16 24 32 48 64 96. Alles dazwischen ist ein Fehler, kein Feinschliff. */ :root { --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ } /* 6. Radien ---------------------------------------------------------------- Die Marke darf weicher wirken als eine reine SaaS-Oberflaeche; die Werte folgen der Vorgabe (12 / 18 / 26 / 34). */ :root { --radius-sm: 12px; /* Badges, Eingabefelder, kleine Flaechen */ --radius-md: 18px; /* Cards, Buttons */ --radius-lg: 26px; /* Dialoge, grosse Panels */ --radius-hero: 34px; /* Hero Cards, Titelbilder */ --radius-button: 18px; --radius-pill: 999px; /* Status Badges, runde Schalter */ } /* 7. Schatten -------------------------------------------------------------- Drei Ebenen, wie festgelegt. Jede Ebene besteht aus zwei Schatten: ein enger, fast harter fuer die Kante, ein weiter, sehr weicher fuer die Tiefe. Ein einzelner Schatten sieht immer entweder schmutzig oder flach aus. Die Farbe kommt aus --shadow-hue und ist blaeulich, nicht schwarz. */ :root { --shadow-sm: 0 1px 2px hsl(var(--shadow-hue) / 0.04), 0 4px 12px hsl(var(--shadow-hue) / 0.05); --shadow-md: 0 2px 4px hsl(var(--shadow-hue) / 0.05), 0 12px 28px hsl(var(--shadow-hue) / 0.09); --shadow-lg: 0 4px 8px hsl(var(--shadow-hue) / 0.05), 0 28px 64px hsl(var(--shadow-hue) / 0.14); /* Der Glow unter einem angehobenen Primaerbutton. Kein Schatten im eigentlichen Sinn, sondern Farbe, die aus dem Element austritt. */ --glow-primary: 0 12px 28px rgba(255, 102, 92, 0.28); --glow-accent: 0 12px 28px rgba(114, 87, 232, 0.26); } /* 8. Bewegung -------------------------------------------------------------- Die Dauern aus der Spezifikation. Die Kurven sind bewusst asymmetrisch: etwas, das erscheint, wird schnell schnell und dann langsam langsam (ease-out). Nur der Bildmorph laeuft weich an *und* aus, weil dort die Bewegung selbst der Inhalt ist. */ :root { --duration-hover: 150ms; --duration-dialog: 200ms; --duration-page: 250ms; --duration-morph: 700ms; /* Spezifikation: 600-900 */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* nur fuer Hover-Lift */ --lift-hover: -2px; /* Spezifikation: +2px Lift */ } /* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt weniger Bewegung. Die Zustaende bleiben, nur der Weg dorthin faellt weg — Animationen erklaeren hier Zustaende, also duerfen sie nicht ersatzlos verschwinden, sondern nur sofort fertig sein. */ @media (prefers-reduced-motion: reduce) { :root { --duration-hover: 1ms; --duration-dialog: 1ms; --duration-page: 1ms; --duration-morph: 1ms; --lift-hover: 0px; } } /* 9. Layout ---------------------------------------------------------------- 12 Spalten auf dem Desktop, 8 auf dem Tablet, 4 auf dem Telefon. Die Spaltenzahl selbst steht in der Komponente; hier stehen die Groessen, die ueberall gleich sein muessen. */ :root { --content-width: 1440px; --content-narrow: 880px; /* Formulare, Fliesstext */ --sidebar-width: 264px; --topbar-height: 72px; --gutter: var(--space-5); /* Abstand zwischen Spalten */ --page-padding: var(--space-5); /* Rand der Seite, mobil */ --breakpoint-mobile: 640px; --breakpoint-tablet: 1024px; --breakpoint-desktop: 1440px; } @media (min-width: 1024px) { :root { --page-padding: var(--space-7); } } /* 10. Ebenen --------------------------------------------------------------- Damit nicht irgendwo z-index: 9999 auftaucht. */ :root { --z-base: 0; --z-sticky: 100; /* Topbar, Filterleiste */ --z-drawer: 200; --z-scrim: 300; --z-dialog: 310; --z-toast: 400; --z-tooltip: 500; }