Initial commit — Singular Particular Space v1
Homepage (site/index.html): integration-v14 promoted, Writings section integrated with 33 pieces clustered by type (stories/essays/miscellany), Writings welcome lightbox, content frame at 98% opacity. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
156
CREATURE-PLAYGROUND/homepage-redesign/aesthetic-brief.md
Normal file
156
CREATURE-PLAYGROUND/homepage-redesign/aesthetic-brief.md
Normal file
@@ -0,0 +1,156 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user