# Unify LinkedIn Design System A design system for producing **Austin Hughes' LinkedIn creative** — carousels, cheatsheets, infographics, quote cards, and thumbnails. Founder-led organic content from Unify, written for GTM and RevOps leaders. > **About the brand:** [Unify](https://www.unifygtm.com) is a GTM intelligence platform. Austin Hughes is the founder. The LinkedIn creative is operator-grade, built from real plays, real numbers, and real screenshots — written from a founder who is in the field, to operators who are in the field. --- ## Index | File | What it is | |---|---| | `README.md` | Overview, fundamentals, iconography. | | `SKILL.md` | Agent-skill entry point. | | `colors_and_type.css` | All color and type tokens + semantic classes. | | `assets/` | Brand images (Austin headshot, etc). | | `templates/` | Reference HTML — clone, don't redraw. | | `system/DESIGN_SYSTEM.md` | This file (canonical). | --- ## CONTENT FUNDAMENTALS The voice is **founder-as-operator talking to GTM/RevOps leaders**. Confident, specific, never marketing-fluffy. Every post earns its space with real numbers, real plays, named tools, named companies. **Point of view.** First person ("I"). Direct address ("you" / "your"). Writing *from* a GTM operator *to* GTM operators. Avoid corporate "we" and "our customers" — the voice is personal. **Casing.** Sentence case for headlines and body. Exception: short **MONO TRACKED EYEBROWS** ("PLAY 03", "STACK", "BRIEF") at 13px / `JetBrains Mono` / 0.18em tracking. **Structure.** Numbered plays, before/after, the stack, the breakdown, "5 reasons / 7 plays / 3 things". Titles promise something finite and operational. **Length.** Ruthlessly short. Headlines 3–8 words. Subtitles one sentence. Each list item is a 3–8 word title plus one supporting sentence that names a real number, tool, or outcome. **Emoji.** Almost never in the static creative. The white accent dot, the highlight pill, and the underline carry the emphasis. **Tells of the voice (from Austin's posts):** - Real numbers over vague quantifiers ("$10M raise", "571 posts", "7 plays") - Named tools as part of the play ("Clay", "Apollo", "HubSpot") - Specific dollar/headcount/conversion stats - Short imperative closers ("Steal this play.", "Try it this week.") **Examples:** - **Hero:** "The signal stack" - **Subtitle:** "Seven sources I check before any account gets a touch." - **List item:** "Funding round in last 90 days" → "Pulls from Crunchbase + LinkedIn. Tier-1 always; AE owns the touch within 24 hours." - **CTA bar:** "Want the full stack? Reply STACK." - **Footer:** "Repost if your team needs this." ⇢ "Follow @Austin Hughes for more GTM teardowns." --- ## VISUAL FOUNDATIONS ### Palette vibe A **dark-canvas, monochromatic system with one accent**: warm charcoal `#222`, off-white text `#dcdcdc`, and **white `#ffffff`** as the single brand accent. The accent is used sparingly — for product UI references, highlight pills, dots, underlines, and one-word emphasis. **No blue. No green. No gradients. No purple. No lavender.** ### Type system - **Mega:** `PP Neue Montreal` 600 at 200–360px. Big-number thumbnails (`$10M`, `571`, `7`). - **Hero:** `PP Neue Montreal` 600 at 88–168px, ls −0.04em, lh 0.84. Carousel cover headlines. - **Display:** `PP Neue Montreal` 500 at 88px. Cheatsheet section titles. - **H1–H4:** `PP Neue Montreal` 500–600 at 32–64px. - **Body:** `PP Neue Montreal` 400 at 17px, lh 1.55. Workhorse copy (matches the brief). - **Eyebrow:** `JetBrains Mono` 500 at 13px, tracked 0.18em, UPPERCASE. Section labels. - **Annotation:** `Caveat` 500 at 28–36px, rotated −3° to −6°. Used very sparingly for handwritten asides over thumbnails. ### Backgrounds - **Default (carousel slide):** flat charcoal `#222`. - **Cheatsheet:** flat paper `#fff`, ink text `#1c1c1c`. - **Alternating list rows on dark:** `#2a2a2a` (un-charcoal-2). On paper: `#f4f4f6` (un-paper-cool). - **Hero strips:** flat white `#ffffff` with charcoal text. Use for cover slides only. - **Subtle grid overlay:** 1px lines on a 60px grid at 2.5% opacity over charcoal — for hero / stat / "the math" panels only. Never on text-dense slides. - **No photo backgrounds. No gradients. No glassmorphism. No noise/grunge textures.** ### Imagery - **Austin headshot** — circular-cropped, top-left as authorship mark (56px diameter), or full-bleed half-frame on thumbnails (face left, type right) with a charcoal gradient mask for legibility. - **Product UI screenshots** as a recurring motif — Unify dashboard fragments, signal cards, sequence builders. Always rounded `--radius-md` (8px), with a subtle `1px solid #404040` border. Never gradient-masked. - **No icons by default.** Typographic emphasis (highlight pills, underlines, mono eyebrows, number dots) does the work icons would do elsewhere. When an icon is genuinely necessary, use **Lucide** outline at 1.75–2px stroke, white or paper. Never hand-draw an icon. ### Corner radii - Cards / tiles / product UI mockups: `--radius-md` = 8px. - Avatars and number dots: fully round (`--radius-pill`). - Square index markers: 2px. - Hero strips / footer / full-bleed bands: sharp. ### Borders & rules - 1px `#404040` (`--un-rule`) on dark surfaces. 1px `#e5e5e7` on paper. - 1px `#1c1c1c` around the Austin avatar. - The white dot in the brandmark is the *only* recurring accent shape. ### Shadows - Effectively absent. Allowed only on product UI screenshots if they're floating over a dark surface (`--shadow-md`). Everything else is flat. ### Animation (when recreating in HTML) - Fades plus small translate-Y (8–12px) on enter. - Ease: `cubic-bezier(0.22, 1, 0.36, 1)`. Confident decelerate. - No bounces. No springs. No scale-pulse. - Hover: shift accent (white → #dcdcdc) or invert (paper ↔ ink). ### Layout rules - **Carousel slide:** 1080×1350. 80px outer padding (matches Unify brief's `--xl`). Brandmark top-left at 56px down. Slide number top-right (mono eyebrow style, e.g. `01 / 08`). 22px footer strip at bottom with footer copy + small avatar. - **Cheatsheet:** 1200×1630. 80px outer padding. 240px header band on paper with display-size title and 2-line subtitle. Numbered list rows alternate paper / paper-cool. 65px ink footer. - **Square thumbnail / quote card:** 1200×1200. Charcoal default. Half-frame face left, big-number or hook right (matches the existing brief thumbnails T1–T5). - **Long infographic:** 1200×2400. Vertical timeline of stacked stat tiles + numbered plays. Same brandmark / footer rules as carousel. ### Density The system runs **less dense than DataGrail's**. Lots of breathing room — Austin's voice is short and punchy, so the slides should look like the slides do too. A carousel slide rarely has more than 5 list items. A cheatsheet rarely has more than 7. **Whitespace is part of the brand.** --- ## ICONOGRAPHY The default answer is **no icon**. Typography does the work. When you genuinely need one (a stat tile category marker, a list-item glyph in a checklist), use: - **Lucide outline** (free CDN), 1.75–2px stroke, sized 28–48px. - Color: `var(--accent)` (white) on dark; `var(--un-ink-text)` on paper. - Single-color outline only. **Never filled, never duotone, never gradient.** ```html ``` **Never** use emoji in the static creative. **Never** hand-draw an icon as SVG paths. If a vector is genuinely needed (a logo, a product screenshot fragment), drop a placeholder block and flag it for a designer. --- ## COLOR USAGE RULES A short list because this is the most-violated part of any system: 1. **White (`#ffffff`) is the accent.** It appears in: the brandmark dot, the underline accent, the highlight pill, number dots, single-word emphasis, and product UI references. It is **never** a slide background except on the cover slide of a carousel. 2. **Charcoal (`#222`) is the default canvas.** Cheatsheets are the exception (paper white). 3. **One accent per slide.** Don't combine highlight pill + underline + dot in the same headline. Pick one. 4. **No new colors.** If a chart needs differentiation, use opacity steps of paper-on-charcoal (100 / 75 / 50 / 25%). **No lavender/purple (`#b8b6ff`) — this was incorrectly attributed to Unify's brand.** 5. **Pure black `#000` is not used.** Always `#1c1c1c` or `#222`. --- ## LAYOUT TEMPLATES (P1–Pn) Pattern catalogue, abbreviated: ### Carousels (1080×1350) - **C1 — Cover.** Hero headline + subtitle + brandmark + slide count + small footer. - **C2 — Numbered play.** Big mono index (`01`), title, body, optional product UI screenshot. - **C3 — Stat punch.** Single mega-number, short caption, source line. - **C4 — Before / after.** Two-column split, white divider. - **C5 — Quote card.** Pulled CISO/operator quote, attribution row. - **C6 — The stack.** 5-row list of named tools with tags. - **C7 — CTA closer.** "Repost / Follow / Reply X" — ink footer expanded. ### Cheatsheets (1200×1630) - **S1 — Numbered framework.** 5–7 rows, alternating paper / paper-cool. - **S2 — Question bank.** Ordered list of questions with one-line answers. - **S3 — Anatomy.** Annotated diagram (e.g. anatomy of a good outbound email). - **S4 — Stat board.** 6-tile grid of stats, mono labels. ### Thumbnails / quote cards (1200×1200) - **T1 — Big number.** Half-frame face + big stat. (See `T1` in the brief.) - **T2 — Big question.** Question hero typeset center, white underline on key word. - **T3 — Stamp.** Verdict-style pill ("WORTH IT" / "DEAD ON ARRIVAL") rotated −2°. --- ## DON'T DO THESE - Start from a blank HTML file. Always clone a template. - Hand-draw an icon as SVG paths. - Add a gradient. Anywhere. - Use pure `#000`. - Invent a fourth color. Lavender, charcoal, paper, plus near-blacks/whites only. - Use marketing verbs ("unlock", "elevate", "supercharge", "transform"). - Use generic plurals ("many companies", "various tools", "a lot of teams"). - Center-align body text. Body is left-aligned. Always. - Add a CSS animation that scales or bounces. - Put the white accent on more than ~10% of any slide's pixels.