creative-tv-ui

Files (1)

• SKILL.md

SKILL.md (first lines)

# Creative TV UI Design Patterns

## The Differentiation Imperative

Every generated app MUST look different from every other. The template provides structure — your job is to give it SOUL. A viewer should never think "this looks like that other app." Visual diversity comes from:

1. **Visual signature** — one distinctive element unique to this app
2. **Typography personality** — fonts that match the content's energy
3. **Color depth** — not just flat colors but atmospheric gradients and glows
4. **Focus treatment** — the signature interaction moment
5. **Surface hierarchy** — cards and sections that feel 3D, not flat

## The 10-Foot Creative Challenge

TV design is NOT web design zoomed in. At 10 feet (3 meters — the standard viewing distance), users perceive:
- **Shapes and color blocks** before text
- **Motion** more sensitively (peripheral vision is active)
- **Contrast** as the primary hierarchy tool (not size alone)
- **Glow and light** as premium indicators (dark rooms amplify luminance)

### TV Panel Color Physics

TV panels render colors MORE saturated and vibrant than computer screens. The color gamut is narrower, contrast is higher. This means:
- **Desaturate warm colors** — pure red/orange/yellow will appear garish on TV. Pull saturation down 10-20% from what looks good on your monitor.
- **Cool tones are safer** — blue, purple, gray render more predictably across TV panels.
- **Warm tones still work** for cooking/lifestyle apps but use them at lower saturation (e.g., `#D4A574` not `#FFAA00`).
- **Never use pure white (#FFFFFF)** for large text areas — use off-white (`#F5F5F5` or `#EBEBEB`) to reduce glare in dark rooms.
- **Test accent colors at 50% opacity** — if they're still visible and distinctive, the saturation is correct for TV.

### Interaction Cost Shapes Design

D-pad navigation is sequential — users pass through ALL elements on the path. This constrains creative layout:
- **Max 5-7 items visible per rail** — more items = more clicks to reach the last one
- **Prefer fewer, larger cards** over many small ones — reduces traversal cost
- **Hero sections earn their space** — they reduce the total items a user must navigate past
- **Vertical sections: max 4-5 rails visible** before requiring scroll — users should reach any visible content in ≤3 presses

## Visual Personality by Content Type

### Sports / Live Events
- Angular geometry: diagonal cuts on cards, skewed section dividers
- High-energy colors: saturated red/orange accents, electric blue highlights
- Stadium typography: condensed heavy weights (Oswald, Barlow Condensed)
- Scoreboard elements: ticker-style metadata, stats badges, live indicators
- Motion: fast snappy transitions, no ease — linear or ease-out only

### Cooking / Food / Lifestyle
- Organic warmth: golden-hour gradients, warm amber undertones
- Rounded shapes: large border radius (16-24px), soft edges everywhere
- Editorial typography: Playfair Display for headings, friendly body fonts
- Texture: subtle paper/linen-like surface colors, not pure black
- Motion: gentle easing, slightly slower transitions (250-350ms)

### Music / Entertainment / Nightlife
- Neon depth: glow effects that bleed beyond card boundaries
- Glass-morphism: translucent cards with backdrop blur effect
- Bold typography: Bebas Neue, Space Grotesk at extreme weights
- Gradient-rich: multi-stop gradients in backgrounds, even on text (via gradient overlays)
- Motion: spring animations with overshoot, bouncy focus

### Fitness / Health / Wellness
- Athletic precision: sharp edges, geometric consistency, grid alignment
- Clean power: high contrast, bold accent colors on near-black
- Technical typography: monospace for stats, condensed for titles
- Progress elements: accent-colored lines/bars as section dividers
- Motion: fast, precise, no bounce — ease-out with short duration (150-200ms)

### Kids / Animation / Family
- Oversized playful: larger border radius, thicker borders (6-8px)
- Candy colors: gradient fills on cards, not flat — cheerful multicolor
- Rounded friendly type: Nunito, Baloo, Fredoka at heavy weights
- Bouncy elements: oversized focus scale (1.12-1.15), playful shadows
- Motion: spring with high overshoot, slightly exaggerated

### Documentary / News / Educational
- Editorial authority: serif display fonts, strong typographic hierarchy
- Paper weight: surface colors that reference paper/parchment depth
- Minimal decoration: let content breathe, use whitespace as design element
- Accent restraint: one accent used very sparingly (headlines, key indicators only)
- Motion: subtle, almost invisible — refined and professional

## Typography for TV

### Display Fonts (Hero titles, numbers)
Choose fonts with HIGH x-height and BOLD weight. Condensed fonts work exceptionally well on TV because they allow large point sizes without wrapping:

Best categories:
- **Condensed Sans-Serif**: Barlow Condensed, Oswald, Archivo Narrow
- **Heavy Grotesque**: Montserrat Black, Bebas Neue, Archivo Black
- **Slab Serif**: Roboto Slab Bold, Bitter Bold
- **Display**: Playfair Display Bold, DM Serif Display

### Body Fonts (Descriptions, metadata)
Must be:
- Regular or Medium weight (never Light on TV)
- Minimum scaledPixels(24) for body, scaledPixels(18) for captions
- High x-height for readability at distance

Good body fonts: DM Sans, Nunito Sans, Source Sans Pro, Lato, Inter (400-500 weight only)

### Type Scale Pattern
```typescript
const typography = {
  display:  { fontSize: scaledPixels(72), fontWeight: '800', letterSpacing: -1 },
  heading:  { fontSize: scaledPixels(44), fontWeight: '700', letterSpacing: 0 },
  title:    { fontSize: scaledPixels(32), fontWeight: '600', letterSpacing: 0.2 },
  body:     { fontSize: scaledPixels(26), fontWeight: '400', lineHeight: scaledPixels(36) },
  caption:  { fontSize: scaledPixels(20), fontWeight: '500', letterSpacing: 0.5, textTransform: 'uppercase' },
};
```

## Color Depth for Dark Themes

TV apps almost always use dark themes. Flat black is BORING. Add depth:

### Surface Hierarchy (REQUIRED — do not use flat backgrounds)
```
background:    #0A0A0F  (deepest)
surface-1:     #12121A  (cards, containers)

From giolaq/tv-build-harness, MIT-0.

More from giolaq/tv-build-harness