Design Guide

The visual language behind EdenZen. Colors, type, spacing, components, surfaces, and motion.

Color

Palette

A warm, low-contrast palette built for dark environments. Primary cream for text and borders, peach for accents and interaction states.

Warm Cream

#EAD9C9

Primary text and UI elements

Peach

#F6B7A2

Accent, CTAs, hover highlights

Near Black

#0a0a0a

Background

Opacity scale

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

Typography

Fonts

Three typefaces: GatteModern for brand headings, Geist Sans for body, and Geist Mono for technical text.

font-gatte (GatteModern)

Focus. Create. Breathe.

Section Heading

Smaller Heading

font-sans (Geist Sans)

Body text at text-lg. Ambient sounds, focus music, and quiet tools for deep work, all in one place.

Body text at text-base. A steady hum of rain on the window, the faint crackle of a fire, wind through distant trees.

Body text at text-sm. Your auditory environment matters more than you think.

Caption at text-xs. Muted, informational, secondary.

font-mono (Geist Mono)

const player = useAudioPlayer();

#EAD9C9 · rgba(234, 217, 201, 0.5) · oklch(0.93 0.04 60)

Font weights

font-light (300)

font-normal (400)

font-medium (500)

font-semibold (600)

Letter spacing

tracking-tight

tracking-normal

tracking-wide

tracking-[0.2em] uppercase

tracking-[0.3em] uppercase

Spacing

Scale and Radius

Consistent spacing tokens and border radii used across all surfaces.

Spacing scale

gap-2

8px

gap-4

16px

gap-6

24px

gap-8

32px

gap-10

40px

Container widths

max-w-2xl (672px)

max-w-3xl (768px)

max-w-4xl (896px)

Border radius

rounded-md

6px

rounded-lg

8px

rounded-xl

12px

rounded-2xl

16px

rounded-full

9999px

Components

UI Kit

Base components from shadcn/ui, themed to the EdenZen palette.

Button variants

Button sizes

Brand CTA (custom)

Switch

Off

Slider

Value: 40

Input

Toggle

Card

Deep Work Mode

Rain, low music, and a 50-minute timer.

Activate this mode to start a focused session with curated ambient sounds.

Surfaces

Glass and Depth

Layered glass morphism with backdrop blur. Lighter surfaces for panels, heavier for modals and overlays.

Light glass

bg-black/35 backdrop-blur-md

Medium glass

bg-black/50 backdrop-blur-md

Heavy glass

bg-black/80 backdrop-blur-lg

Border opacity

/10

/15

/20

/30

/50

Motion

Animations

Gentle, intentional motion. Content fades up on entry, elements respond to hover with slow transitions, and scroll reveals use viewport triggers.

Fade-in with y-offset (entry animation)

This element fades in from 16px below with 0.8s easeOut.

Staggered list

Rain on glass

Crackling fire

Forest wind

Ocean waves

Hover glow (CTA pattern)

Timing reference

Durations

Entry: 0.8s

Transition: 0.3-0.5s

Hover: 0.5s (duration-500)

Exit: 0.9s

Easing

Entry: easeOut

Exit: easeInOut

Hover: CSS default ease

Custom: cubic-bezier(0.16, 1, 0.3, 1)

EdenZen Design System