Skip to content

Commit bd10475

Browse files
ccross2claude
ccross2
and
claude
committed
brand: replace Esver hero glyph with V4 crystal mark + circuit pattern
The placeholder Ethereum-esque diamond glyph is replaced with the official Esver OS 6-vertex crystal mark (V4 neon variant). The crystal geometry is faithfully translated from the JSX source using theme-aware CSS variables. Added a circular circuit board pattern behind the crystal in the hero section — concentric broken rings with nodes and traces that fade from center outward, creating a schematic-magitek atmosphere. Container opacity at 10% for subtlety. - HeroGlyph.svelte: V4 crystal with construction lines, vertex nodes, inner radiating lines, neon edge glow, core bloom. Thicker strokes for visibility. - ProductHero.svelte: Circuit SVG positioned behind glyph (esver page only), radial gradient mask for center-to-edge fade. - static/esver-mark.svg: Standalone crystal mark asset (512px, neon). - CLAUDE.md: Document design decisions, trade-offs, known limitations. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 5f18e5a commit bd10475

File tree

4 files changed

+259
-65
lines changed

4 files changed

+259
-65
lines changed

‎CLAUDE.md‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -353,7 +353,7 @@ The original site was pure monochrome (black/white) with a Three.js 3D wireframe
353353
### Component Inventory (new in redesign)
354354
| Component | Purpose | Status |
355355
|-----------|---------|--------|
356-
| `HeroGlyph.svelte` | Animated SVG line-art per product hero | Active, 5 variants |
356+
| `HeroGlyph.svelte` | Animated SVG line-art per product hero | Active, 5 variants (esver = V4 crystal mark) |
357357
| `Icon.svelte` | 9 thin-line SVG icon glyphs | Active |
358358
| `StatusBar.svelte` | Bottom status bar | Active |
359359
| `StackDiagram.svelte` | Three-product convergence diagram | Active (homepage) |
@@ -408,6 +408,7 @@ The site had no logo mark (text-only "SOVREN" wordmark), the dark mode was a bro
408408
| `brand/x-banner-founder.svg/.png` | X banner for `@TheCesarCross` |
409409
| `brand/preview.html` | Brand kit reference — all variants, scale tests, nav mockups |
410410
| `brand/color-study.html` | Color theory rationale — emotional arc, text warmth, token system |
411+
| `static/esver-mark.svg` | Esver OS crystal mark V4 (neon variant, 512px, hardcoded colors) |
411412

412413
## Design Decisions (2026-03-18 Brand v3 Integration)
413414

@@ -512,6 +513,36 @@ node scripts/daily-post.js --add "text" --category thesis # Append new post
512513

513514
---
514515

