---
name: linked-promo-design
description: Use this skill to generate well-branded interfaces, slides, social posts, presentations, and assets for Linked Promo — either for production or throwaway prototypes / mocks. Contains essential design guidelines, colors, typography, fonts, logos, chevron canon, social templates, brand voice, and full UI kit.
user-invocable: true
version: 2.0
canonical-url: https://linked-promo.com/design/skill/
---

# Linked Promo Design Skill

When the user wants to create anything visual or brand-related for Linked Promo, use this skill.

## What this skill provides

Read the **design-system.md** file at https://linked-promo.com/design/design-system.md — this is the full master prompt with 13 sections covering:

1. Brand Identity — company, voice, reader profile
2. **Chevron Canon** — sacred 6-vertex polygon, arrow direction rule, scaling, echo lines, forbidden variants
3. **Colors** — primary, navy, neutrals, semantic (18 tokens, exact hex values)
4. **Typography** — Geometria + Micra, scale, line-heights, letter spacing, casing rules
5. **Components** — buttons, spacing, radius, shadows, motion, layout
6. **Social Templates** — 11 approved formats, V-shape lock-and-key, small-format strategy, Telegram avatar template
7. **Logos** — 8 official lockups (Logo {TextColor}_{ArrowColor}_{Layout}.svg pattern)
8. **Backgrounds** — marketing defaults, 5 SVG patterns, 14+ interactive backgrounds
9. **Brand Rules** — 12 non-negotiable rules
10. **Content Voice** — tone, pronoun, length, examples
11. Reference Links
12. How to use
13. When to ask before acting

## Quick start

When generating any visual artifact:

1. **Fetch the full prompt:** `https://linked-promo.com/design/design-system.md`
2. **Fetch tokens (JSON):** `https://linked-promo.com/design/tokens.json` — colors, type, spacing, radius, shadows, motion, chevron polygon coordinates
3. **Or CSS tokens:** `https://linked-promo.com/design/tokens.css` — drop-in CSS custom properties
4. **Reference assets:**
   - Logos: `https://linked-promo.com/design/assets/logo%20standard/`
   - Chevron: `https://linked-promo.com/design/assets/chevron.svg`
   - Fonts CSS: `https://linked-promo.com/design/fonts/fonts.css`
   - Patterns: `https://linked-promo.com/design/styles/patterns/`
   - Interactive backgrounds: `https://linked-promo.com/design/backgrounds/embed.html?bg=...&theme=...`

## Hard rules (never violate)

- **Colors:** only #2134EA (blue), #0D0D26 (navy), #FFFFFF, #161616 + token tints. No others. No gradients between blue and dark.
- **Fonts:** Geometria for body/headings/UI. Micra only for eyebrow labels (12px, uppercase, 0.16em tracking, blue).
- **Chevron:** canonical polygon `0,0 207,0 503,540 207,1080 0,1080 294,540`. Arrows ONLY → or ↑. Never left. Never down. Proportional scaling only.
- **Logo:** always SVG from `/assets/logo standard/`. Never type "LINKEDPROMO" as text. 8 official lockups only.
- **No emoji.** Unicode arrows (→) acceptable only for inline link arrows.
- **No 3D bevels, drop shadows on chevron, gradients, frosted glass, warm photo treatments.**

## How to invoke

If the user invokes this skill without specific guidance, ask:
1. What format are we building? (slide, social post, landing page, banner, avatar)
2. What's the message?
3. Light or dark surface?
4. Which social format if applicable? (LinkedIn Banner, IG Story, Telegram Avatar, etc — see §6.1 of design-system.md)

Then produce static HTML, SVG, or production code following all rules above.

## Output behavior

- If creating visual artifacts (slides, mocks, prototypes) — emit static HTML files with embedded SVG and CSS variables that match tokens.
- If working on production code — emit components/styles using the exact token names from tokens.css.
- Always include a comment block at the top noting "Generated per Linked Promo Design System v2.0 — see https://linked-promo.com/design/design-system.md".

## Asset URLs (canonical, public)

| Resource | URL |
|---|---|
| Master prompt | https://linked-promo.com/design/design-system.md |
| W3C tokens (JSON) | https://linked-promo.com/design/tokens.json |
| CSS tokens | https://linked-promo.com/design/tokens.css |
| Fonts CSS | https://linked-promo.com/design/fonts/fonts.css |
| Logos folder | https://linked-promo.com/design/assets/logo%20standard/ |
| Chevron SVG | https://linked-promo.com/design/assets/chevron.svg |
| Patterns folder | https://linked-promo.com/design/styles/patterns/ |
| Interactive bg embed | https://linked-promo.com/design/backgrounds/embed.html |
| Download / Brand Pack | https://linked-promo.com/design/download/ |
| AI sitemap | https://linked-promo.com/design/llms.txt |
| This skill | https://linked-promo.com/design/skill/SKILL.md |

## Bundled files (when this skill is downloaded as ZIP)

The skill bundle contains:
- `SKILL.md` — this file
- `design-system.md` — full master prompt (copy from /design/)
- `tokens.css` — CSS custom properties
- `tokens.json` — W3C tokens
- `fonts.css` — @font-face declarations
- `logos/` — 8 SVG lockups
- `chevron.svg` + `chevron-white.svg`
- `patterns/` — 10 SVG background patterns
- `README.md` — installation and usage
