/yuv-design-system

name: yuv-design-system
description: Yuval Avidani's YUV.AI brand and design system. Apply ONLY when YUV.AI-branded output is requested — presentations, decks, keynotes, portfolio, brand site, profile, speaker bio, brand assets, or any prompt mentioning YUV.AI / "my brand" / "my deck" / "my site" / "for me". Do NOT auto-trigger on generic "build a game / web app / dashboard / landing page" without YUV.AI context — those use whatever palette fits. Three modes; NEON (hot pink #FF1464 + neon cyan #00E5FF + white, DEFAULT for YUV.AI web, apps, games, dashboards, social, general visual work); DECKS (Fly High purple/yellow/grey, presentations and slides ONLY); Warm Editorial (pink/yellow/bone for Hope, Marcus, bigcats.ai, practical.yuv.ai). Universal Fly High throughline across all modes; flight/progress motifs (HUD strips, dials, "Let's Fly High" tagline, phoenix mark). Anton + Inter (EN), Rubik + Assistant (HE), letter-spacing 0 default. Bundled brand assets, canonical socials, credentials. Project brand wins if specified.

yuv-design-system

The canonical personal brand and design system for **Yuval Avidani** (yuv.ai). This skill encodes how YUV.AI work should *look* — palette, typography, motifs, assets, links — and **when** to apply those rules at all.

**Source of truth:** Public reference repo at https://github.com/hoodini/yuv-design-system (private). The repo holds runnable tokens and components; this skill encodes the rules so Claude can apply them in any context.

**Where this skill sits in the YUV.AI pyramid:** `yuv-design-system` is the middle-tier visual-rules skill. Above it is `yuv-pilot` — the top-of-pyramid orchestrator that routes ambiguous or multi-medium YUV.AI requests to the right combination of downstream skills. Below it (and beside it in the middle tier) are `yuv-decks` (slide builds) and `yuv-viral-video` (viral short MP4s). When `yuv-pilot` or a sibling skill calls into here, they pin a specific palette mode (Neon / Decks / Warm Editorial) — never let the mode drift mid-task. See `yuv-pilot/SKILL.md` for the full pyramid map.

---

§0. WHEN TO APPLY THIS SKILL — read this before anything else

This skill is the **YUV.AI brand identity**, not a generic visual-design skill. Apply it conservatively.

✅ Apply when

• The output is explicitly for **YUV.AI** or **Yuval personally** — his portfolio, his brand site, his keynote, his deck, his speaker bio, his profile, his social cards, his About page, his linktree, his course landing, an artifact featuring his brand assets or logos.
• Yuval mentions "**my brand**", "**my design system**", "**my deck**", "**my site**", "**my presentation**", "**for me**", "**YUV.AI**", "Fly High", "Let's Fly High", or anything that signals the output is *his* brand identity.
• A YUV.AI brand asset (logo, profile photo, watermark) is needed.

❌ Do NOT apply when

• Yuval asks for a **generic** game, web app, dashboard, landing page, demo, prototype, or visual without YUV.AI context. *("Build me a snake game" → pick whatever palette fits the game, NOT the brand palette.)*
• The work is for a different brand, a client, a third party, or anyone other than Yuval personally.
• Yuval explicitly names a different palette or framework.

When unsure

Ask once: *"Is this for the YUV.AI brand, or open palette?"* — then commit. Don't drift mid-task.

**Default behavior across Claude / Copilot / Cursor: if a YUV.AI signal is missing, stay out and let the chosen tool's own design instincts apply. Over-triggering this skill is worse than under-triggering it.**

---

How to use this skill (when it applies)

1. **Pick the palette mode by medium** (see §1):

• Presentation / deck / keynote → **Decks** (Fly High purple/yellow/grey)
• Web / app / game / dashboard / social / general → **Neon** (DEFAULT — pink/cyan/white)
• Hope / Marcus / bigcats / course-landing → **Warm Editorial** (pink/yellow/bone)

2. **Apply mandatory typography** (Anton/Inter + Rubik/Assistant — see §2). 3. **Carry the universal Fly High throughline** (motifs across modes — see §1a). 4. **Use bundled brand assets** when a logo, profile, or watermark fits (see §3). 5. **Include the canonical link set + credentials** in footers, About blocks, credits, speaker bios (see §4). 6. **Deep-dive references** — load the file that matches the medium:

| Medium | Read this file | |---|---| | YUV.AI web / app / game / dashboard | `references/palettes-neon.md` + `references/web-and-react.md` | | Slide decks / keynotes | `references/presentations.md` | | Infographics / charts / data viz | `references/visuals-and-charts.md` | | Social images / posters | `references/social-images.md` | | Hebrew / bilingual / RTL | `references/typography.md` § Hebrew | | Hardened patterns | `references/lessons-learned.md` |

Load only what's relevant — keeps context small.

---

§1. Palette modes — pick by medium

Three named modes. **Pick by the kind of output, not your gut feel.** Don't drift.

| Mode | When to use | Palette | |---|---|---| | **Neon** *(DEFAULT for YUV.AI brand work)* | Websites, web apps, games, dashboards, social images, posters, AI tools, profile/about content, ANY YUV.AI visual that isn't a slide deck | Hot pink + neon cyan + white + black | | **Decks** *(Fly High)* | Presentations, slides, keynotes, hackathon decks, talk recordings, video banners formatted as a deck | Purple + yellow + light-grey | | **Warm Editorial** | Hope (cheetah), Marcus (white lion), bigcats.ai, practical.yuv.ai course landing — any project in the editorial-pink-bone brand family | Warm pink + yellow + off-white + bone |

If you're picking a mode mid-task and it isn't obvious, ask once and commit.

§1a. The Universal Fly High throughline (applies to ALL modes)

Regardless of palette, YUV.AI work carries the same brand DNA — these motifs are what makes something *feel* YUV.AI:

• **Flight metaphors** in copy: climb / cruise / descent / pre-flight / landed / tak