Brand Atom · SVG Translation Review · 2026-05-11

Wordmark SVG — review before propagation

Side-by-side comparison of three renders at five sizes: (1) the old wordmark.svg (lowercase V, 0.18em dot, original geometry); (2) the new PROPOSED wordmark.svg (uppercase V 0.72em, 0.22em dot, V-e -0.13em, +2px nudge baked at .size-lg); (3) the CSS bk-wordmark composition at the locked spec (the source of truth). The new SVG should match (3) at every size as closely as a single-file SVG can — pixel-perfect at .size-lg, slightly tighter at smaller sizes, slightly looser at larger sizes (the +2px translation trade-off).

Translation summary

What changed in the SVG

Locked spec → SVG values

The +2px translation choice

CSS dot margin-left is calc(0.04em + 2px). The fixed +2px doesn't translate cleanly to em-based SVG. Baked as 0.082em in the SVG (= 168 viewBox units), which matches the CSS exactly at .size-lg (48px). At smaller sizes the SVG dot is ~0.5px tighter than CSS; at larger sizes ~1px looser. Below visual-perception threshold.

Comparison · same wordmark, three renders, five sizes

Old SVG · New SVG (proposed) · CSS bk-wordmark

Each row is one render size. Each column is one render. The new SVG column should visually match the CSS column at every size; the old SVG column shows what we're moving away from. Use the new wordmark-NEW-PROPOSED.svg render as the visual decision target.

PROPOSED — for approval
Three-way comparison at every size
old assets/wordmark.svg new assets/wordmark-NEW-PROPOSED.svg CSS bk-wordmark composition
OLD SVG
NEW SVG (proposed)
CSS bk-wordmark (truth)
22px · sm
ecreal.
32px · md
ecreal.
48px · lg ★
ecreal.
64px · xl
ecreal.
96px · hero
ecreal.
Verification checklist

What to confirm before propagation

Walk through each comparison row:

If NEW SVG looks right at 48px AND tracks the CSS at the other sizes within visual tolerance → approve and propagate. If anything's off (e.g., dot too small, V height wrong, position off), tell me which dimension to tune and I re-derive the values.

Reply format: APPROVED → PC executes the full propagation across all sources of truth + consumers in one atomic commit.
Or specify what to tune: TUNE: [dimension] [direction/value] — I re-derive and re-stage the SVG, then back here for re-review.

Files in this review:
· projects/vecreal/drafts/brand-atoms/assets/wordmark.svg (OLD — current locked, will be replaced)
· projects/vecreal/drafts/brand-atoms/assets/wordmark-NEW-PROPOSED.svg (NEW — staged for approval)
· This file: projects/vecreal/drafts/brand-atoms/wordmark-svg-translation-review.html