singular-particular-space/CREATURE-PLAYGROUND/homepage-redesign/aesthetic-brief.md

Aesthetic Brief v2 — Homepage Star Map

Read this before designing. This is the parent's creative direction. Updated 2026-03-26 — BOLDER direction per JL feedback.

---

The feeling

Vaporwave and Mad Max had a baby in the middle of a rainforest full of fairies.

You're at a campfire in the ruins. The city behind you is half-collapsed but alive — vines crawl through CRT monitors still flickering with ghost signals, solar panels power neon signs in languages no one reads anymore, bioluminescent moss makes the rubble glow mint and orchid-purple at night. The sky overhead is not just clear — it's VIVID. Stars in gold, rose, violet, teal. Nebula clouds you can almost reach. The universe isn't distant; it's pressing in.

This is post-apocalypse post-recovery. Nature ate the dystopia and something magical grew in its place. It's warm, strange, lush, and slightly unreal.

The star map should feel like ALL of these had a conversation. Not a collage — a fusion. The CRT is subtle (a ghost, not a feature). The pastels are deepened for the dark palette. The prismatic fairy colors appear in star nodes and nebulae. The rainforest lives in the skyline's bioluminescence.

---

Color philosophy

The existing :root palette is your skeleton. Extend it boldly.

Core (keep):

• --bg-void: #04060b / --bg-deep: #060a14 — deep space, hinted purple
• --fire-amber: #e8943a — the campfire. Warmth follows attention.
• --fire-coral: #d4654a — warm accent
• --neon-teal: #2ac4b3 — city heartbeat
• --neon-green: #32dc8c — nature reclaiming (visited state)
• --deep-red: #8b2020 — rare danger accent
• --blue-magenta: #6b3fa0 — cosmic distance

New colors to bring in:

• --orchid: #c558d9 — tropical purple, fairy fire, nebula highlights
• --paradise: #ff7f3f — bird of paradise orange, fiery accent
• --toucan: #ffcf40 — golden warmth, star color
• --mint-glow: #86efac — bioluminescent moss, fairy-green
• --fairy-pink: #f472b6 — prismatic accent, star color
• --waterfall: #3fbfaf — deeper teal variation
• --phosphor: #00ff41 — CRT green (use sparingly, low opacity)

The overall impression when you look at this page should be: "that is a LOT of color but it all belongs in the same world." Dark backdrop, rich jewel-toned elements scattered across it like a night market.

---

CRT vibe (subtle, NOT dominant)

From soviet-cyberpunk and nothing-new-about-normal. NOT a full CRT overlay. A ghost of one:

• Static scanlines: repeating-linear-gradient at opacity 0.03-0.05. Not animated. Not moving. Just texture.
• Faint phosphor glow on the star zone — a very subtle radial-gradient(ellipse, transparent 60%, rgba(0,0,0,0.3)) vignette that makes edges slightly darker, center slightly brighter.
• That's it. No screen curvature, no heavy scanlines, no flicker animation. Just enough that if someone knows CRT they'd notice. Ghost of a signal.

---

Star field guidance

BOLDER than v1. More color, more variety. The sky should feel alive.

• Size classes: same distribution but the BRIGHT class gets slightly larger (1.5-3px). More visible individual characters.
• Color classes expanded:
  • 35% cool white (rgba 200,210,230)
  • 15% warm white (rgba 240,220,190)
  • 12% pale blue (rgba 140,180,230)
  • 10% pale gold / toucan yellow (rgba 255,207,64)
  • 8% fairy pink (rgba 244,114,182)
  • 8% orchid purple (rgba 197,88,217)
  • 7% mint green (rgba 134,239,172)
  • 5% faint red / coral (rgba 212,101,74)
• Twinkle: same as before but bright colorful stars twinkle more noticeably
• Nebula washes: BOLDER. Opacity 0.04-0.08. Add orchid and fairy-pink washes alongside the existing purple and teal. 4-5 washes total. They should be noticeable when you look — atmospheric pools of color in the sky.
• Depth: 3 layers. Far stars are smaller/dimmer/cooler. Near stars are larger/brighter/warmer. Colored stars tend to be in the mid and near layers.

---

Star nodes — MUCH BIGGER on hover

JL's explicit request. The navigation mechanics are LOCKED — do not change the JS for keyboard nav, scroll descent, or mode switching.

But the CSS hover/focus effect on star dots should be dramatically larger:

• Default: 6-8px dot with per-star accent color (keep from v2)
• Hover/focus/current: grow to 16-20px with a warm amber glow. Use CSS transition on width/height (150ms ease). The star should visibly bloom when you focus on it.
• Visited: 6-8px green dot
• Visited + hover: same 16-20px bloom, amber

This is the "campfire follows your focus" made physical. Your attention literally makes the star grow.

---

Text size — BIGGER for mobile

JL's explicit request. Base font sizes need a bump:

• Star labels: 16px desktop, 12px mobile
• Billboard nav: 16px desktop, 11px mobile
• Lightbox body text: 16px
• Nav hint text: 14px
• Back button: 16px
• JL link: 16px

Use clamp() where it makes sense for fluid scaling.

---

Skyline guidance — LUSH

The skyline is where the rainforest meets the ruins. Listed from background to foreground:

• The gradient from stars to city should pass through a zone of deep purple (the blue-magenta/orchid range) before warming — like descending through atmosphere.
• A pseudo-vaporwave landscape-perspective grid: cycle through the colours with each line.
• Buildings are an abstract skyline dark neon-rimmed silhouettes
• Window lights in MORE colors: amber (50%), teal (20%), orchid-purple (15%), fairy-pink (10%), phosphor-green (5%). A night market of light. Render over buildings.
• Billboard nav colors: cycle through teal, amber, orchid, green, coral. Each billboard a different color. The city is polychromatic. render above buildings. give them different sizes and fonts. place above buildings.
• Ambient glow at skyline base should be warmer and slightly more visible (opacity 0.06-0.08 for the amber gradient).

---

New rule: restraint in structure, abundance in color.

• The layout stays clean and spacious (dark space is still good)
• But the COLORS within that space are richer, more varied, more vivid
• Stars have visible personality. Nebulae are atmospheric but present.
• The skyline glows with life. The city is a living ecosystem of light.
• The CRT ghost adds texture without dominating.
• When you look at this page you should feel: THIS IS A PLACE. Not a website. A strange, beautiful, slightly magical place where someone lit a fire and the whole universe showed up to warm its hands.