feat: Flimmer-Branding mit Logo, Icons und Design-Tokens

Logo als SVG in drei Varianten (Icon, Icon+Wortmarke horizontal, monochrom); die Wortmarke ist als Pfad konstruiert und braucht daher keine installierte Schrift. Daraus generiert scripts/generate-icons.ts Favicon (SVG + ICO), PWA-Icons, Maskable-Icons, Apple-Touch-Icon und OG-Bild. Die Farbwelt liegt als CSS-Variablen in globals.css und wird ueber @theme inline an Tailwind durchgereicht — Dark/Light und spaetere Themes bauen darauf auf. Alle Kombinationen erfuellen WCAG AA.
2026-09-01 18:26:21 +02:00
parent 0bdfd66c93
commit 488b99f7a1
20 changed files with 704 additions and 0 deletions
@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128" role="img" aria-labelledby="flimmer-icon-title">
+  <title id="flimmer-icon-title">Flimmer</title>
+  <defs>
+    <linearGradient id="flGlow" x1="20" y1="24" x2="108" y2="100" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ffc46b"/>
+      <stop offset="0.38" stop-color="#ffb454"/>
+      <stop offset="1" stop-color="#ff4d9d"/>
+    </linearGradient>
+    <radialGradient id="flHalo" cx="64" cy="58" r="52" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ffc46b" stop-opacity="0.85"/>
+      <stop offset="0.42" stop-color="#ff8a70" stop-opacity="0.4"/>
+      <stop offset="0.75" stop-color="#ff4d9d" stop-opacity="0.16"/>
+      <stop offset="1" stop-color="#ff4d9d" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="flPlate" x1="0" y1="0" x2="128" y2="128" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#191330"/>
+      <stop offset="1" stop-color="#0a0810"/>
+    </linearGradient>
+    <filter id="flBloom" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="7"/>
+    </filter>
+    <filter id="flBloomTight" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="3.2"/>
+    </filter>
+  </defs>
+
+  <!-- Grundplatte: sehr dunkles Blauviolett -->
+  <rect width="128" height="128" rx="30" fill="url(#flPlate)"/>
+
+  <!-- Warmes Flimmern, das aus dem Bildschirm heraus strahlt -->
+  <ellipse cx="64" cy="58" rx="52" ry="42" fill="url(#flHalo)" filter="url(#flBloom)" opacity="0.75"/>
+
+  <!-- Bloom des Bildschirmrahmens -->
+  <rect x="22" y="26" width="84" height="64" rx="18" fill="none"
+        stroke="url(#flGlow)" stroke-width="8" filter="url(#flBloom)" opacity="0.85"/>
+
+  <!-- Bildschirm -->
+  <rect x="22" y="26" width="84" height="64" rx="18" fill="#0b0912" fill-opacity="0.72"
+        stroke="url(#flGlow)" stroke-width="7"/>
+
+  <!-- Play-Dreieck, leicht nach rechts versetzt (optische Mitte) -->
+  <path d="M55.5 45.5 L80 58 L55.5 70.5 Z" fill="url(#flGlow)" stroke="url(#flGlow)"
+        stroke-width="7" stroke-linejoin="round" stroke-linecap="round"
+        filter="url(#flBloomTight)" opacity="0.7"/>
+  <path d="M55.5 45.5 L80 58 L55.5 70.5 Z" fill="url(#flGlow)" stroke="url(#flGlow)"
+        stroke-width="6.5" stroke-linejoin="round" stroke-linecap="round"/>
+
+  <!-- Standfuß — die Flimmerkiste steht -->
+  <path d="M64 90 V101 M49 105.5 H79" stroke="url(#flGlow)" stroke-width="6.5"
+        stroke-linecap="round" stroke-opacity="0.62"/>
+</svg>