Workshop archive

Locked A+C, dropped D. Operator evaluated the live company-page cover and flagged three composition issues: gap too large (wordmark/tagline read as two separated stacks), size ratio too big (tagline read as footnote at 1.55× step), empty left zone reads unbalanced without an architectural cue. Initial pick was A+C+D; on live evaluation of the B2 preview PNG (clay-tinted hairline), the hairline floating in the empty left zone read as an arbitrary midpoint rather than a deliberate gutter cue. Dropped D. A (gap): corporate cover 18px → 10px, personal cover 32px → 14px (proportional). C (tagline size): corporate 36px → 42px, personal 52px → 60px — both at wordmark:tagline ratio 1.33× (was 1.55×). Brand-banner composition rule codified: when stacking wordmark + tagline in a brand banner (LinkedIn covers, social cards), use ratio 1.33× and gap ≈ 18% of tagline size. Workshop included 4 hairline sub-variants (B0 invisible reference / B1 neutral / B2 clay / B3 dropped) — B3 picked. Also: hairline visibility bug discovered (1px @ 0.18 white matches drafting grid's color/weight on the cover, making it invisible against the gridded background); diagnostic preserved in workshop archive (B0 sub-variant) as composition rule "don't reuse landing-page hairline specs on textured cover canvases without bumping visibility".

Capture target HTML + PNG used during evaluation. B2 spec rendered at native 1128×191 with clay-tinted hairline. Hairline position calibrated via Playwright getBoundingClientRect measurement of rendered tagline (614px from canvas left at 42px Bold Display, -0.03em), placing hairline 30px left = 584px from canvas left. Operator tested this PNG alongside their LinkedIn PFP for cohesion, then decided to drop the hairline entirely.

Locked Option C: Inter Display (font-variation-settings: "opsz" 32) for the landing tagline, letter-spacing -0.03em preserved. Operator: "lets lock in C." Picked over B (Inter / matched -0.04em) and D (Display + matched) for institutional positioning — typographic register break between mark and headline signals system maturity, and adding Inter Display to the stack pays off beyond just the tagline (future product UI display-size text gets the variant). Four variants compared at hero composition + 64px tagline-only scale; identical wordmark in every tile so only the tagline varies. Three new composition principles codified: (1) Two optical-size variants of Inter same family — Text (opsz 14) for body/UI/labels/wordmark, Display (opsz 32) for 32px+ display headlines. (2) The wordmark is pinned to Inter Text regardless of size — even at 248px on LinkedIn square canvas, wordmark stays Text. Mark, not display text. (3) Canonical font URL loads variable Inter with both opsz + wght axes — replaces all static-weight URLs that didn't expose opsz.

Re-locked Option B from the same workshop. Operator on live rev-2: "the subtle lands better I think with less contrast." rev-2's ~9-hex lift (Option C) read as slightly too active for an inactive rest state — the button gained presence at the cost of breaking the inactive/active step. Option B's ~5-hex lift escapes the "flat hole" failure mode while keeping the button quieter than the hover fill. Rule learned: for inactive button rest on textured dark, prefer the minimum lift that escapes the page-bg collapse, not the lift that maximises secondary-surface clarity. --bg-card-dark-bottom now carries the canonical inactive secondary-button fill role; --bg-pill-dark retains topbar-pill / other secondary-surface uses.

Locked dot margin-left calc(0.02em + 2px) here. Operator caught that rev-11's tight calc(0.01em+2px) was symmetric with V-to-e bookend-compression, not tracking letter-spacing applied to "ecreal". Three margin variants at locked 0.24em; B picked for letter-like gap matching 'a-l' visible spacing.

Locked dot size 0.24em + new rules here. After r15 surfaced issues with rev-7's proportional rule, switched to FIXED margin-left + DIAMETER-SCALED translateY. Three sizes (0.23/0.24/0.25em) with new rules; 0.24em picked.

Initial dot size revisit using rev-7's proportional positioning rule + fixed em descent. Operator caught two issues: rule moved dot left edge closer to "l" as dot grew; fixed em descent made bigger dots look proportionally less anchored. Both rules replaced in r16.

Locked V translateY 0.020em + dot translateY 0.015em (DECOUPLED) here. Operator caught: "V is a touch more floaty than the dot." Decoupling V from dot — first deviation from rev-8's "matched translateY" doctrine. V (larger mass + pointed apex) needs more downward pull than dot (small round shape). Asymmetric translateY, balanced perception.

Locked V-to-e -0.13em + dot ml calc(0.01em+2px) here. Operator caught that R4-Bw's wider inner V (0.28u wider opening at top) made V-to-e -0.12em read spacier than R4-Bhm's. Symmetric tightening: -0.13em V-to-e + proportional dot ml shift per r11 precedent.

V overshoot drill across 5 sizes (32/48/80/140/200 px) × 5 translateY values (0.015-0.035em coupled). Validated that translateY 0.025em coupled was correct for R4-Bw (V apex AT baseline naturally). Operator later disagreed and decoupled in r14.

Three corrections from r10: valley depth math clarified (R4-Bw is deepest at curve-dip y=32.35), dot-to-l proportional tightening surfaced, coupled V+dot overshoot retested.

Final showdown R4-Bw vs R4-Bhm @ y=32.75 at locked spacing. Plus V overshoot review with baseline indicator.

y=32.75 split (between 32.5 and 33) + spacing health check.

R4-Bhm valley lowered to y=32.5 (preserving proportions).

Hybrid silhouette correction — operator caught that R4-Bhf (round 6's R4-Bh) was wider than R4-Bw due to viewBox aspect difference. Surfaced R4-Bhm "match" variant (apex extended for Bw silhouette + R4-B valley + thicker parallel stroke 12.58).

Hybrid R4-Bh (wider outer + valley y=32 + stroke 12) — operator narrowing to finalists.

Inner top corners rounded — full curve cohesion across all five V vertices.

Parallel legs (constant stroke top to valley) — R4-Bp0/Bp1/Bp2 with parametric trade-off between valley depth and stroke width.

R4-Bv (slight valley + widened legs) + V-height analysis. Operator rejected R4-Bv's taper (legs wider at top than valley).

Smooth tangent rounded valley + consistent legs + 0.69em option. Fixed two rendering bugs from round 1: Q-curve wasn't tangent to incoming legs, and dropping valley to y=36 tapered the legs.

Inner-vertex polish on R4 — first attempt at rounding the inner valley vertex (sharp valley + rounded apex/top was inconsistent curve language).

R1-R5 subtle precision moves on V1 (true point, refined curve, thinner legs).

5 V geometries explored (pointed chevron, architectural, typographic narrow, rounded apex, flat apex) with per-variant cohesion tuning.

Initial V size exploration — superseded by V character workshop.

V refinement × text-weight × dot — two-axis exploration that surfaced the Bold 700 + tracking -0.04em direction (rev-10 lock).

Locked Option C (--bg-pill-dark #1f2126) here. Operator: "inactive CTA button is too black against the background, use a softer black please and show me a mockup with that." Diagnosed that the inactive fill at --bg-app-dark #131517 collapsed into the page-bg gradient's darkest stop, making the button the only un-textured rectangle on a gridded page — read as a flat hole. 4 options compared at the actual landing composition (drafting grid + gradient + real CTA dimensions): A current, B subtle lift, C clear lift (recommended, explicit "secondary surfaces" token role), D strongest lift. Composition principle codified in component-library/buttons.md: secondary-button inactive fill on textured/gridded dark surfaces uses --bg-pill-dark, not --bg-app-dark. Note: revised one day later in rev-3 (see above) — Option C's ~9-hex lift read as slightly too active on live; switched to Option B's ~5-hex --bg-card-dark-bottom.

Locked V0 here. Operator: "What do you think about V2 vs V1 vs a third with no border or stroke?" 3 variants (V0 clean / V1 full C5 / V2 border only) with cooler white held constant. Workshop includes a do/don't merits analysis of border/stroke in favicons — original problem (warm/cool clash) was solved upstream by the cool-white swap, so border/stroke became decorative not corrective. Operator picked V0 (no border, no stroke) — brutalist-direct mark, maximally legible at 16 px.

Locked cool off-white #f7f8f8 direction (V1) here. Round 5b's C6 cream was rejected as "off brand"; operator asked to try the brand cool off-white from the dark-mode wordmark text. 5 variants on stroke weight + cool white alternatives.

Locked C5 direction (container border + V/dot stroke) here. 7 variants on three softening approaches (stroke on V/dot, container border, cream V/dot). Diagnosed the white-on-clay clash as a warm/cool temperature clash, not a luminance issue.

Locked T6 direction (clay-light tile + soft-white V/dot) here. Operator on rev-6 H2: "Background seems too dark against white-mode browsers." 7 tile colors in 2 groups (lift/warm the dark, vs revisit warm clay tile) × 3 browser chrome contexts. Surfaced that the original (round 1) warm-tile rejection was about broken geometry, not the warm-tile direction itself.

Locked V-0.25 here. Operator-flagged "feels a touch low" at 72-96 px after rev-7 dot lock. Verified workshop position matched rev-5 V2a exactly (so it's real perception at display sizes, not workshop deviation). 5 variants (0em / 0.020em / 0.025em / 0.030em / 0.0325em) × 5 display sizes (32/48/72/96/128 px) + stacked A/B at 96 px. Pixel-descent reference table embedded. V-0.25 matches dot exactly — symmetric optical system, one rule for both atoms.

Locked W-0.23 here. After H2 favicon lock surfaced ~35.5% dot/V ratio, operator asked whether wordmark dot at 31.8% felt too small. 3 variants (0.21 / 0.22 / 0.23em) × 5 display sizes (22/32/48/72/96 px) + stacked A/B at 48 and 96 px. Proportional positioning rule codified: shift margin-left by −Δ/2 when dot diameter changes so optical center stays fixed.

Locked Option H2 here. Held W2-D V geometry + dot size + cy constant; tested 6 Δ values shifting V right and dot left symmetrically (composition center stays at tile center). H2 = Δ=2, gap ~7 units at closest approach.

Locked W2-D here (dot bottom at V tip baseline, no overshoot). Held W2 V geometry + dot size constant; tested 6 vertical positions from current (broken, dot bottom 4.5 below V tip) through wordmark-faithful (1.2 below) to clear gap above V tip.

Locked W2 here (wordmark V geometry, dot r=5.5, composition centered). Diagnosed two issues from round 1: favicon V was an 8-unit-leg chevron not the wordmark V's 12-unit legs, and dot center sat above V tip. Tested 5 variants on geometry + size + centering against an F1-colored reference.

Operator picked F1 direction here (dark tile + clay V/dot, no V overshoot). Holistic review of 6 options spanning color (dark/light/stamp) and geometry (V overshoot + dot at V tip baseline) against the current rev-4 D-half. Triggered by operator: "the flavicon monogram seems a bit odd now. Something about the white on clay?"

Locked Option V2a here. 6 variants × 3 sizes (V1 0.015em / V2 0.025em-matches-dot / V2a 0.0325em / V2b 0.033em / V3 0.040em / V4 0.060em). Same pattern as rev-4 dot overshoot, applied to the V — pointed chevron mass concentrated at top makes V tip on baseline read as floating. Operator picked the midpoint V2a between matching-dot consistency and stronger pointed-shape compensation.

No action taken — operator reviewed 5 uppercase ECREAL size variants (100% / 80% / 70% / 60% / 50% of V cap-height) against the rev-4 lowercase reference and chose to keep the locked rev-4 lowercase wordmark. Kept as audit trail; not propagated.

Locked Option D5 here. 9 variants × 3 sizes; em-based translateY + 0.20em vs 0.21em vs 0.22em comparison. Root-cause: optical overshoot + size-proportional vertical shift.

Diagnostic round — switched from margin-bottom to transform: translateY after discovering the flex baseline cancellation issue.

0.20em + 0.21em dot batch with px-based vertical (didn't work as expected — surfaced the flex/margin issue).

Initial 6-variant placement workshop (1px / 2px closer × 1px / 2px down).

Locked Option F (V 0.66em + dot 0.20em + V-e -0.11em). 7 variants × 3 sizes addressing over-balanced rev-2 (two heavyweight anchors).

Dark-mode favicon variants (DA / DB / DC / DD) — L variant locked as universal contained app-icon.

Uppercase vs lowercase V adjudication + D vs D-half (r=7 vs r=6.5) favicon dot. D-half locked.

V-to-e gap and V-to-dot gap final tuning.

V height + monogram/favicon refinements.

Initial wordmark + monogram dot variants.

SVG-to-CSS pixel-parity sweep verifying the wordmark.svg viewBox fix (1700 → 2048 = 1 em).