design.vecreal.com / workshop / LinkedIn cover treatment
Brand reference · workshop · 2026-05-13
LinkedIn company cover · A + C + D applied
Operator evaluated the live company-cover PNG and flagged three composition issues with the wordmark/tagline relationship: gap too large, size step too big, empty left zone reads unbalanced without an architectural cue. Picked changes A (tighten gap), C (bump tagline size), D (add page-datum hairline). B (re-add "for General Contractors") deferred — stealth-mode positioning, tagline stays at "Institutional Intelligence" only for now. This workshop renders both the current cover and the proposed A+C+D variant at native 1128×191 + half-size thumbnail.
What's changing
A · gap — wordmark→tagline CSS gap 18px → 10px. With each
element's line-height padding, the optical gap drops more than the raw number suggests.
Brings the two elements into one composition unit rather than feeling like separated stacks.
C · tagline size — 36px → 42px. Size ratio against the 56px
wordmark drops from 1.55× to 1.33×. Tagline gains presence without overtaking the wordmark
as the brand mark. Inter Display (opsz 32) still applies; -0.03em tracking preserved.
D · page-datum hairline — vertical line at the left edge of the content block, echoing the landing page's page-datum gutter rule. First ship had this at the landing-page spec (1px @ rgba(208,214,224,0.18)) which was INVISIBLE on the cover — the grid uses the same color/weight (1px @ rgba(208,214,224,0.14)), so a hairline 0.04 more opaque just blends into the grid pattern. Section 1.5 below shows three ways to make it actually read: neutral-bumped, clay-tinted, or dropped entirely.
Constant across both variants: wordmark identical (Inter 700 / opsz 14 / -0.04em, 56px, locked rev-12 V/dot); tagline weight 700 / Inter Display opsz 32 / -0.03em; "Intelligence" in clay-bright; drafting grid + clay vignette upper-right; 80px right padding; content vertically centered.
Section 1 · Both variants at native 1128×191
Captured to PNG at exactly this size — no scaling on upload to LinkedIn.
A · current
gap: 18px · tagline: 36px · size ratio: 1.55× · hairline: none
B · proposed (A+C+D) ★ candidate
Institutional Intelligence
gap: 10px · tagline: 42px · size ratio: 1.33× · hairline: 1.5px @ rgba(198,128,112,0.55) clay-tinted, -20px left, ±28px y-overflow
Section 1.5 · Hairline visibility — D done four ways
The original D spec (1px @ rgba(208,214,224,0.18) — landing-page --hairline-strong)
gets lost against the cover's drafting grid because the grid is the same color at almost the
same opacity. Four options to fix or drop D. Gap + tagline size = same A+C in all four
(10px gap, 42px tagline). Only the hairline differs.
B0 · original spec
Institutional Intelligence
hairline: 1px @ rgba(208, 214, 224, 0.18) · grid for ref: 1px @ rgba(208, 214, 224, 0.14) · delta: 0.04 opacity, same hue — illegible
B1 · neutral bumped
Institutional Intelligence
hairline: 1.5px @ rgba(208, 214, 224, 0.42) · read: visible, architectural · no clay tint
B2 · clay-tinted ★ default candidate (matches Section 1 above)
Institutional Intelligence
hairline: 1.5px @ rgba(198, 128, 112, 0.55) clay-tinted · read: visible + brand accent echo (V/dot/Intelligence rhythm)
B3 · D dropped
Institutional Intelligence
hairline: none · read: A+C alone may be enough — drafting grid already provides the architectural texture
Section 2 · LinkedIn feed-thumbnail scale (half-size)
LinkedIn compresses the cover heavily in mobile feeds and profile previews. At half native size, can you still read "Institutional Intelligence" cleanly? Does the wordmark hierarchy still feel right? This is the daily-use scale.
A · current
Institutional Intelligence
B · A+C+D (B2 clay)
Institutional Intelligence
Decision matrix
| Property | A · current | B · proposed | Delta |
|---|---|---|---|
| wordmark size | 56px | 56px | unchanged |
| tagline size | 36px | 42px | +6px · ratio 1.55× → 1.33× |
| wordmark→tagline gap | 18px | 10px | -8px · tighter unit |
| page-datum hairline | none | 1.5px clay-tinted @ left -20px · y -28 to +28 (B2 default; B0/B1/B3 in §1.5) | added · brand language echo |
| right padding | 80px | 80px | unchanged |
| vertical centering | 50% / translateY(-50%) | 50% / translateY(-50%) | unchanged |
| drafting grid + vignette | 40px cells + upper-right clay | same | unchanged |
| tagline copy | "Institutional Intelligence" | "Institutional Intelligence" | unchanged · "for General Contractors" deferred (stealth) |
Pick
A (keep current),
B + B1 (A+C+D with neutral hairline),
B + B2 (A+C+D with clay hairline, my default recommendation),
or B + B3 (A+C only, drop the hairline).
On lock I'll update marketing/social/linkedin-cover-1128.html + regenerate the
PNG + propagate to linkedin-cover-1584-personal.html + update
component-library/wordmark.md with the brand-banner composition rule +
CHANGELOG entry. Workshop file moves to workshop/archive/ on lock.
What to look for:
· Section 1 — does the
proposed composition (B2 default) feel like one unit where A felt like two? Tagline reading
as co-equal headline rather than footnote?
· Section 1.5 — does the
hairline add a "considered design" cue, or feel like extra noise on top of the grid?
If you want it, clay-tinted (B2) gives brand-language echo via the V/dot/Intelligence accent
rhythm; neutral (B1) is quieter. B3 (no hairline) is the right pick if you decide the
drafting grid is already enough architectural texture and the hairline is redundant.
· Section 2 (thumbnail scale)
— does the larger 42px tagline survive LinkedIn feed compression? Does whichever hairline
you picked survive, or does it disappear at half-size?
Vecreal · brand workshop · 2026-05-13 · LinkedIn cover treatment A+C+D