Update branding guidelines and assets

Adds a comprehensive `BRAND_GUIDELINES.md` file detailing brand assets, color palettes, and typography. This commit also introduces multiple SVG assets for various logo usages (icon, horizontal, dark mode), updates the main `layout.tsx` metadata, and adds the necessary component files (`LogoIcon.tsx`, `LogoHorizontal.tsx`, etc.) to support these new assets.
2026-05-11 22:59:03 +02:00
parent dc5b40ff6e
commit 08794eae05
13 changed files with 641 additions and 5 deletions
@@ -0,0 +1,58 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
+  <title id="title">TimeToLeave app icon</title>
+  <desc id="desc">An icon-only TimeToLeave mark: a violet and magenta melting clock on a dark rounded-square background, flowing into a right arrow.</desc>
+  <defs>
+    <radialGradient id="iconBg" cx="50%" cy="36%" r="76%">
+      <stop offset="0%" stop-color="#17112A"/>
+      <stop offset="55%" stop-color="#090816"/>
+      <stop offset="100%" stop-color="#03030A"/>
+    </radialGradient>
+    <linearGradient id="iconMelt" x1="205" y1="170" x2="840" y2="745" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#8B5CF6"/>
+      <stop offset="40%" stop-color="#B23CFF"/>
+      <stop offset="72%" stop-color="#D946EF"/>
+      <stop offset="100%" stop-color="#FF2D8D"/>
+    </linearGradient>
+    <filter id="iconGlow" x="-25%" y="-25%" width="150%" height="150%">
+      <feGaussianBlur stdDeviation="9" result="blur"/>
+      <feColorMatrix in="blur" type="matrix" values="0.72 0 0 0 0.26 0 0.18 0 0 0.92 0 0 0.34 0 1 0 0 0 0.35 0" result="glow"/>
+      <feMerge>
+        <feMergeNode in="glow"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <style>
+      .iconStroke { stroke: url(#iconMelt); stroke-width: 56; stroke-linecap: round; stroke-linejoin: round; }
+      .iconTick { stroke: #F4F1EA; stroke-width: 16; stroke-linecap: round; opacity: 0.96; }
+      .iconHand { stroke: #F4F1EA; stroke-width: 22; stroke-linecap: round; }
+    </style>
+  </defs>
+
+  <rect width="1024" height="1024" rx="218" fill="url(#iconBg)"/>
+
+  <g filter="url(#iconGlow)">
+    <!-- Simplified app-icon melting clock -->
+    <path class="iconStroke" d="M266 544 C254 478 271 406 316 350 C372 280 456 246 543 256 C644 268 724 349 738 451 C744 495 737 535 731 559 C726 585 738 604 762 612 C790 621 793 582 815 578 C842 574 850 611 836 642 C826 664 811 674 790 671"/>
+    <path class="iconStroke" d="M266 544 C251 589 263 628 303 632 C339 635 324 578 361 578 C397 578 385 653 430 653 C473 653 463 590 508 590 C551 590 548 671 602 698 C671 734 757 712 821 668"/>
+    <path class="iconStroke" d="M430 653 C428 707 429 753 449 753 C470 753 469 708 474 662"/>
+    <path class="iconStroke" d="M821 668 C855 643 890 626 928 615"/>
+    <path d="M897 564 L1010 609 L916 687 L928 636 Z" fill="#FF2D8D"/>
+  </g>
+
+  <!-- Minimal face details for small-size legibility -->
+  <g>
+    <line class="iconTick" x1="512" y1="326" x2="512" y2="354"/>
+    <line class="iconTick" x1="640" y1="381" x2="663" y2="358"/>
+    <line class="iconTick" x1="704" y1="514" x2="737" y2="514"/>
+    <line class="iconTick" x1="512" y1="649" x2="512" y2="680"/>
+    <line class="iconTick" x1="388" y1="640" x2="411" y2="617"/>
+    <line class="iconTick" x1="318" y1="514" x2="351" y2="514"/>
+    <line class="iconTick" x1="388" y1="388" x2="411" y2="411"/>
+  </g>
+
+  <g>
+    <line class="iconHand" x1="512" y1="514" x2="512" y2="394"/>
+    <line class="iconHand" x1="512" y1="514" x2="631" y2="590"/>
+    <circle cx="512" cy="514" r="29" fill="#F4F1EA"/>
+  </g>
+</svg>