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.
This commit is contained in:
Florian Wilde
@@ -0,0 +1,38 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128" role="img" aria-labelledby="flimmer-maskable-title">
|
||||
<title id="flimmer-maskable-title">Flimmer</title>
|
||||
<!-- Maskable Icon: die Bildmarke sitzt vollständig in der inneren
|
||||
Sicherheitszone (80 %), die Grundplatte läuft randlos durch. -->
|
||||
<defs>
|
||||
<linearGradient id="flMskGlow" x1="32" y1="34" x2="96" y2="94" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#ffc46b"/>
|
||||
<stop offset="0.38" stop-color="#ffb454"/>
|
||||
<stop offset="1" stop-color="#ff4d9d"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="flMskHalo" cx="64" cy="60" r="40" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#ffc46b" stop-opacity="0.8"/>
|
||||
<stop offset="0.45" stop-color="#ff8a70" stop-opacity="0.36"/>
|
||||
<stop offset="1" stop-color="#ff4d9d" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="flMskPlate" 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="flMskBloom" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="5"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<rect width="128" height="128" fill="url(#flMskPlate)"/>
|
||||
<ellipse cx="64" cy="60" rx="40" ry="32" fill="url(#flMskHalo)" filter="url(#flMskBloom)" opacity="0.8"/>
|
||||
|
||||
<g transform="translate(64 64) scale(0.74) translate(-64 -62)">
|
||||
<rect x="22" y="26" width="84" height="64" rx="18" fill="none"
|
||||
stroke="url(#flMskGlow)" stroke-width="8.5" filter="url(#flMskBloom)" opacity="0.8"/>
|
||||
<rect x="22" y="26" width="84" height="64" rx="18" fill="#0b0912" fill-opacity="0.6"
|
||||
stroke="url(#flMskGlow)" stroke-width="7.5"/>
|
||||
<path d="M55.5 45.5 L80 58 L55.5 70.5 Z" fill="url(#flMskGlow)" stroke="url(#flMskGlow)"
|
||||
stroke-width="7" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
<path d="M64 90 V101 M49 105.5 H79" stroke="url(#flMskGlow)" stroke-width="7"
|
||||
stroke-linecap="round" stroke-opacity="0.62"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -0,0 +1,53 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 470 128" width="470" height="128" role="img" aria-labelledby="flimmer-logo-title">
|
||||
<title id="flimmer-logo-title">Flimmer</title>
|
||||
<defs>
|
||||
<linearGradient id="flMarkGlow" x1="20" y1="24" x2="108" y2="102" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#ffc46b"/>
|
||||
<stop offset="0.38" stop-color="#ffb454"/>
|
||||
<stop offset="1" stop-color="#ff4d9d"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="flLogoGlow" x1="148" y1="24" x2="440" y2="108" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#ffc46b"/>
|
||||
<stop offset="0.34" stop-color="#ffb454"/>
|
||||
<stop offset="1" stop-color="#ff4d9d"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="flLogoHalo" cx="64" cy="58" r="52" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#ffc46b" stop-opacity="0.55"/>
|
||||
<stop offset="0.45" stop-color="#ff8a70" stop-opacity="0.26"/>
|
||||
<stop offset="1" stop-color="#ff4d9d" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<filter id="flLogoBloom" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Bildmarke (ohne Grundplatte, damit sie auf jedem Untergrund sitzt) -->
|
||||
<ellipse cx="64" cy="58" rx="50" ry="40" fill="url(#flLogoHalo)" filter="url(#flLogoBloom)"/>
|
||||
<rect x="22" y="26" width="84" height="64" rx="18" fill="none"
|
||||
stroke="url(#flMarkGlow)" stroke-width="8" filter="url(#flLogoBloom)" opacity="0.7"/>
|
||||
<rect x="22" y="26" width="84" height="64" rx="18" fill="none"
|
||||
stroke="url(#flMarkGlow)" stroke-width="7"/>
|
||||
<path d="M55.5 45.5 L80 58 L55.5 70.5 Z" fill="url(#flMarkGlow)" stroke="url(#flMarkGlow)"
|
||||
stroke-width="6.5" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
<path d="M64 90 V101 M49 105.5 H79" stroke="url(#flMarkGlow)" stroke-width="6.5"
|
||||
stroke-linecap="round" stroke-opacity="0.62"/>
|
||||
|
||||
<!-- Wortmarke -->
|
||||
<g transform="translate(148 21) scale(0.72)">
|
||||
<g transform="translate(0 8)" fill="none" stroke="url(#flLogoGlow)" stroke-width="15"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 100 V10 H62"/>
|
||||
<path d="M14 54 H52"/>
|
||||
<path d="M84 100 V6"/>
|
||||
<path d="M106 100 V46"/>
|
||||
<path d="M128 100 V64 Q128 46 146 46 Q164 46 164 64 V100"/>
|
||||
<path d="M164 64 Q164 46 182 46 Q200 46 200 64 V100"/>
|
||||
<path d="M218 100 V64 Q218 46 236 46 Q254 46 254 64 V100"/>
|
||||
<path d="M254 64 Q254 46 272 46 Q290 46 290 64 V100"/>
|
||||
<path d="M344.5 91.8 A29 19.5 0 1 1 366 73 H308"/>
|
||||
<path d="M392 100 V46"/>
|
||||
<path d="M392 64 Q392 46 414 46"/>
|
||||
</g>
|
||||
<circle cx="106" cy="30" r="7.5" fill="url(#flLogoGlow)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@@ -0,0 +1,26 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 470 128" width="470" height="128" role="img" aria-labelledby="flimmer-mono-title" fill="currentColor">
|
||||
<title id="flimmer-mono-title">Flimmer</title>
|
||||
<!-- Monochrome Variante: nimmt die Textfarbe des Kontextes an (currentColor).
|
||||
Kein Verlauf, kein Glühen — für Stempel, Fax, Prägung, E-Mail-Footer. -->
|
||||
<g stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="22" y="26" width="84" height="64" rx="18" stroke-width="7"/>
|
||||
<path d="M55.5 45.5 L80 58 L55.5 70.5 Z" fill="currentColor" stroke-width="6.5"/>
|
||||
<path d="M64 90 V101 M49 105.5 H79" stroke-width="6.5"/>
|
||||
<g transform="translate(148 21) scale(0.72)">
|
||||
<g transform="translate(0 8)" stroke-width="15">
|
||||
<path d="M14 100 V10 H62"/>
|
||||
<path d="M14 54 H52"/>
|
||||
<path d="M84 100 V6"/>
|
||||
<path d="M106 100 V46"/>
|
||||
<path d="M128 100 V64 Q128 46 146 46 Q164 46 164 64 V100"/>
|
||||
<path d="M164 64 Q164 46 182 46 Q200 46 200 64 V100"/>
|
||||
<path d="M218 100 V64 Q218 46 236 46 Q254 46 254 64 V100"/>
|
||||
<path d="M254 64 Q254 46 272 46 Q290 46 290 64 V100"/>
|
||||
<path d="M344.5 91.8 A29 19.5 0 1 1 366 73 H308"/>
|
||||
<path d="M392 100 V46"/>
|
||||
<path d="M392 64 Q392 46 414 46"/>
|
||||
</g>
|
||||
<circle cx="106" cy="30" r="7.5" fill="currentColor" stroke="none"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,28 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 118" width="432" height="118" role="img" aria-labelledby="flimmer-wordmark-title">
|
||||
<title id="flimmer-wordmark-title">Flimmer</title>
|
||||
<defs>
|
||||
<linearGradient id="flWordGlow" x1="0" y1="10" x2="418" y2="108" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#ffc46b"/>
|
||||
<stop offset="0.38" stop-color="#ffb454"/>
|
||||
<stop offset="1" stop-color="#ff4d9d"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Geometrisch konstruierte, leicht gerundete Sans — als Pfade, damit die
|
||||
Wortmarke ohne installierte Schrift überall identisch aussieht.
|
||||
Versalhöhe 90, x-Höhe 54, Strichstärke 15, runde Abschlüsse. -->
|
||||
<g transform="translate(0 8)" fill="none" stroke="url(#flWordGlow)" stroke-width="15"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 100 V10 H62"/>
|
||||
<path d="M14 54 H52"/>
|
||||
<path d="M84 100 V6"/>
|
||||
<path d="M106 100 V46"/>
|
||||
<path d="M128 100 V64 Q128 46 146 46 Q164 46 164 64 V100"/>
|
||||
<path d="M164 64 Q164 46 182 46 Q200 46 200 64 V100"/>
|
||||
<path d="M218 100 V64 Q218 46 236 46 Q254 46 254 64 V100"/>
|
||||
<path d="M254 64 Q254 46 272 46 Q290 46 290 64 V100"/>
|
||||
<path d="M344.5 91.8 A29 19.5 0 1 1 366 73 H308"/>
|
||||
<path d="M392 100 V46"/>
|
||||
<path d="M392 64 Q392 46 414 46"/>
|
||||
</g>
|
||||
<circle cx="106" cy="30" r="7.5" fill="url(#flWordGlow)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Reference in New Issue
Block a user