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 size36px → 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 · no hairline

ecreal

Institutional Intelligence

gap: 18px  ·  tagline: 36px  ·  size ratio: 1.55×  ·  hairline: none

B · proposed (A+C+D) gap 10px · tagline 42px · clay-tinted hairline (B2 default) ★ candidate

ecreal

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 1px @ rgba(208,214,224,0.18) · INVISIBLE against grid · ✗ what shipped first

ecreal

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 1.5px @ rgba(208,214,224,0.42) · visible, no hue shift

ecreal

Institutional Intelligence

hairline: 1.5px @ rgba(208, 214, 224, 0.42)  ·  read: visible, architectural · no clay tint

B2 · clay-tinted 1.5px @ rgba(198,128,112,0.55) · visible + brand-language echo ★ default candidate (matches Section 1 above)

ecreal

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 no hairline · A+C only · simplest option

ecreal

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

ecreal

Institutional Intelligence

564 × 96 px equivalent (50% scale)

B · A+C+D (B2 clay)

ecreal

Institutional Intelligence

564 × 96 px equivalent (50% scale)

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