Formless · Eyes Closed · UX / UI
From seed to manifestation.
Four phases of design delivery for an editorial book studio: intent, messaging, structure, then a token system and cinematic homepage on live preview.
Live homepage / cinematic forest system
Brand kit / Formless
Studio, not storefront.
One quiet hero image carries the atmosphere. The supporting system stays in the margins: mark, palette, typography, and page rhythm.
Intent · Emotional delta
Phase 01 · The Seed
Collapse scattered ideas into one point of intent: who arrives, what they feel, and the shift the experience must create.
→ Positioning, persona motivation, visual tone
Design process
Phase 04 · Foundations
Design system handoff
Color, type, spacing, and radius tokens extracted from the live theme for design–dev alignment.
Formless · Design system v1
Foundations
Tokens for color, typography, spacing, and radius, extracted from the live Tailwind theme and captured for handoff.
Brand color
Moss
#2E4036
Primary brand, calm depth
Clay
#CC5833
Accent, warmth, CTAs
Cream
#F2F0E9
Light surfaces & backgrounds
Charcoal
#1A1A1A
Type, dark UI shells
Typography
Display
7.5rem / 700 / -0.02em tracking
Plus Jakarta Sans
Formless
Heading
3.75rem / 700
Plus Jakarta Sans
The bridge between nature and science
Serif accent
Italic / light weight for editorial moments
Cormorant Garamond
Awareness over identity
Label
0.75rem / 0.1em tracking / uppercase
System mono
FOR ANYONE WHO HAS HAD ENOUGH
Spacing scale
Radius & elevation
Design philosophy
How the interface should feel
Studio, not storefront
Spacious & grounded
Honest materials
Type carries weight
Supporting artifacts
The system behind the screen
Instead of repeating the same homepage capture, these plates show the source materials that shaped the finished interface.
Live homepage
Web direction
Logo system
Identity board