# Linked Promo — Design System (Deep Prompt for AI Agents) > Copy this entire file as a system prompt to any AI agent (Claude, ChatGPT, Gemini, Cursor, v0, Figma Make). > Canonical URL: https://linked-promo.com/design/design-system.md > Last updated: 2026-06-01 You are working on a project for **Linked Promo** — a B2B LinkedIn marketing and lead-generation agency. Follow this design system exactly. Do not invent colors, fonts, layouts, or chevron variations outside of what is defined here. If a request requires something not covered, ask before improvising. --- ## 1. BRAND IDENTITY - **Company:** Linked Promo - **Industry:** B2B LinkedIn marketing, outbound sales, landing pages for SaaS / IT - **Visual posture:** Professional, dark, geometric, tech-forward - **Voice:** Confident, plainspoken, practitioner-to-practitioner. No hype words. Numbers earn claims (e.g. "47× pipeline ROI", not "massive ROI"). - **Reader:** Founder, head of growth, VP sales — has been burned by agencies before, wants signal not noise. --- ## 2. CHEVRON CANON (sacred — never violate) The chevron is the **only** decorative element. It is the "D" from the LinkedPromo wordmark, redrawn as an arrow signifying momentum, growth, continuous improvement. ### 2.1 Canonical polygon **6 vertices, tip-right horizontal:** ``` 0,0 207,0 503,540 207,1080 0,1080 294,540 ``` - **ViewBox:** `503 × 1080` (aspect ratio 0.466) - **Tip:** right side at `(503, 540)` — vertex of arrow - **Inner notch:** `(294, 540)` — the V-cut that distinguishes from a plain triangle - **Shoulders:** `(207, 0)` top, `(207, 1080)` bottom ### 2.2 Arrow direction rule (NEVER break) - Arrows point **right (→)** on horizontal compositions - Arrows point **up (↑)** on vertical / square compositions - ✗ Never left, never down, never down-diagonal ### 2.3 Scaling - Always proportional. Never `scale(N, M)` where N ≠ M. - For other widths or heights, **recalculate polygon vertices** proportionally rather than stretching. - For tip-up orientation: rotate 90° CCW. New polygon: `0,503 0,296 540,0 1080,296 1080,503 540,209`. ### 2.4 Echo lines Two thin lines (2-3px) along the outer contour of the chevron, in inverse color to fill: - White echo on blue chevron - Blue echo on white chevron Skip echo lines only when the chevron is used as a tiny watermark (small format strategy, see §6.4). ### 2.5 Forbidden on the chevron - ✗ 3D bevels, drop shadows, specular highlights - ✗ Gradient fills — solid color only - ✗ Anisotropic stretch (`scale(N, M)` with N ≠ M) - ✗ White rim around blue chevron — use blue only - ✗ Using a plain triangle as substitute - ✗ Any chevron facing left or down ### 2.6 Pinwheel pattern (BrandGuide p.21) The secondary brand pattern — **twelve separate L-corner glyphs** arranged in a cross / scatter (a 3×4-ish cluster, not a tight snowflake). It is the brandbook's decorative pattern, distinct from the chevron. Use it for hero backgrounds, banner marks, slide covers, and large empty areas — never as a logo substitute. - **Geometry is fixed.** Reproduce it 1:1 from source — do not eyeball or redraw. Canonical SVG: `https://linked-promo.com/design/assets/elements/pinwheel-pattern.svg` (viewBox `2138 2295 490 252`, 12 paths). - **Palette per surface:** - On **white / light:** blue `#2134EA` + navy `#0D0D26` + light-grey `#D9D9DE` corners. - On **navy / dark:** blue `#2134EA` + white `#FFFFFF` (the navy corners read white) + slate `#2A2A45`. - On **blue:** deep-blue + white + soft-blue corners. - **Placement:** right side of a 16:9 surface, vertically centred, text-safe zone on the left. Scale so the cluster occupies ~30-40% width. - **Where it appears:** banner-generator #20 (dark) & #21 (light), interactive background "Pinwheel Field", Google Slides cover + section divider, HTML deck cover (`tpl-cover`). ### 2.7 Graphic elements (BrandGuide p.19) A small set of derived marks. Reproduce 1:1 from source SVG, never eyeball. All downloadable at `https://linked-promo.com/design/brand/elements/`: | Element | What it is | Use | |---------|-----------|-----| | **D-mark** | The chevron inside a rounded square (the "D" of LinkeD) | App icon, avatar, favicon base | | **Double arrow** | Two stacked chevrons | Motion / progress accents | | **Echo chevron** | Chevron with fading echo lines | Decorative, backgrounds | | **Combination mark** | Chevron + wordmark lockup | Compact branding | | **NEW-bracket** | "NEW" in brand font inside a bracket frame | Badges, launch tags (brand font, never arbitrary) | --- ## 3. COLORS Use only these values. Never invent new colors. ### 3.1 Primary | Token | Hex | Use | |---|---|---| | `--lp-blue` | `#2134EA` | Primary action, CTA, chevron | | `--lp-blue-600` | `#1A2AC2` | Hover | | `--lp-blue-700` | `#14219B` | Press, active | | `--lp-blue-300` | `#5868F0` | Links on dark surfaces | | `--lp-blue-100` | `#E4E7FD` | Soft tint surface | ### 3.2 Navy / Dark | Token | Hex | Use | |---|---|---| | `--lp-navy` | `#0D0D26` | Dark bg (default for marketing) | | `--lp-navy-800` | `#14143A` | Elevated dark surface | | `--lp-navy-700` | `#1F1F4D` | Card on dark | | `--lp-navy-600` | `#2B2B66` | Border on dark | ### 3.3 Neutrals | Token | Hex | Use | |---|---|---| | `--lp-white` | `#FFFFFF` | Inverse surfaces | | `--lp-paper` | `#F6F7FB` | Page bg light | | `--lp-line` | `#E2E4EE` | Hairline border | | `--lp-ink` | `#161616` | Body text on light | | `--lp-ink-2` | `#3A3A4A` | Secondary text | | `--lp-ink-3` | `#6B6B7B` | Tertiary, caption | ### 3.4 Semantic | Token | Hex | Use | |---|---|---| | `--success` | `#1FB36B` | Success states | | `--warning` | `#E0A82E` | Warning states | | `--danger` | `#E5484D` | Error, destructive | ### 3.5 Forbidden - Any color not in the tables above - Gradients that **change hue** (blue→purple, blue→cyan, blue→teal) - Gradient between brand blue and any non-brand color - Gradient on text, logo, or chevron glyph - Gradient on light / white surfaces (white stays flat) - Tinted blacks not in the token list ### 3.6 Gradients (allowed — dark surfaces only) Gradients are permitted **only** on dark backgrounds, and **only as same-hue depth** (darken within the blue→navy range). They add dimension to dark banners, slide backgrounds, and hero surfaces. Light/white surfaces always stay flat. | Name | Definition | Use | |---|---|---| | **Depth (linear)** | `linear-gradient(135deg, #2134EA 0%, #1A2AC2 50%, #0D0D26 100%)` | Dark banner / slide backgrounds, blue wedges | | **Glow (radial)** | `radial-gradient(circle at 70% 40%, #2134EA 0%, #1A2AC2 45%, #0D0D26 100%)` | Hero focal point, CTA backgrounds | | **Navy fade** | `linear-gradient(180deg, #0D0D26 0%, #14142E 100%)` | Subtle dark surface lift | | **Photo legibility** | `linear-gradient(to top, rgba(13,13,38,0.7) 0%, rgba(13,13,38,0) 50%)` | Text overlay on photos | Rules: - Stops stay within `#2134EA / #1A2AC2 / #14142E / #0D0D26` (one blue family, darkening) - Never lighter than `#2134EA`, never another hue - Decorative chevrons on top of gradient stay **solid** (no gradient on the glyph) - White / light surfaces: **no gradient** — flat `#FFFFFF` or `#F4F4F8` --- ## 4. TYPOGRAPHY ### 4.1 Fonts — two contexts Split by output medium. On screen → **two fonts max** (no third). Micra is **print-only**, never web. Helvetica is never used. **WEB = Manrope** (Google Fonts) — primary for everything on screen. - Use for: portal, client sites, landing pages, UI, buttons, banners, social posts, eyebrow labels, **all web output**. - Weights: 400 Regular / 500 Medium / 600 SemiBold / 700 Bold / 800 ExtraBold. - Eyebrow labels (web): Manrope **800 ExtraBold, UPPERCASE, 0.16em tracking, blue** (Micra is not used on screen). - CSS token: `--font-sans` and `--font-display` both = Manrope. **PRINT / DECKS = Geometria + Micra** (custom, bundled) — for non-screen / embeddable output. - **Geometria** — headings + body. HTML decks (`/presentation/html-decks/`), PDF, print artifacts. Weights: 300 / 400 / 500 / 700 / 800 / 900. CSS token: `--font-print`. - **Micra** — eyebrow / badge / decorative ALL-CAPS labels **only** (the role it plays in the official BrandGuide). Weights: 400 Regular / 700 Bold. CSS token: `--font-display-print`. Never on web. **Google Slides** — Manrope (same as web; Workspace can't upload custom fonts, and Manrope is the brand web font anyway). **Fallback stack:** `-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif` **Load via:** `` (loads Manrope + Geometria + Micra). | Context | Headings / Body | Eyebrow / Badge | |---|---|---| | Web (portal, sites, UI, banners, social) | **Manrope** | **Manrope** ExtraBold UPPERCASE | | Print / HTML decks / PDF | **Geometria** | **Micra** Bold UPPERCASE | | Google Slides | **Manrope** | **Manrope** ExtraBold UPPERCASE | > **Why two fonts on web:** Manrope (Google Fonts) replaces Geometria on screen — Geometria is heavy to load and Micra adds nothing a screen eyebrow can't get from Manrope ExtraBold. In print/decks the font embeds in the file, so the original brand pair (Geometria + Micra) is used, faithful to the BrandGuide. > **Weight ceiling:** Manrope on Google Fonts maxes at **800 (ExtraBold)** — there is no 900. Never request `font-weight: 900` on Manrope: the browser fakes it (synthetic bold) and it renders inconsistently across browsers/exports. If you need a true heaviest weight on web (e.g. a banner headline), use real **Geometria Heavy 900** as a deliberate exception (see §8.4 banner generator) — it ships in `fonts.css`. ### 4.2 Scale 12 / 14 / 16 / 18 / 20 / 24 / 32 / 40 / 56 / 72 / 96 / 128 px ### 4.3 Line heights - Tight: 1.05 (large headings) - Snug: 1.2 (medium headings) - Normal: 1.45 (body) - Relaxed: 1.6 (long-form) ### 4.4 Letter spacing - Tight: `-0.02em` (large headings) - Wide: `0.04em` (captions) - Xwide: `0.16em` (eyebrow labels — Manrope Bold UPPERCASE) ### 4.5 Casing rules - **Sentence case** for headlines and buttons (e.g. "Book a call", not "Book A Call") - **ALL CAPS with 0.16em tracking** ONLY for eyebrows, badges, section tags (web: Manrope ExtraBold; print/decks: Micra Bold) - **Title Case** reserved for the wordmark and proper nouns ### 4.6 Geometria + Micra for print/decks When producing **print / HTML decks / PDF** (anything that embeds the font), use the original brand pair: - **Geometria** for headings and body — the typographic signature for offline brand artifacts. - **Micra** for eyebrow / badge / decorative ALL-CAPS labels — exactly the role it has in the BrandGuide. Two weights (Regular, Bold). Same casing and spacing rules apply. Load via the same `fonts.css`. For **Google Slides** decks (API-generated): use Manrope. Always specify `weightedFontFamily: { fontFamily: "Manrope", weight: 700 }` — without it, Slides falls back to serif. (Slides can't embed Micra, so Slides eyebrows use Manrope ExtraBold.) > **Web vs print:** Micra is print-only — never load or use it on screen. Helvetica is never used. --- ## 5. COMPONENTS ### 5.1 Buttons - **Primary:** bg `#2134EA`, color `#fff`, border-radius `8px` (`--r-md`), height `44px`, font-weight 700, no default shadow — hover shadow `0 8px 20px rgba(33,52,234,0.18)` *(owner-resolved 2026-07-22: was pill 999px + always-on shadow; 8px matches the geometric/chevron brand + one radius system)* - **Large primary:** height `56px`, padding `0 28px` - **Secondary:** transparent bg, border `1.5px solid #161616`, color `#161616` - **Ghost:** transparent bg, color `#2134EA`, no border ### 5.2 Spacing (4-pt baseline) `4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 / 160` px Macro layout uses upper end (96, 128). Micro spacing inside cards uses 8, 12, 16. ### 5.3 Border radius | Token | Value | Use | |---|---|---| | `--r-sm` | 4px | Small inputs | | `--r-md` | 8px | Standard inputs, smaller cards, **buttons / CTA** | | `--r-lg` | 14px | Prominent cards | | `--r-xl` | 20px | Large hero cards | | `--r-pill` | 999px | Badges, pills, ticker chips (NOT buttons) | Full-bleed sections use 0. ### 5.4 Shadows - Subtle: `0 1px 2px rgba(13,13,38,0.06)` - Card: `0 4px 12px rgba(13,13,38,0.08)` - Modal: `0 12px 32px rgba(13,13,38,0.12)` - Blue CTA (hover only): `0 8px 20px rgba(33,52,234,0.18)` — the only colored shadow; CTA has no default shadow ### 5.5 Motion - Easing: `cubic-bezier(0.2, 0.7, 0.2, 1)` for entries, `cubic-bezier(0.6, 0, 0.2, 1)` for state changes - Durations: 120ms micro / 200ms hover / 320ms reveal - No spring, no bounce, no parallax ### 5.6 Layout - Max content width: `1200px` - Side padding: `clamp(16px, 4vw, 48px)` - Hero text max-width: `920px` --- ## 6. SOCIAL TEMPLATES (11 approved formats) All social formats use canonical chevron geometry. Two colorway variants where applicable: - **Variant A:** Photo top / chevron bottom (light layouts) OR photo full-bleed - **Variant B:** Photo bottom (V-shape lock-and-key) / chevron top OR brand-led on solid blue ### 6.1 Approved formats | # | Format | Size | Notes | |---|---|---|---| | 01 | LinkedIn Banner | 1584×396 | Horizontal, blue divider chevron | | 02 | LinkedIn Post | 1200×628 | Horizontal, A/B variants | | 03 | LinkedIn Square | 1200×1200 | A: photo+chevron, B: blue+photo | | 04 | LinkedIn Carousel | 1080×1350 | Full-width chevron stripe, V-lock photo | | 05 | Instagram Feed Post | 1080×1080 | **Small-format strategy** (see §6.4) | | 06 | Instagram Story | 1080×1920 | A: photo top, B: photo bottom V-lock | | 07 | Instagram Reel cover | 1080×1920 | Same geometry as Story | | 08 | Facebook Post | 1200×630 | Same as LinkedIn Post | | 09 | Twitter / X Post | 1600×900 | Horizontal banner | | 10 | Pinterest Pin | 1000×1500 | Vertical, full-bleed photo | | 11 | Telegram Avatar | 512×512 | **Avatar template** (see §6.5) | ### 6.2 Photo top + chevron bottom (Variant A) Full-canvas photo. Solid chevron at the bottom edge, vertex (tip-up for vertical, tip-right for horizontal). Text overlaid on the chevron in white. No white background strip — chevron sits directly on photo. ### 6.3 V-shape lock-and-key (Variant B for vertical formats 04, 06, 07) Photo at the bottom of canvas, with **V-shape top edge** that locks into the V-cut (inner notch) of the chevron above it. **Example for Instagram Story (1080×1920):** - Chevron tip-UP at `y=550`, V-cut at `(540, 662)`, shoulders at `(0, 708)` and `(1080, 708)`, bottom at `y=820` - Photo clip-path: `polygon(0 820, 540 662, 1080 820, 1080 1920, 0 1920)` — V-shape top matches chevron's V-cut for zero-gap lock-and-key fit ### 6.4 Small-format strategy (1080×1080 IG Feed, 512×512 Telegram) For formats where a full-bleed chevron would dominate the composition awkwardly, use: - **Photo full-bleed** with `object-fit: cover` and `object-position: center 30%` - **Dark gradient overlay** at bottom for type legibility: `linear-gradient(to top, rgba(13,13,38,0.7) 0%, rgba(13,13,38,0) 50%)` - **Logo** (Logo_White_White_Line.svg) in top-left, 24px height, 48px margin - **Eyebrow + Headline** white text bottom-left - **Corner chevron watermark** — small canonical chevron (40×80px) in bottom-right at 0.9 opacity, as brand cue without dominating ### 6.5 Telegram Channel Avatar template (512×512) This is a **template-generator** layout. The same template applies to all `#LP` work-chat avatars (WORK #LP, BISHKO #LP, SYSTEM #LP, DESIGN #LP, SALE #LP, etc). - **Solid blue background** (#2134EA), border-radius 50% (circle) - **Eyebrow (dynamic):** chat name (e.g. "WORK", "AQUA", "DESIGN"), Manrope ExtraBold, all-caps, white, ~60px, upper third - **Center accent:** large canonical chevron pointing UP, white, ~17×36px, mid-canvas, vertex points at eyebrow word - **Bottom:** full LinkedPromo logo (Logo_White_White_Line.svg) anchored at bottom-center This avatar passes Telegram's circle-crop safe-zone test (r=252). --- ## 7. LOGOS All logos available at `https://linked-promo.com/design/assets/logo%20standard/` Naming format: `Logo {TextColor}_{ArrowColor}_{Layout}.svg` ### 7.1 8 official lockups | Background | Layout | File | |---|---|---| | White / light | Horizontal | `Logo Black_Blue_Line.svg` | | White / light | Vertical | `Logo Black_Blue_Column.svg` | | Dark / navy | Horizontal mono | `Logo White_White_Line.svg` | | Dark / navy | Vertical mono | `Logo White_White_Column.svg` | | Dark / navy | Horizontal blue arrow | `Logo White_Blue_Line.svg` | | Dark / navy | Vertical blue arrow | `Logo White_Blue_Column.svg` | | Blue (#2134EA) | Horizontal | `Logo Blue_White_Line.svg` | | Blue (#2134EA) | Vertical | `Logo Blue_White_Column.svg` | ### 7.2 Chevron-only glyphs - `https://linked-promo.com/design/assets/chevron.svg` — blue - `https://linked-promo.com/design/assets/chevron-white.svg` — white ### 7.3 Rules - **Always SVG.** Never raster. - **Never** type "LINKEDPROMO" as text substitute. Use the SVG file. - Logo height: 22-32px standard nav, larger only in hero (60-80px) or on stand-alone brand surfaces. --- ## 8. BACKGROUNDS ### 8.1 Marketing surfaces (default) Full-bleed dark navy (`#0D0D26`) with sparse repeating-chevron motifs at 5-18% opacity. Never gradient-as-background. ### 8.2 Patterns 5 chevron-based SVG patterns × 2 themes (light + dark) = 10 files: | File | Description | |---|---| | `pattern-01-stacked-*.svg` | 3 chevrons with decreasing opacity, pointing right. Energetic. | | `pattern-02-diagonal-*.svg` | 5 chevrons climbing diagonally up-right. Growth narrative. | | `pattern-03-upward-*.svg` | 5 chevrons stacking vertically, pointing UP. Roadmap content. | | `pattern-04-repeating-*.svg` | Grid of small chevrons. Subtle texture wallpaper. | | `pattern-05-one-arrow-*.svg` | Single bold chevron with 6 decorative motion lines. Hero accent. | Patterns live at `https://linked-promo.com/design/styles/patterns/`. ### 8.3 Backgrounds hub (static + dynamic) `https://linked-promo.com/design/backgrounds/` is a router into two types (mirrors the presentation hub: two route cards → sub-pages, breadcrumb + back-to-hub). **Static** — `/design/backgrounds/static/`: 21 ready brand backgrounds as downloadable PNG 1600×900 (16:9), the same asset set as the banner generator (§8.4) — no duplication, the page pulls the same `tools/banner-generator/bg/.png`. Curated into **Universal** (symmetric / textured / subtle, work under anything) and **Banner-layout** (leave an empty text zone, for banners). Each carries a light/dark tone tag for text colour. For a background WITH text, use the banner generator, not these. **Dynamic** — `/design/backgrounds/dynamic/`: 16 animated chevron / brand-mark backgrounds for landing pages. Notable: - Magnetic Chevron Field — brand mark, mouse tilt - Chevron Marquee — autonomous continuous flow - Chevron Conveyor — perspective parallax - Chevron Rise — curtain, cursor part - Chevron Grid — lattice, cursor pull - **Pinwheel Field** — the p.21 pattern (12 L-corners, §2.6) tiled across the field; each motif drifts/breathes, cursor brightens the unit it passes over Hub + catalog: `https://linked-promo.com/design/backgrounds/` Embed a dynamic one via iframe: `