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 / 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.

Type	Background	Headline color	Use for
Act	Purple #5E17EB	White #FFFFFF	Title, section divider, closer, hero
Content	Light grey #F1F2F2	Black #000000	Everything else — info, evidence, lists

§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

Mode	Pure #FFFFFF at root?	Where white is allowed
Neon	YES — #FFFFFF is a valid canvas (one of two — the other is rich black #0A0A0A).	Anywhere, but pick ONE per surface. No grey-white middle.
Decks	NO — page/slide root is #5E17EB (act) or #F1F2F2 (content).	Pure white allowed on cards inside content slides.
Warm Editorial	NO — #FFFFFF banned everywhere. Use #FAFAF7 off-white.	—

---

§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)

Never stack EN + HE side-by-side or in adjacent positions. Anton + Rubik at display sizes overlap visually (descenders invade the next ascender row). Use a language toggle instead — one language visible at a time. Full hardened pattern in references/lessons-learned.md § Bilingual toggle.

One Google Fonts link — always safe to load all four

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500&family=Rubik:wght@400;500;600;700;800;900&family=Assistant:wght@400;500;600;700&display=swap" rel="stylesheet">

Stack the families in one variable so the browser picks per glyph:

:root {
  --yuv-font-display: 'Anton', 'Rubik', system-ui, sans-serif;
  --yuv-font-body:    'Inter', 'Assistant', system-ui, sans-serif;
  --yuv-font-mono:    '"JetBrains Mono"', '"SF Mono"', ui-monospace, Menlo, monospace;
}
h1, h2, h3, .display {
  font-family: var(--yuv-font-display);
  text-transform: uppercase;        /* Latin only — Hebrew unaffected */
  letter-spacing: 0;                /* Anton is condensed — DO NOT add negative tracking */
  line-height: 1.0;
}
/* Only at hero size (≥ 180px) and only when the headline visually demands it: */
.display-hero { letter-spacing: -0.01em; }   /* max — never tighter */

Banned defaults: serif fonts, script fonts, system-ui, the default Tailwind font stack.

---

§3. Brand assets — bundled in assets/

Four canonical files are bundled with this skill. Reach for them when an output deserves a real brand mark instead of a placeholder.

Asset retrieval — fallback chain (works on any machine)

When you need a brand image, follow this chain in order:

1. Look inside the skill bundle. On a properly-installed machine, the assets are always present at one of: ~/.claude/skills/yuv-design-system/assets/, ~/.copilot/skills/yuv-design-system/assets/, or ~/.agents/skills/yuv-design-system/assets/. Use whichever path your runtime exposes.

2. If the skill location isn't known (headless, fresh container), scan common spots for a local clone of the repo: ~/Documents/ai-decks/yuv-design-system/, ~/yuv-design-system/, ~/Code/yuv-design-system/, ~/dev/yuv-design-system/. If found, use its assets/.

3. If nothing is local, clone the canonical repo. Private, but the user's GitHub auth on the machine will let git clone work without prompts:

   git clone https://github.com/hoodini/yuv-design-system.git ~/Documents/ai-decks/yuv-design-system
   ~/Documents/ai-decks/yuv-design-system/scripts/install-skill.sh
   

   That populates ~/.claude/skills/yuv-design-system/assets/ plus the Copilot/agent symlinks.

4. Last-resort fallback for sandboxed sessions where step 3 isn't possible (e.g. CI with no git auth): embed via base64 data:image/png;base64,… inline. Acceptable only as a last resort — file references stay small and edit-friendly.

The repo is https://github.com/hoodini/yuv-design-system and is private. Don't attempt raw.githubusercontent.com URLs — they will 404 without a personal access token. Use git clone instead.

The four files

File	When to use	Notes
assets/logo-square-transparent.png	Logos on light or dark backgrounds — anywhere you need a clean cutout (favicon, header, app icon, social card on a custom bg)	Phoenix mark, transparent background, square
assets/logo-square-color.png	Hero badges, social profile images, OG images, anywhere the logo needs its own colored backplate	Phoenix mark on the brand backplate, square
assets/logo-rectangle-wordmark.png	Watermarks (bottom-right corner of slides, videos, screenshots), email signatures, lower-third overlays, certificates	"LET'S FLY HIGH · YUV.AI" wordmark
assets/profile-yuval-studio.png	About sections, course pages, podcast art, "meet your instructor" blocks, speaker bio cards	Yuval in the studio under the YUV.AI neon

