alee/relicario
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

docs(spec): expand Phase 2B to polish foundation + form layout

Browse Source 
Bundles patina palette shift, logo update (translucent gradient gem),
glass-card vocabulary across login/setup/fullscreen, and the original
two-column form layout. Updates relicario-logo.svg and -16.svg to the
patina palette.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
2026-05-02 13:19:54 -04:00
parent d0047e751f
commit d6d07a19c1
3 changed files with 319 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
extension/icons/relicario-logo.svg
View File

@@ -1,79 +1,93 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 240" fill="none">
<defs>
<radialGradient id="redTheca" cx="0.4" cy="0.35">
<stop offset="0%" stop-color="#9a1a1a"/>
<stop offset="100%" stop-color="#3a0a0a"/>
<stop offset="0%" stop-color="#7d2622"/>
<stop offset="100%" stop-color="#2c0d0a"/>
</radialGradient>
<linearGradient id="goldRing" x1="0" x2="1">
<stop offset="0%" stop-color="#d2ab43"/>
<stop offset="50%" stop-color="#f5d97a"/>
<stop offset="100%" stop-color="#7c5719"/>
<stop offset="0%" stop-color="#a88a4a"/>
<stop offset="50%" stop-color="#cdb47a"/>
<stop offset="100%" stop-color="#5a3f12"/>
</linearGradient>
<linearGradient id="goldHi" x1="0" x2="1">
<stop offset="0%" stop-color="#fde9a8"/>
<stop offset="100%" stop-color="#d2ab43"/>
<stop offset="0%" stop-color="#dac8a0"/>
<stop offset="100%" stop-color="#a88a4a"/>
</linearGradient>
<linearGradient id="gemFacetLight" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#dac8a0" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#cdb47a" stop-opacity="0.3"/>
</linearGradient>
<linearGradient id="gemFacetDark" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#6e4d18" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#5a3f12" stop-opacity="0.25"/>
</linearGradient>
<radialGradient id="gemCore" cx="0.4" cy="0.35">
<stop offset="0%" stop-color="#dac8a0" stop-opacity="0.85"/>
<stop offset="60%" stop-color="#b89556" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#7d2622" stop-opacity="0.2"/>
</radialGradient>
</defs>
<!-- Pedestal (compact) -->
<!-- Pedestal -->
<ellipse cx="110" cy="226" rx="44" ry="5" fill="url(#goldRing)"/>
<rect x="78" y="212" width="64" height="14" rx="2" fill="url(#goldRing)"/>
<rect x="98" y="202" width="24" height="12" fill="url(#goldRing)"/>
<ellipse cx="110" cy="208" rx="14" ry="3" fill="#7c5719"/>
<ellipse cx="110" cy="208" rx="14" ry="3" fill="#5a3f12"/>
<ellipse cx="110" cy="202" rx="18" ry="4" fill="url(#goldRing)"/>
<!-- Body, bezel, theca -->
<circle cx="110" cy="130" r="72" fill="url(#goldRing)"/>
<path d="M 110 58 A 72 72 0 0 0 38 130" stroke="#fde9a8" stroke-width="2" fill="none" opacity="0.6"/>
<circle cx="110" cy="130" r="60" fill="#7c5719"/>
<path d="M 110 58 A 72 72 0 0 0 38 130" stroke="#dac8a0" stroke-width="2" fill="none" opacity="0.5"/>
<circle cx="110" cy="130" r="60" fill="#5a3f12"/>
<circle cx="110" cy="130" r="56" fill="url(#redTheca)"/>
<ellipse cx="86" cy="108" rx="16" ry="7" fill="#ffffff" opacity="0.14" transform="rotate(-30 86 108)"/>
<ellipse cx="86" cy="108" rx="16" ry="7" fill="#ffffff" opacity="0.10" transform="rotate(-30 86 108)"/>
<!-- Asterisk gem with pinwheel facets -->
<!-- Asterisk gem with translucent gradient facets -->
<g transform="translate(110, 130)">
<g transform="rotate(0)">
<path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="#f5d97a"/>
<path d="M 0 0 L 4.5 -3.5 C 5.5 -16, 3.5 -29, 0 -36 Z" fill="#8a5e1c"/>
<path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="url(#gemFacetLight)"/>
<path d="M 0 0 L 4.5 -3.5 C 5.5 -16, 3.5 -29, 0 -36 Z" fill="url(#gemFacetDark)"/>
</g>
<g transform="rotate(60)">
<path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="#f5d97a"/>
<path d="M 0 0 L 4.5 -3.5 C 5.5 -16, 3.5 -29, 0 -36 Z" fill="#8a5e1c"/>
<path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="url(#gemFacetLight)"/>
<path d="M 0 0 L 4.5 -3.5 C 5.5 -16, 3.5 -29, 0 -36 Z" fill="url(#gemFacetDark)"/>
</g>
<g transform="rotate(120)">
<path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="#f5d97a"/>
<path d="M 0 0 L 4.5 -3.5 C 5.5 -16, 3.5 -29, 0 -36 Z" fill="#8a5e1c"/>
<path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="url(#gemFacetLight)"/>
<path d="M 0 0 L 4.5 -3.5 C 5.5 -16, 3.5 -29, 0 -36 Z" fill="url(#gemFacetDark)"/>
</g>
<g transform="rotate(180)">
<path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="#f5d97a"/>
<path d="M 0 0 L 4.5 -3.5 C 5.5 -16, 3.5 -29, 0 -36 Z" fill="#8a5e1c"/>
<path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="url(#gemFacetLight)"/>
<path d="M 0 0 L 4.5 -3.5 C 5.5 -16, 3.5 -29, 0 -36 Z" fill="url(#gemFacetDark)"/>
</g>
<g transform="rotate(240)">
<path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="#f5d97a"/>
<path d="M 0 0 L 4.5 -3.5 C 5.5 -16, 3.5 -29, 0 -36 Z" fill="#8a5e1c"/>
<path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="url(#gemFacetLight)"/>
<path d="M 0 0 L 4.5 -3.5 C 5.5 -16, 3.5 -29, 0 -36 Z" fill="url(#gemFacetDark)"/>
</g>
<g transform="rotate(300)">
<path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="#f5d97a"/>
<path d="M 0 0 L 4.5 -3.5 C 5.5 -16, 3.5 -29, 0 -36 Z" fill="#8a5e1c"/>
<path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="url(#gemFacetLight)"/>
<path d="M 0 0 L 4.5 -3.5 C 5.5 -16, 3.5 -29, 0 -36 Z" fill="url(#gemFacetDark)"/>
</g>
<polygon points="0,-6 5.2,-3 5.2,3 0,6 -5.2,3 -5.2,-3" fill="#d2ab43" stroke="#7c5719" stroke-width="0.6"/>
<circle cx="-1.5" cy="-2" r="1.4" fill="#fff3cf"/>
<polygon points="0,-6 5.2,-3 5.2,3 0,6 -5.2,3 -5.2,-3" fill="url(#gemCore)" stroke="#5a3f12" stroke-width="0.5" stroke-opacity="0.6"/>
<circle cx="-1.8" cy="-2.2" r="1.6" fill="#dac8a0" opacity="0.95"/>
<circle cx="1.5" cy="2" r="0.6" fill="#dac8a0" opacity="0.5"/>
</g>
<!-- Hinge collar -->
<rect x="98" y="50" width="24" height="10" rx="2" fill="url(#goldRing)"/>
<line x1="100" y1="55" x2="120" y2="55" stroke="#7c5719" stroke-width="0.8"/>
<line x1="100" y1="55" x2="120" y2="55" stroke="#5a3f12" stroke-width="0.8"/>
<!-- Fleur-de-lis -->
<g transform="translate(110, 50)">
<rect x="-3.5" y="-12" width="7" height="12" fill="url(#goldRing)"/>
<rect x="-16" y="-18" width="32" height="7" rx="1.5" fill="url(#goldRing)"/>
<rect x="-3" y="-19" width="6" height="9" rx="0.8" fill="#7c5719"/>
<rect x="-3" y="-19" width="6" height="9" rx="0.8" fill="#5a3f12"/>
<path d="M 0 -18 Q -8 -36, -4 -54 Q -1 -62, 0 -64 Q 1 -62, 4 -54 Q 8 -36, 0 -18 Z" fill="url(#goldRing)"/>
<path d="M 0 -22 Q -2.5 -36, 0 -52 Q 2.5 -36, 0 -22 Z" fill="#7c5719" opacity="0.55"/>
<path d="M 0 -22 Q -2.5 -36, 0 -52 Q 2.5 -36, 0 -22 Z" fill="#5a3f12" opacity="0.55"/>
<circle cx="0" cy="-66" r="2.5" fill="url(#goldHi)"/>
<path d="M -4 -18 Q -22 -22, -26 -38 Q -22 -50, -16 -50 Q -16 -38, -10 -32 Q -6 -28, -4 -28 Z" fill="url(#goldRing)"/>
<ellipse cx="-25" cy="-44" rx="2" ry="3" fill="#7c5719" opacity="0.4" transform="rotate(-20 -25 -44)"/>
<ellipse cx="-25" cy="-44" rx="2" ry="3" fill="#5a3f12" opacity="0.4" transform="rotate(-20 -25 -44)"/>
<path d="M 4 -18 Q 22 -22, 26 -38 Q 22 -50, 16 -50 Q 16 -38, 10 -32 Q 6 -28, 4 -28 Z" fill="url(#goldRing)"/>
<ellipse cx="25" cy="-44" rx="2" ry="3" fill="#7c5719" opacity="0.4" transform="rotate(20 25 -44)"/>
<ellipse cx="25" cy="-44" rx="2" ry="3" fill="#5a3f12" opacity="0.4" transform="rotate(20 25 -44)"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB