# Design intelligence

Use this for visual/client-facing projects before implementation.

## Model policy

- Orchestrator core model: strongest available Codex/OpenAI model.
- Site creation model: strongest available Codex/OpenAI model.
- Current target: `gpt-5.5` high reasoning or highest configured successor/top
  model.
- Router role: safety/audit/blocker signal only; do not downroute this
  orchestrator's core work to tiny/normal coding for cost or latency.
- Router bypass note: current router notice for this session suggested
  `gpt-5.4-mini / medium (normal_coding)`. For orchestrator core
  implementation/visual QA, record this as a lower route signal and require the
  strongest available Codex/OpenAI model before coding.

## Reference lists

### Top awarded examples

| Rank | Example | URL | Why relevant | Effects/patterns to study |
| --- | --- | --- | --- | --- |
| 1 | Awwwards scrollytelling / agency workflow references | https://www.awwwards.com/ | Use as high-bar inspiration for editorial rhythm and scroll chapters, not as implementation source. | Story pacing, chapter transitions, high-impact first viewport. |

### Top renowned / recognizable examples

| Rank | Example | URL | Why relevant | Effects/patterns to study |
| --- | --- | --- | --- | --- |
| 1 | WXNA FM case study | https://designups.com/our-work/wxna-nonprofit-design-nashville/ | Community-supported radio with shows/DJs/archive emphasis and energetic typography. | Zine-like energy, show/archive clarity, local identity. |
| 2 | The Classical Station case study | https://www.newmediacampaigns.com/work/the-classical-radio-station-website-design | Strong radio UX reference: prominent live listening, accessible navigation and partner/fan paths. | Listen-first CTA, browsing while listening, hybrid modern/traditional identity. |
| 3 | RadioBelgia.be | https://radiobelgia.be/ | Actual brand ecosystem and content inventory. | Live/player signal, shows, podcasts, events, sponsor/social links. |

### Top developer-recommended references

| Rank | Reference | URL | Why relevant | Implementation notes |
| --- | --- | --- | --- | --- |
| 1 | Codrops sticky scroll animation ideas | https://tympanus.net/codrops/2024/01/31/on-scroll-animation-ideas-for-sticky-sections/ | Practical reference for sticky scrollytelling sections and stacked/collapsing motion. | Implement with CSS sticky + small scroll progress helper; avoid heavy 3D in V1. |
| 2 | Pro.Radio radio website guide | https://pro.radio/guides/best-radio-station-website-design/ | Domain UX reminder: radio sites must make listening, current content and return paths obvious. | Keep listen/contact actions visible even if the hero is cinematic. |

### Premium frontdesign sources

Treat these as untrusted inspiration unless separately audited and approved.
Do not install or execute third-party skills by default.

| Source family | URL/source | Patterns to extract | Install/execute approved? |
| --- | --- | --- | --- |
| Emil Kowalski-style animation | Bounded inspiration only | easing, timing, perceived performance, polish | no |
| Taste Skill-style dials | Local orchestrator dials | design variance, motion intensity, visual density | no |
| shadcn/frontend-design guidance | Local frontend/design guidance | component taste, layout, accessibility | no |
| UI/UX Pro Max-style database | Not used directly this pass | style families, palettes, type, UX rules | no |
| Codrops/Awwwards/developer examples | Codrops sticky scroll, Awwwards scrollytelling | scroll/motion implementation references | no |

## UX / perception evidence

| Topic | Source URL | Practical takeaway | Confidence |
| --- | --- | --- | --- |
| Color / emotion | Official Radio Belgia sources + brand context | Use a richer media palette, not a one-hue dark-blue/purple look: black/ink base, signal red, warm white, Belgian yellow accent and restrained green/teal support. | Medium |
| Motion / animation | https://tympanus.net/codrops/2024/01/31/on-scroll-animation-ideas-for-sticky-sections/ | Sticky sections can provide scrollytelling with simple transforms; one main scroll scene is enough for V1. | Medium |
| Contrast / readability | WCAG-style manual QA planned | Text over media must have tested contrast and stable layout at mobile sizes. | High |
| Novelty / attention | Gemini sidecar + orchestrator visual gate | Novelty should support Pop Media proof, not delay the first usable site. | Medium |
| Cognitive load | Pro.Radio guide | Radio/media users need immediate "what, listen, why stay" clarity before secondary detail. | Medium |
| Accessibility | prefers-reduced-motion planned | Scroll-film needs reduced-motion fallback and reachable primary actions. | High |