Quick path — call ensure-assets.sh

If you're running in a shell-capable session and just want a guaranteed-good assets path, run:

ASSETS_DIR=$(/path/to/yuv-design-system/scripts/ensure-assets.sh)
echo "$ASSETS_DIR"

The script walks the fallback chain (skill bundle → local clones → git clone) and prints the absolute path to a working assets/ directory. If GitHub auth isn't set up and the clone fails, it exits non-zero with a clear message.

Embedding rules

• Watermark placement: bottom-right corner of any slide / video / shareable image, ~3% of the canvas width margin, ~120–180px wide at 1920×1080. Use logo-rectangle-wordmark.png for watermarks. Never stretch.
• Hero logos on dark backgrounds: prefer logo-square-transparent.png so the phoenix sits on whatever background you have.
• Hero logos on light/grey/bone backgrounds: also prefer the transparent square — the mark has enough internal color to stand on its own.
• Social profile / OG cards: logo-square-color.png (has its own backplate so it stands out in feeds).
• Profile photo for bios / about / contact: profile-yuval-studio.png. Crop to square or 4:5 portrait depending on the surface.

For web embedding, copy the asset into the project's public/ and reference it; or for HTML artifacts where you can't add files, inline as a data:image/png;base64,… URI (only acceptable as a last resort — file references are preferred). On slides, embed natively.

---

§4. Canonical bio + link set — auto-include

Whenever an output has a footer, contact section, "find me elsewhere" block, profile card, speaker bio, credits panel, or video end-screen, include this set automatically. Don't ask Yuval to provide it.

Credentials (use in bios, about sections, speaker intros, course pages)

• 2× GitHub Star (recognised twice by GitHub for community impact)
• AWS Gen AI Superstar
• AI commentator on Channel 12 News (Israel) — מגיש פינת AI בחדשות 12 / "AI segment host on Channel 12 News" / "Resident AI commentator on Channel 12 News"
• AI Builder & Speaker
• Technical Content Creator
• Founder of YUV.AI — leading Hebrew-speaking AI educator and technical innovator
• Active communities across X, Instagram, TikTok, YouTube, LinkedIn, Facebook, GitHub

Suggested one-liners (drop into bios)

• Yuval Avidani — 2× GitHub Star, AWS Gen AI Superstar, AI commentator on Channel 12 News (Israel). Founder of YUV.AI. Builds, teaches, and ships AI that actually works.
• AI Builder & Speaker. Technical Content Creator. 2× GitHub Star. AWS Gen AI Superstar. The AI guy on Channel 12 News.
• Hebrew: יובל אבידני — מגיש פינת AI בחדשות 12, GitHub Star כפול, AWS Gen AI Superstar, מייסד YUV.AI. בונה, מלמד, ומשגר AI שעובד.

Link set

website:  https://yuv.ai
linktree: https://linktr.ee/yuvai
x:        https://x.com/yuvalav              · @yuvalav
instagram:https://instagram.com/yuval_770     · @yuval_770
tiktok:   https://www.tiktok.com/@yuval.ai    · @yuval.ai
youtube:  https://youtube.com/@yuv-ai         · @yuv-ai
github:   https://github.com/hoodini           · @hoodini
facebook: https://facebook.com/yuval.avidani  · @yuval.avidani
linkedin: https://www.linkedin.com/in/yuval-avidani-87081474/

Inclusion rules

• Footers: all eight platforms + linktree, each as an icon-only button (Phosphor or Lucide brand glyphs, single-color stroke matching the active palette).
• Speaker bios / about cards: website + linkedin + linktree + one signature social (X or Instagram).
• Video end-screens: website + 3 socials (typically X, Instagram, YouTube).
• Email signatures / certificate footers: website + linkedin + linktree.
• Linktree-as-shortcut: for any "follow me everywhere" CTA, link directly to https://linktr.ee/yuvai instead of listing all eight — punchier and one tap.

Drop-in HTML snippet (Neon mode — DEFAULT for YUV.AI web/apps)

