design.vecreal.com / Workshop / V overshoot

Brand atom workshop · V optical overshoot

V overshoot — 6 translateY variants

Operator-spotted: the V's tip mathematically sits on the baseline (same as the rev-3 dot did, before we fixed it in rev-4). The visible mass of a V is concentrated at the top, so the tip touching the baseline reads as floating. Apply the same em-based translateY pattern we used for the dot, and pick a magnitude.

Why the V floats

The V SVG path is M10 14 L31 50 Q32 52 33 50 L54 14 L42 14 L32 32 L22 14 Z. ViewBox 10 14 44 38. The quadratic apex hits y=52 — exactly the viewBox bottom. With preserveAspectRatio="xMidYMax meet" + vertical-align: baseline, the SVG element's bottom edge sits on the line baseline, putting the V's geometric tip on the baseline.

But the V's visible mass is concentrated at the top. A flat-bottomed letter like "e" has horizontal mass at the baseline; the V has a single point. Visually the V reads as floating above where "ecreal" is grounded.

The fix is the same pattern we used for the dot in rev-4: transform: translateY(N×em) on the .bk-v element. Em-based so the descent scales proportionally with font-size. The V tip ends up sitting slightly below the baseline (visible in the comparison via the clay baseline ruler in each specimen stage), and the visual mass of the V is properly grounded with "ecreal".

Pointed shapes may want more overshoot than round shapes. The dot (round) got 0.025em. The V (pointed) may want the same, or more. Variants below range from 0.015em (less) to 0.060em (more).

CURRENT · REV-4 LOCKED
As deployed on vecreal.com (V tip on baseline)
V translate-Y  none
V height  0.66em
dot translate-Y  0.025em  (rev-4)
SM 22px
ecreal
LG 48px
ecreal
HERO 96px
ecreal
V1 · 0.015em DOWN
Minimal descent — less than the dot's 0.025em
V translate-Y  0.015em
at 22px  0.33px
at 48px  0.72px
at 96px  1.44px
SM 22px
ecreal
LG 48px
ecreal
HERO 96px
ecreal
V2 · 0.025em DOWN
Matches the dot's descent exactly — consistent overshoot system
V translate-Y  0.025em  (= dot)
at 22px  0.55px
at 48px  1.20px
at 96px  2.40px
SM 22px
ecreal
LG 48px
ecreal
HERO 96px
ecreal
V2a · 0.0325em DOWN
Precise midpoint between V2 (0.025em) and V3 (0.040em)
V translate-Y  0.0325em
at 22px  0.72px
at 48px  1.56px
at 96px  3.12px
SM 22px
ecreal
LG 48px
ecreal
HERO 96px
ecreal
V2b · 0.033em DOWN
A hair more than V2a — functionally near-identical (0.05px sub-pixel difference at HERO 96)
V translate-Y  0.033em
at 22px  0.73px
at 48px  1.58px
at 96px  3.17px
SM 22px
ecreal
LG 48px
ecreal
HERO 96px
ecreal
V3 · 0.040em DOWN
More aggressive — accounts for V's pointed (less-grounded) bottom
V translate-Y  0.040em
at 22px  0.88px
at 48px  1.92px
at 96px  3.84px
SM 22px
ecreal
LG 48px
ecreal
HERO 96px
ecreal
V4 · 0.060em DOWN
Most aggressive — V clearly descended
V translate-Y  0.060em
at 22px  1.32px
at 48px  2.88px
at 96px  5.76px
SM 22px
ecreal
LG 48px
ecreal
HERO 96px
ecreal

Spec deltas at a glance

VARIANT V translate-Y vs DOT (0.025em) SM 22 / LG 48 / HERO 96 px shift
Current · rev-4none
V1 · 0.015em0.015emless than dot0.33 / 0.72 / 1.44 px
V2 · 0.025em0.025em= dot exactly0.55 / 1.20 / 2.40 px
V2a · 0.0325em0.0325emmidpoint V2-V30.72 / 1.56 / 3.12 px
V2b · 0.033em0.033em≈ V2a (sub-pixel diff)0.73 / 1.58 / 3.17 px
V3 · 0.040em0.040emmore than dot0.88 / 1.92 / 3.84 px
V4 · 0.060em0.060emmuch more than dot1.32 / 2.88 / 5.76 px
Reply with your pick — "V1", "V2", "V2a", "V2b", "V3", "V4", or "Current". If picked, becomes rev-5 (V optical overshoot). Single-token addition: --bk-v-translate-y on .bk-wordmark .bk-v. Same propagation pattern as rev-4 dot tune — touches reference HTMLs, design-tokens.json, wordmark.md spec, CHANGELOG, brand-atoms/index.html, vecreal.com landing, OG preview, wordmark.svg (V transform updated for the descent), plus the LinkedIn logo PNG.