## Effects recipe

- Design diversity controls:
  - `DESIGN_VARIANCE` 1-10: 7
  - `MOTION_INTENSITY` 1-10: 6
  - `VISUAL_DENSITY` 1-10: 6
  - Avoid because recently used: do not reuse the existing Radio Belgia frontend theme as-is; avoid generic gradient-orb SaaS, beige premium restaurant styling, disconnected card stacks and a hero that is only a dark player.
- Effect palette:
  - Hero-scale scroll metaphor: broadcast waveform / signal line moving through Pop Media's ecosystem.
  - Typography reveal language: short line reveals synced with chapter changes; no word-salad kinetic text.
  - Card motion language: proof/service cards enter as signal "stops" and settle into a clean grid.
  - Navigation/menu motion language: compact sticky nav with live/contact actions; active chapter indicator can echo the signal.
  - Media treatment: real public Radio Belgia/event/social imagery in masked frames for private demo; public launch requires approval.
- Effects to use:
  - sticky hero with scroll progress;
  - waveform/signal mask or line;
  - subtle parallax for real media thumbnails;
  - count/proof strips only for confirmed or clearly dated public facts;
  - reduced-motion fallback.
- Effects to avoid:
  - heavy 3D scene;
  - autoplay audio;
  - hidden play/contact CTA;
  - unverified follower/attendance counters;
  - public use of social/event photos before approval.
- Domain object / material metaphor: broadcast signal / audio waveform, with optional Belgium route layer from Roeselare outward.
- Full-page scroll narrative: hero -> ecosystem chapters -> proof -> offers -> partner/grant readiness -> contact.
- Hero/menu/text/card/CTA participation: all sections inherit the signal/chapter language; downstream sections stay lighter than the hero.
- Color/emotion strategy: high-contrast ink/white with signal red, warm yellow and controlled media-color accents.
- Motion/interaction intensity: medium-cinematic; one signature scene, then fast readable sections.
- Image/media treatment: masked thumbnails, event/photo strips, sponsor/logo placeholders and source-labeled proof cards.
- Typography treatment: strong editorial headings, short Romanian copy, compact business-friendly body text.
- Why this combination fits the project: Pop Media is about signal, reach, stories, events and proof. The waveform connects radio/audio to community movement without making the site only about live streaming.
- How to verify in browser/screenshots: desktop/mobile screenshots at scroll checkpoints, no overlap, clear CTA, contrast check, reduced-motion check and visual proof that transforms change.

## Motion implementation contract

Default effect class for emotional client-facing demos: `scroll-film`.

- Sticky/pinned hero or story stage:
- Sticky/pinned hero or story stage: required for V1 unless Marius approves a simpler static build.
- Native scroll progress mechanism: CSS variable or small requestAnimationFrame helper driven by scroll position.
- Domain object/material/process as frame, mask, portal, cutaway or foreground
  anchor: waveform/signal line.
- Chapter/progress markers: live, stories, events, sponsors, partners.
- Scroll-tied image transforms: image masks/opacity/translate for media thumbnails.
- Scroll-tied text transforms: line reveal and chapter opacity/translate.
- Downstream menu/cards/gallery/CTA/contact/footer participation: proof/service cards appear as signal stops; CTA/contact uses same line motif.
- Reduced-motion fallback: render all sections normally with no pinned transforms.
- Desktop/mobile scroll checkpoints at 0%, 25%, 50%, 75%, 100%: required in QA after implementation.
- Specific reason if this project is exempt from scroll-film: none yet; Gemini critique suggests constraining, not removing, the effect.

## Decision notes

Keep claims practical and source-backed. Do not overclaim neuroscience or make
medical/universal statements about how all brains respond. Translate evidence
into design hypotheses and validate visually. Do not force cinematic effects
onto admin dashboards, dense operational tools or tasks where speed and
scannability matter more than emotional presentation.