House Style

Lazy Defaults to Question

These patterns are AI design tells — the first thing every LLM reaches for. If you’re about to use one, pause and ask: is this a deliberate choice for THIS content, or am I defaulting?

• Gradient text (background-clip: text + gradient)
• Left-edge accent stripes on cards/callouts
• Cyan-on-dark / purple-to-blue gradients / neon accents
• Pure #000 or #fff (tint toward your accent hue instead)
• Identical card grids (same-size cards repeated)
• Everything centered with equal weight (lead the eye somewhere)
• Banned fonts (see typography.md for full list)

If the content genuinely calls for one of these — centered layout for a solemn closing, cards for a real product UI mockup, a banned font because it’s the perfect thematic match — use it. The goal is intentionality, not avoidance.

Color

• Match light/dark to content: food, wellness, kids → light. Tech, cinema, finance → dark.
• One accent hue. Same background across all scenes.
• Tint neutrals toward your accent (even subtle warmth/coolness beats dead gray).
• Contrast: enforced by hyperframes check (WCAG AA). Text must be readable with decoratives removed.
• Declare palette up front. Don’t invent colors per-element.

Background Layer

Every scene needs visual depth — persistent decorative elements that stay visible while content animates in. Without these, scenes feel empty during entrance staggering.

Ideas (mix and match, 2-5 per scene):

• Radial glows (accent-tinted, low opacity, breathing scale)
• Ghost text (theme words at 3-8% opacity, very large, slow drift)
• Accent lines (hairline rules, subtle pulse)
• Grain/noise overlay, geometric shapes, grid patterns
• Thematic decoratives (orbit rings for space, vinyl grooves for music, grid lines for data)

All decoratives should have slow ambient GSAP animation — breathing, drift, pulse. Static decoratives feel dead.

Decorative count vs motion count. The “2-5 per scene” count refers to decorative elements. If a project’s design spec says “single ambient motion per scene”, it means one looping motion applied to these decoratives (a shared breath/drift/pulse) — not one element total. A scene with 4 decoratives sharing one breathing motion is correct; a scene with 1 decorative is under-dressed.

Motion

See motion-principles.md for full rules. Quick: 0.3–0.6s, vary eases, combine transforms on entrances, overlap entries.

Typography

See typography.md for full rules. Quick: 700-900 headlines / 300-400 body, serif + sans (not two sans), 60px+ headlines / 20px+ body.

Palettes

Declare one background, one foreground, one accent before writing HTML.

Or derive from OKLCH — pick a hue, build bg/fg/accent at different lightnesses, tint everything toward that hue.