516+
## Design Decisions (2026-04-01 Esver Crystal Mark V4)
517+
518+
### Rationale
519+
The Esver OS product page used a placeholder "Magicite crystal" glyph (Ethereum-esque diamond with rotating rings). The V4 crystal mark — a 6-vertex elongated crystal with construction lines, vertex nodes, radiating inner lines, and a glowing core — was designed as the official Esver OS logo. This replaces the placeholder with the actual brand mark, and adds a circular circuit board pattern behind it as ambient hero decoration.
520+
521+
### What Changed
522+
1. **HeroGlyph esver variant** — Replaced the Ethereum-esque diamond with the V4 6-vertex crystal geometry. Faithful translation of the JSX source (`esver-logo-v4.jsx`) into theme-aware SVG using `var(--accent)`, `var(--accent-light)`, `var(--accent-peak)` for automatic light/dark mode support. Progressive detail (construction lines, vertex nodes, mid-edge nodes, neon edge glow, core bloom) matches the original design.
523+
2. **Circular circuit pattern** — Added to `ProductHero.svelte` as a positioned SVG behind the crystal glyph (esver page only). Concentric broken rings with circuit nodes, connector lines, and chevron traces. Radial gradient mask fades the circuit from center outward (strongest near crystal, dissolving at edges). Container opacity at 10% for subtlety.
524+
3. **Crystal mark SVG** — `static/esver-mark.svg` added as a standalone asset (512px canonical neon variant).
525+
4. **Glyph label** — Changed from `MAGICITE_CORE: ACTIVE` to `ESVER_MARK: V4 · CRYSTAL_ACTIVE`.
526+
527+
### Trade-offs
528+
- **Inline SVG circuit pattern vs raster image** — Circuit is ~80 lines of SVG in ProductHero. Could be extracted to a component, but it's only used once and the SVG needs the radial gradient mask which is simpler inline. If other pages need similar patterns, extract to a shared component.
529+
- **Circuit at 10% opacity** — Deliberately very subtle on the warm bone background. On dark mode (violet atmosphere) it may be more or less visible — dark mode QA still needed.
530+
- **Theme-aware glyph vs static SVG** — The glyph uses CSS variables for all colors, so it adapts to light/dark mode. The standalone `static/esver-mark.svg` uses hardcoded neon colors (for use as a standalone asset/favicon/OG image).
531+
- **Progressive detail from JSX** — The website glyph renders at one size (hero), so all detail levels are shown. The NixOS integration uses `rsvg-convert` from the canonical SVG which lacks the size-specific detail dropping. For icon sizes (16-48px), the pre-rendered PNGs in `esver-os/assets/logo/png/` are generated from size-specific SVGs via ImageMagick.
532+
533+
### Expected Benefits
534+
- Official brand mark replaces placeholder artwork
535+
- Circuit pattern adds depth to the schematic magitek aesthetic without competing with content
536+
- Theme-aware SVG artwork swaps cleanly with dark mode
537+
- Canonical SVG source in esver-os repo enables NixOS build-time PNG generation
538+
539+
### Known Limitations
540+
- Dark mode not visually tested with the new crystal glyph or circuit pattern
541+
- Circuit pattern is esver-page only — other product heroes unchanged
542+
- OG image does not include the crystal mark (satori limitation, same as hexagonal knot)
543+
- Circuit pattern at 10% may be invisible on some displays — acceptable as ambient texture
544+
- The sized SVGs in `esver-os/assets/logo/sized/` have progressive detail for each size, but the NixOS `rsvg-convert` derivation uses the single canonical 512px SVG for all sizes
545+
515546
## Backlog (external systems — not actionable from this repo)
516547

517548
These require access to external dashboards, registrars, or depend on work that doesn't exist yet:
@@ -527,6 +558,7 @@ These require access to external dashboards, registrars, or depend on work that
527558
- Update `@TheCesarCross` bio: "Augmentum OS" → "Esver OS"
528559

529560
### Completed
561+
- [x] Esver crystal mark V4 — replaced placeholder glyph with official 6-vertex crystal, added circuit pattern hero decoration, crystal mark SVG as static asset (2026-04-01)
530562
- [x] Daily content queue system — 30 thesis posts, auto-post via cron at 10 AM ET, Twitter API v2 (2026-03-28)
531563
- [x] Brand v3 integration — nav mark, `.btn-peak` CTA class, peak accent on awakening CTAs, OG image regenerated (2026-03-18)
532564
- [x] Brand system v3 — hexagonal knot mark, violet atmosphere dark mode, peak state accent, warm text (2026-03-18)

‎src/lib/HeroGlyph.svelte‎

Lines changed: 70 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -61,88 +61,94 @@
6161
</svg>
6262

6363
{:else if id === 'esver'}
64-
<!-- Magicite crystal — Esper essence, Ethereum-esque diamond -->
64+
<!-- Esver crystal mark — V4 6-vertex crystal, official logo -->
6565
<svg viewBox="0 0 400 520" fill="none" class="glyph glyph--drift">
6666
<defs>
6767
<filter id="glow-e" x="-50%" y="-50%" width="200%" height="200%">
6868
<feGaussianBlur stdDeviation="6" result="blur" />
6969
<feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
7070
</filter>
71-
<filter id="glow-e-soft" x="-50%" y="-50%" width="200%" height="200%">
72-
<feGaussianBlur stdDeviation="12" result="blur" />
71+
<filter id="glow-e-soft" x="-100%" y="-100%" width="300%" height="300%">
72+
<feGaussianBlur stdDeviation="14" result="blur" />
7373
<feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
7474
</filter>
75-
<linearGradient id="crystal-fill" x1="0" y1="0" x2="0" y2="1">
76-
<stop offset="0%" stop-color="var(--accent)" stop-opacity="0.06" />
77-
<stop offset="50%" stop-color="var(--accent)" stop-opacity="0.12" />
78-
<stop offset="100%" stop-color="var(--accent)" stop-opacity="0.03" />
79-
</linearGradient>
75+
<filter id="glow-e-bloom" x="-100%" y="-100%" width="300%" height="300%">
76+
<feGaussianBlur in="SourceGraphic" stdDeviation="9" />
77+
</filter>
78+
<radialGradient id="core-grad-e" cx="50%" cy="52%" r="40%">
79+
<stop offset="0%" stop-color="var(--accent-peak)" stop-opacity="1" />
80+
<stop offset="25%" stop-color="var(--accent-light)" stop-opacity="0.7" />
81+
<stop offset="60%" stop-color="var(--accent)" stop-opacity="0.3" />
82+
<stop offset="100%" stop-color="var(--accent)" stop-opacity="0" />
83+
</radialGradient>
8084
</defs>
8185

