# 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-05-25

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

---

## 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 between blue and dark
- Bluish-purple gradients
- Tinted blacks not in the token list

---

## 4. TYPOGRAPHY

### 4.1 Fonts

**Primary: Geometria** (custom, bundled at `/design/fonts/`)
- Weights: 300 Light / 400 Regular / 500 Medium / 700 Bold / 800 ExtraBold / 900 Heavy
- Use for: **everything** — body, headings, UI labels, buttons, captions

**Display: Micra** (custom, bundled)
- Weights: 400 / 700
- Use **only** for: eyebrow labels (12px, uppercase, 0.16em tracking, blue color), display accents

**Fallback stack:** `-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`

**Load via:** `<link rel="stylesheet" href="https://linked-promo.com/design/fonts/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` (Micra eyebrow labels)

### 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 Micra eyebrows, badges, section tags
- **Title Case** reserved for the wordmark and proper nouns

---

## 5. COMPONENTS

### 5.1 Buttons

- **Primary:** bg `#2134EA`, color `#fff`, border-radius `999px` (pill), height `44px`, font-weight 700, box-shadow `0 12px 28px rgba(33,52,234,0.28)`
- **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 |
| `--r-lg` | 14px | Prominent cards |
| `--r-xl` | 20px | Large hero cards |
| `--r-pill` | 999px | Buttons, badges, pills |

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: `0 12px 28px rgba(33,52,234,0.28)` (the only colored 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"), Geometria Heavy, 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 Interactive backgrounds

Animated chevron backgrounds for landing pages. Variants:
- 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

Embed via iframe: `<iframe src="https://linked-promo.com/design/backgrounds/embed.html?bg=rain&theme=dark" />`

---

## 9. BRAND RULES (non-negotiable, applies to ALL outputs)

1. **Marketing surfaces default to dark navy** (`#0D0D26`), not white.
2. **Blue (`#2134EA`) appears on ~20% max** of composition — it earns attention because it is never wallpaper.
3. **The chevron is the only decorative element.** Used as: bullet, CTA arrow, divider, repeating pattern, hero accent.
4. **No gradients** between blue and dark. Solid fills only.
5. **No emoji.** Unicode arrows (→) acceptable for inline link arrows only.
6. **Sentence case** for headlines and buttons. ALL CAPS only for Micra eyebrow labels.
7. **No frosted glass, no warm image treatments, no colored icon squares.**
8. **Iconography:** Lucide icons at 1.5px stroke, 18-20px in body, 24px in nav. Confirm with client before production.
9. **Arrows ONLY point right (→) or up (↑).** Never left, never down.
10. **No 3D bevels, drop shadows on chevron, or specular highlights.**
11. **Logos always SVG** from `/assets/logo standard/`. Never replicate as text.
12. **Photos:** high-contrast, slightly cool. No warm / grain treatments. No gradients.

---

## 10. CONTENT VOICE

**Tone.** Straightforward and faintly dry. No exclamation marks. No hype words ("revolutionary," "game-changing," "synergize"). Numbers earn the claims.

**Pronoun.** "We" for the agency, "you" for the reader. First-person plural is comfortable.

**Length.** Headlines fit in a breath. Sub-copy 1-2 sentences. Long-form reads in plain English with short paragraphs.

**Examples in voice:**
- "Outbound that earns replies." (hero)
- "A campaign that converts." (section header)
- "No spam. No sequences. Just a calendar link." (form fineprint)
- "From 0 to 47 SQLs in 6 weeks." (case study — number-anchored)

---

## 11. REFERENCE LINKS

- **Design portal:** https://linked-promo.com/design/
- **W3C tokens (JSON):** https://linked-promo.com/design/tokens.json
- **CSS tokens:** https://linked-promo.com/design/tokens.css
- **Font stylesheet:** https://linked-promo.com/design/fonts/fonts.css
- **Brand guide PDF (Ukrainian, 30 pp):** https://linked-promo.com/design/assets/BrandGuide_LP.pdf
- **LLMs sitemap:** https://linked-promo.com/design/llms.txt

### 11.1 Archive entry points

- **Design system kit:** https://linked-promo.com/design/system/
- **Social templates (11):** https://linked-promo.com/design/social/
- **Presentation standard:** https://linked-promo.com/design/presentation/
- **Interactive backgrounds:** https://linked-promo.com/design/backgrounds/

---

## 12. HOW TO USE THIS FILE

1. **As system prompt** — paste this entire file as system instructions in Claude, ChatGPT, Gemini, Cursor, v0, or any LLM.
2. **As agent context** — add to `AGENTS.md` or `CLAUDE.md` in any repo. Reference the URL: `https://linked-promo.com/design/design-system.md`
3. **As skill** — fetch as part of skill bundle (Claude Code). The bundled skill is at `https://linked-promo.com/design/skill/linked-promo-design.skill`
4. **As design brief** — send to freelancer or agency for brand-compliant work. Pair with the brand guide PDF.

---

## 13. WHEN TO ASK BEFORE ACTING

- Adding a new chevron variant not described in §2
- Introducing a color outside §3
- Using a non-Geometria / non-Micra font
- Creating a new social format beyond the 11 in §6.1
- Adding 3D, gradients, or anti-canon decoration
- Creating a logo that is not one of the 8 in §7.1

When in doubt, ask the user. This prompt is the contract.
