hoodini/ai-agents-skills/yuv-design-system

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)

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

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.

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 / takeoff / heading / altitude / "let's fly high".
• Progress visualisations: gradient progress bars (purple→yellow on Decks, pink→cyan on Neon, pink→yellow on Warm Editorial), HUD strips, altimeter/compass-style dials, count-up animations on stats.
• Phoenix mark (or the Y-bird) somewhere meaningful — hero, About, watermark.
• "LET'S FLY HIGH · YUV.AI" watermark in the bottom-right corner of any shareable surface (slide, social card, hero crop).
• Anton uppercase display type with letter-spacing: 0 default.
• JetBrains Mono for instrument-style readouts and section eyebrows in tracking 0.2em+.

These DNA elements travel across every mode. The palette tells you which brand chapter; the motifs tell you it's still YUV.AI.

§1b. Neon — NEW DEFAULT mode (web, apps, games, general visual work)

The everyday YUV.AI brand. Tavus-inspired: hot pink as the lead, neon cyan as electric counterpoint, white or rich black as the canvas. Best for product surfaces, web apps, games, dashboards, anything browser-rendered or interactive.

:root {
  --yuv-pink:       #FF1464;   /* primary brand — CTAs, accents, the thread color */
  --yuv-pink-hot:   #FF0080;   /* high-energy variant for glow / shadow / hover */
  --yuv-cyan:       #00E5FF;   /* electric secondary — data, highlights, focus rings */
  --yuv-cyan-edge:  #00FFFF;   /* max-neon variant — small surfaces only */
  --yuv-white:      #FFFFFF;   /* canvas (light mode) or text-on-dark */
  --yuv-black:      #0A0A0A;   /* canvas (dark mode) or text-on-light */
  --yuv-charcoal:   #1A1A1A;   /* secondary surface (dark mode), text on light */
  --yuv-soft:       #F4F4F6;   /* alt light surface for layering on white */
}

Neon mode rules:

• Two canvas options: white #FFFFFF or rich black #0A0A0A. Pick ONE per surface. No grey middle ground.
• Pink is the thread — primary CTA fill, hero headline accents, brand stripe.
• Cyan is the second voice — secondary CTAs, focus rings, hero data points, link hover, progress fill (cyan against pink). Cyan never floods — accent only.
• Glow allowed. text-shadow: 0 0 24px var(--yuv-pink), box-shadow: 0 0 32px rgba(0,229,255,0.4). The brand can shimmer; it can't sparkle (no rainbows, no multi-hue gradients).
• Gradients: pink → cyan only. Small surfaces (buttons, text underlines, progress bars). Never full-page wash.
• Headlines: Anton uppercase, white or pink on dark / black on white. Tight line-height: 1.0, letter-spacing: 0 default.
• Card pattern: rich black #0A0A0A background with 1px solid rgba(255,20,100,0.25) border, optional 0 0 0 1px #00E5FF inner glow on hover. On light canvas: white card with 1px solid rgba(0,0,0,0.08) and 4px solid #FF1464 left stripe.
• Cursors and UI affordances can be cyan-tinted; the heroes are pink.

Full deep dive — composition patterns, glow recipes, neon-themed components → references/palettes-neon.md.

§1c. Decks (Fly High) — presentations only

This is the existing purple/yellow/grey deck system. Use ONLY for slides, keynotes, presentations. Don't apply to a web app or game.

:root {
  --yuv-purple:      #5E17EB;   /* primary deck brand, act-slide backgrounds, vertical accent bars */
  --yuv-purple-dark: #3D0DA8;   /* decorative depth, diagonal accents */
  --yuv-yellow:      #FFEC00;   /* loud accent only — never a slide background */
  --yuv-grey:        #F1F2F2;   /* content-slide background */
  --yuv-white:       #FFFFFF;   /* cards on grey, headers on purple */
  --yuv-black:       #000000;   /* headers on grey, body */
  --yuv-grey-dark:   #D4D6D6;   /* dividers on grey */
}

Full deck rules — two-background rule, FlightHUD, PurpleBar, YellowUnderline, signature video banner pattern — live in references/presentations.md. Decks mode is the only mode where the purple/yellow palette applies.

The two-background rule (Decks mode, non-negotiable)

Every slide lives in one of two states. Never invent a third. Yellow is an accent, never a background.

§1d. Warm Editorial tokens

:root {
  --pink:       #FF1464;   /* primary brand, CTAs, thread color */
  --yellow:     #E5FF00;   /* accent — when it shows up, it dominates */
  --black:      #0A0A0A;   /* warm near-black, never blue-black */
  --off-white:  #FAFAF7;   /* paper-feel, replaces #FFFFFF entirely */
  --bone:       #F5EEE4;   /* transitional sections, cream */
  --charcoal:   #1A1A1A;   /* primary text on light */
}

Full Warm Editorial rules (paper grain, warm shadows, gradient bans, etc.) → references/palettes-warm-editorial.md.

Rules that apply to ALL modes

• No default Tailwind palette. No slate, zinc, indigo, emerald, etc. Stay in the chosen mode.
• Border radius: `0` or `999px` only. The 8–12px middle ground is the single most "AI template" tell.
• Asymmetric over grid-perfect wherever possible. Offset columns. One element breaks the grid.
• Whitespace is generous. Premium comes from restraint.
• Max content width 1440px. Section padding 120–160px desktop, 64–80px mobile.

Mode-specific canvas / white rules

§2. Typography — mandatory

English

• Display / headlines: Anton. Always UPPERCASE. Letter-spacing default `0` (normal). Anton is already condensed — negative tracking makes letters touch, which is what the system used to do wrong. Only at very large hero sizes (≥ 180px) can you go negative, and never tighter than -0.015em. Line-height 1.0–1.05. Never lowercase, never title case.
• Body / UI: Inter, 400 / 500 / 600 / 700 / 900. Line-height 1.5 for body.
• Mono (readouts, citations, eyebrows): JetBrains Mono.

Hebrew

• Display: Rubik (weights up to 900).
• Body: Assistant.
• Hebrew pages: <html lang="he" dir="rtl"> + logical CSS properties (margin-inline-start, not margin-left).

Bilingual rule (battle-tested)