<footer class="yuv-socials" style="display:flex;gap:16px;align-items:center;justify-content:center;padding:48px 0;background:#FFFFFF">
  <a href="https://yuv.ai" aria-label="Website" style="color:#FF1464"><i class="ph ph-globe"></i></a>
  <a href="https://x.com/yuvalav" aria-label="X" style="color:#FF1464"><i class="ph ph-x-logo"></i></a>
  <a href="https://instagram.com/yuval_770" aria-label="Instagram" style="color:#FF1464"><i class="ph ph-instagram-logo"></i></a>
  <a href="https://www.tiktok.com/@yuval.ai" aria-label="TikTok" style="color:#FF1464"><i class="ph ph-tiktok-logo"></i></a>
  <a href="https://youtube.com/@yuv-ai" aria-label="YouTube" style="color:#FF1464"><i class="ph ph-youtube-logo"></i></a>
  <a href="https://github.com/hoodini" aria-label="GitHub" style="color:#FF1464"><i class="ph ph-github-logo"></i></a>
  <a href="https://facebook.com/yuval.avidani" aria-label="Facebook" style="color:#FF1464"><i class="ph ph-facebook-logo"></i></a>
  <a href="https://www.linkedin.com/in/yuval-avidani-87081474/" aria-label="LinkedIn" style="color:#FF1464"><i class="ph ph-linkedin-logo"></i></a>
  <a href="https://linktr.ee/yuvai" aria-label="Linktree" style="color:#00E5FF"><i class="ph ph-tree-structure"></i></a>
</footer>

For Decks mode, swap #FF1464 → var(--yuv-purple) and #FFFFFF → var(--yuv-grey). For Warm Editorial, swap #FF1464 → #FF1464 (already pink), #FFFFFF → var(--off-white).

Full machine-readable link list (JSON, handles + URLs): references/social-and-links.md.

---

§5. Visuals, infographics & charts — the "thinking in pictures" default

Yuval prefers visual explanation over prose wherever possible. Charts, infographics, dynamic diagrams, isometric scenes, animated counters, before-and-after splits. When something could be explained as a number, a chart, or a diagram, default to the visual.

Encoding rules in brand

• Neon (default) primary series: #FF1464 pink. Highlight or "hero" data point: #00E5FF cyan. Secondary series: charcoal #1A1A1A, soft grey #F4F4F6. Never blue (other than the brand cyan), never default chart palettes.
• Decks (Fly High) primary series: #5E17EB purple. Highlight: #FFEC00 yellow. Secondary: #3D0DA8 / #1A1A1A / #D4D6D6. Charts in decks only.
• Warm Editorial primary series: #FF1464 pink. Highlight: #E5FF00 yellow. Secondary: charcoal / warm grey.
• Always label the hero number. If there's a big stat, render it with <CounterUp> (component in references/components/CounterUp.tsx) — count from 0 with requestAnimationFrame, ease-out cubic, ~1400ms.
• No 3D bar charts. No pie charts with > 4 slices. No rainbow palettes. Pick categorical or sequential, never both.
• Grids and axes: 1px charcoal at 10–15% opacity. No coloured gridlines.
• Type on charts: Anton uppercase for axis labels and section titles, Inter for tick numbers, JetBrains Mono for raw readouts.

Default libraries

Surface	Library	Notes
React chart	recharts	Lightweight, easy palette override.
Vanilla HTML chart	Chart.js	Drop-in, easy to skin via options.scales + custom colors.
Bespoke / interactive infographic	D3 + GSAP	When the visual has personality — sankey, force layout, custom layout.
Hand-built SVG infographic	inline <svg>	For static / printable / Hyperframes-capturable visuals.
Slide-deck stat slide	<CounterUp> + Anton heading	Pattern in references/components/CounterUp.tsx

Full chart-skinning guidance, sample Chart.js options object, recharts override pattern, and isometric SVG patterns → references/visuals-and-charts.md.

---

§6. Signature components (Decks mode — Fly High)

These components apply ONLY in Decks mode, where the purple/yellow palette and slide-canvas rules are in play. Don't drop them into a Neon-mode web app or game — that's the wrong language.

These are the recognisable fingerprints. Full source in references/components/.