82-
<!-- Ambient glow behind crystal -->
83-
<ellipse cx="200" cy="220" rx="80" ry="120" fill="var(--accent)" opacity="0.04" filter="url(#glow-e-soft)" />
84-
85-
<!-- Outer energy ring — slow rotate -->
86-
<g class="spin-slow" style="transform-origin:200px 220px">
87-
<circle cx="200" cy="220" r="180" stroke="var(--accent)" stroke-width="1" opacity="0.12" stroke-dasharray="3 8" />
86+
<!-- Neon edge glow (blurred silhouette) -->
87+
<g filter="url(#glow-e)" opacity="0.35">
88+
<line x1="200" y1="44" x2="66" y2="195" stroke="var(--accent-light)" stroke-width="7" stroke-linecap="round" />
89+
<line x1="200" y1="44" x2="334" y2="195" stroke="var(--accent-peak)" stroke-width="7" stroke-linecap="round" />
90+
<line x1="66" y1="195" x2="91" y2="305" stroke="var(--accent)" stroke-width="6.5" stroke-linecap="round" />
91+
<line x1="334" y1="195" x2="309" y2="305" stroke="var(--accent-light)" stroke-width="6.5" stroke-linecap="round" />
92+
<line x1="91" y1="305" x2="200" y2="456" stroke="var(--accent)" stroke-width="6.5" stroke-linecap="round" />
93+
<line x1="309" y1="305" x2="200" y2="456" stroke="var(--accent)" stroke-width="6.5" stroke-linecap="round" />
8894
</g>
89-
<g class="spin-slow-reverse" style="transform-origin:200px 220px">
90-
<circle cx="200" cy="220" r="155" stroke="var(--accent)" stroke-width="1" opacity="0.08" stroke-dasharray="2 12" />
91-
</g>
92-
93-
<!-- Crystal body — upper half (Ethereum-esque) -->
94-
<polygon points="200,30 310,200 200,260 90,200" fill="url(#crystal-fill)" stroke="var(--accent)" stroke-width="2.5" opacity="0.5" />
95-
<!-- Crystal body — lower half -->
96-
<polygon points="200,260 310,200 200,430 90,200" fill="url(#crystal-fill)" stroke="var(--accent)" stroke-width="2.5" opacity="0.45" />
9795

98-
<!-- Inner facet — upper -->
99-
<polygon points="200,65 280,195 200,240 120,195" stroke="var(--accent)" stroke-width="1.5" opacity="0.3" fill="none" />
100-
<!-- Inner facet — lower -->
101-
<polygon points="200,240 280,195 200,395 120,195" stroke="var(--accent)" stroke-width="1.5" opacity="0.25" fill="none" />
96+
<!-- Construction lines (schematic detail) -->
97+
<g stroke-opacity="0.2">
98+
<line x1="200" y1="44" x2="200" y2="15" stroke="var(--accent)" stroke-width="1.2" />
99+
<line x1="200" y1="456" x2="200" y2="485" stroke="var(--accent)" stroke-width="1.2" />
100+
<line x1="66" y1="195" x2="37" y2="195" stroke="var(--accent)" stroke-width="1.2" />
101+
<line x1="334" y1="195" x2="363" y2="195" stroke="var(--accent)" stroke-width="1.2" />
102+
<line x1="91" y1="305" x2="68" y2="305" stroke="var(--accent)" stroke-width="1" />
103+
<line x1="309" y1="305" x2="332" y2="305" stroke="var(--accent)" stroke-width="1" />
104+
</g>
102105

