open-design/skills/hyperframes/house-style.md

House Style

Creative direction for compositions when no visual-style.md is provided. These are starting points — override anything that doesn't serve the content.

Before Writing HTML

1. Interpret the prompt. Generate real content. A recipe lists real ingredients. A HUD has real readouts.
2. Pick a palette. Light or dark? Declare bg, fg, accent before writing code.
3. Pick typefaces. Run the font discovery script in references/typography.md — or pick a font you already know that fits the theme. The script broadens your options; it's not the only source.

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 references/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 validate (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.

Motion

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

Typography

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

Category	Use for	File
Bold / Energetic	Product launches, social media, announcements	palettes/bold-energetic.md
Warm / Editorial	Storytelling, documentaries, case studies	palettes/warm-editorial.md
Dark / Premium	Tech, finance, luxury, cinematic	palettes/dark-premium.md
Clean / Corporate	Explainers, tutorials, presentations	palettes/clean-corporate.md
Nature / Earth	Sustainability, outdoor, organic	palettes/nature-earth.md
Neon / Electric	Gaming, tech, nightlife	palettes/neon-electric.md
Pastel / Soft	Fashion, beauty, lifestyle, wellness	palettes/pastel-soft.md
Jewel / Rich	Luxury, events, sophisticated	palettes/jewel-rich.md
Monochrome	Dramatic, typography-focused	palettes/monochrome.md

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