103-
<!-- Center horizontal line (the "waist") -->
104-
<line x1="90" y1="200" x2="310" y2="200" stroke="var(--accent)" stroke-width="2.5" opacity="0.4" />
106+
<!-- Back edges (depth) -->
107+
<g opacity="0.15">
108+
<line x1="200" y1="44" x2="334" y2="195" stroke="var(--accent)" stroke-width="1.8" stroke-linecap="round" />
109+
<line x1="334" y1="195" x2="309" y2="305" stroke="var(--accent)" stroke-width="1.6" stroke-linecap="round" />
110+
<line x1="309" y1="305" x2="200" y2="456" stroke="var(--accent)" stroke-width="1.6" stroke-linecap="round" />
111+
</g>
105112

106-
<!-- Vertical axis -->
107-
<line x1="200" y1="30" x2="200" y2="430" stroke="var(--accent)" stroke-width="1" opacity="0.15" />
113+
<!-- Outer edges — front face silhouette -->
114+
<line x1="200" y1="44" x2="66" y2="195" stroke="var(--accent)" stroke-width="3.5" stroke-linecap="round" />
115+
<line x1="200" y1="44" x2="334" y2="195" stroke="var(--accent-light)" stroke-width="3.5" stroke-linecap="round" />
116+
<line x1="66" y1="195" x2="91" y2="305" stroke="var(--accent)" stroke-width="3" stroke-linecap="round" />
117+
<line x1="334" y1="195" x2="309" y2="305" stroke="var(--accent-light)" stroke-width="3" stroke-linecap="round" />
118+
<line x1="91" y1="305" x2="200" y2="456" stroke="var(--accent)" stroke-width="3" stroke-linecap="round" />
119+
<line x1="309" y1="305" x2="200" y2="456" stroke="var(--accent-light)" stroke-width="3" stroke-linecap="round" />
120+
121+
<!-- Inner radiating lines (center to all vertices) -->
122+
<g opacity="0.25">
123+
<line x1="200" y1="258" x2="200" y2="44" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" />
124+
<line x1="200" y1="258" x2="200" y2="456" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" />
125+
<line x1="200" y1="258" x2="66" y2="195" stroke="var(--accent)" stroke-width="1.8" stroke-linecap="round" />
126+
<line x1="200" y1="258" x2="334" y2="195" stroke="var(--accent)" stroke-width="1.8" stroke-linecap="round" />
127+
<line x1="200" y1="258" x2="91" y2="305" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" />
128+
<line x1="200" y1="258" x2="309" y2="305" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" />
129+
</g>
108130

109-
<!-- Upper facet lines (left) -->
110-
<line x1="200" y1="30" x2="90" y2="200" stroke="var(--accent)" stroke-width="1" opacity="0.2" />
111-
<line x1="200" y1="65" x2="120" y2="195" stroke="var(--accent)" stroke-width="1" opacity="0.15" />
112-
<!-- Upper facet lines (right) -->
113-
<line x1="200" y1="30" x2="310" y2="200" stroke="var(--accent)" stroke-width="1" opacity="0.2" />
114-
<line x1="200" y1="65" x2="280" y2="195" stroke="var(--accent)" stroke-width="1" opacity="0.15" />
131+
<!-- Vertex nodes -->
132+
<circle cx="200" cy="44" r="4.6" fill="var(--accent)" opacity="0.4" />
133+
<circle cx="200" cy="456" r="4.6" fill="var(--accent)" opacity="0.4" />
134+
<circle cx="66" cy="195" r="4.6" fill="var(--accent)" opacity="0.4" />
135+
<circle cx="334" cy="195" r="4.6" fill="var(--accent)" opacity="0.4" />
136+
<circle cx="91" cy="305" r="3.9" fill="var(--accent)" opacity="0.3" />
137+
<circle cx="309" cy="305" r="3.9" fill="var(--accent)" opacity="0.3" />
115138

116-
<!-- Cross facet lines -->
117-
<line x1="145" y1="115" x2="255" y2="115" stroke="var(--accent)" stroke-width="1" opacity="0.1" />
118-
<line x1="120" y1="155" x2="280" y2="155" stroke="var(--accent)" stroke-width="1" opacity="0.08" />
119-
<line x1="120" y1="280" x2="280" y2="280" stroke="var(--accent)" stroke-width="1" opacity="0.06" />
120-
<line x1="150" y1="340" x2="250" y2="340" stroke="var(--accent)" stroke-width="1" opacity="0.05" />
139+
<!-- Mid-edge nodes -->
140+
<circle cx="133" cy="120" r="2.8" fill="var(--accent)" opacity="0.2" class="pulse" />
141+
<circle cx="267" cy="120" r="2.8" fill="var(--accent)" opacity="0.2" class="pulse-delay" />
142+
<circle cx="146" cy="381" r="2.8" fill="var(--accent)" opacity="0.2" class="pulse-delay" />
143+
<circle cx="255" cy="381" r="2.8" fill="var(--accent)" opacity="0.2" class="pulse" />
121144

122145
<!-- Core glow — pulsing -->
123-
<circle cx="200" cy="200" r="18" fill="var(--accent)" opacity="0.15" filter="url(#glow-e)" class="pulse" />
124-
<circle cx="200" cy="200" r="8" fill="var(--accent)" opacity="0.4" filter="url(#glow-e)" class="pulse" />
125-
<circle cx="200" cy="200" r="3" fill="var(--accent)" opacity="0.8" />
126-
127-
<!-- Energy radiating lines -->
128-
<line x1="60" y1="200" x2="85" y2="200" stroke="var(--accent)" stroke-width="2" opacity="0.25" class="pulse" />
129-
<line x1="315" y1="200" x2="340" y2="200" stroke="var(--accent)" stroke-width="2" opacity="0.25" class="pulse" />
130-
<line x1="200" y1="0" x2="200" y2="22" stroke="var(--accent)" stroke-width="2" opacity="0.2" class="pulse-delay" />
131-
<line x1="200" y1="438" x2="200" y2="460" stroke="var(--accent)" stroke-width="2" opacity="0.15" class="pulse-delay" />
132-
133-
<!-- Diagonal energy rays -->
134-
<line x1="75" y1="100" x2="108" y2="125" stroke="var(--accent)" stroke-width="1.5" opacity="0.1" stroke-dasharray="2 4" />
135-
<line x1="325" y1="100" x2="292" y2="125" stroke="var(--accent)" stroke-width="1.5" opacity="0.1" stroke-dasharray="2 4" />
136-
<line x1="75" y1="320" x2="108" y2="295" stroke="var(--accent)" stroke-width="1.5" opacity="0.08" stroke-dasharray="2 4" />
137-
<line x1="325" y1="320" x2="292" y2="295" stroke="var(--accent)" stroke-width="1.5" opacity="0.08" stroke-dasharray="2 4" />
138-
139-
<!-- Small orbiting data points -->
140-
<circle cx="145" cy="115" r="2" fill="var(--accent)" opacity="0.4" class="pulse" />
141-
<circle cx="255" cy="115" r="2" fill="var(--accent)" opacity="0.4" class="pulse-delay" />
142-
<circle cx="145" cy="305" r="2" fill="var(--accent)" opacity="0.3" class="pulse-delay" />
143-
<circle cx="255" cy="305" r="2" fill="var(--accent)" opacity="0.3" class="pulse" />
144-
145-
<text x="200" y="490" text-anchor="middle" class="glyph-label">MAGICITE_CORE: ACTIVE</text>
146+
<circle cx="200" cy="258" r="73" fill="url(#core-grad-e)" filter="url(#glow-e-bloom)" opacity="0.55" class="pulse" />
147+
<circle cx="200" cy="258" r="42" fill="url(#core-grad-e)" filter="url(#glow-e)" opacity="0.65" class="pulse" />
148+
<circle cx="200" cy="258" r="21" fill="var(--accent-peak)" opacity="0.85" />
149+
<circle cx="200" cy="258" r="10.5" fill="white" opacity="0.95" class="pulse" />
150+
151+
<text x="200" y="500" text-anchor="middle" class="glyph-label">ESVER_MARK: V4 · CRYSTAL_ACTIVE</text>
146152
</svg>
147153

148154
{:else if id === 'visage'}

0 commit comments

Comments
 (0)