# chloeyan.me

Source: https://www.chloeyan.me/
Captured: 2026-09-20
Tags: portfolio, landing, light, both, organic, playful, minimal, warm, calm, human, playful, optimistic
Colors: #e8dac8, #dbb88b, #594e49, #aa998e, #84746a, #ca9b68, #39312e, #a18a4d
Type (small): JetBrains Mono · 12px/normal · 400 — "6:03:26 pm"
Radii: 50% (10), 72px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/chloeyan-me/hero.webp?v=33563527
- Hero (mobile): https://media.lvly.design/library/chloeyan-me/mobile-hero.webp?v=c940b23a
- Full page (desktop): https://media.lvly.design/library/chloeyan-me/full.jpg?v=c8cb5e5f
- Full page (mobile): https://media.lvly.design/library/chloeyan-me/mobile-full.jpg?v=e08aca0b
- Clip preview (mp4): https://media.lvly.design/library/chloeyan-me/video-qcmgow.preview.mp4?v=7bb65568

Chloe Yan's home page is one full-bleed gouache painting and almost nothing else: a hazy, sun-warmed field seen from a low aerial angle, with a few hand-drawn plants, a fruit tree and a chalkboard A-frame sign reading "welcome to Chloe's garden". The palette is a single warm run — a pale oat ground at `#e8dac8` covering nearly two thirds of the frame, apricot sunlight at `#dbb88b`, and a soft sepia ink at `#594e49` for the only text on the page. That text is four 12px JetBrains Mono labels pinned one to each corner of the viewport: a climate readout, a weather glyph, a lifetime counter of plants watered, and a live clock ticking seconds. There is no header, no nav bar, no hero headline, no button, no card — the whole page fits one 1440×900 screen with no scroll, and every affordance is drawn into the world rather than laid over it. What makes it work is the collision of registers: a soft, grainy, brushy illustration carrying a terse terminal HUD, so the page reads as both a painting and an instrument. The monospace keeps it from being twee; the painting keeps the monospace from being cold.

## Steal-worthy details

- Four-corner monospace HUD as the entire interface — 12px JetBrains Mono, sepia ink, each label a tiny glyph plus lowercase text, one per viewport corner and nothing in between. No bar, no ground, no border; the corners frame the artwork the way a viewfinder frames a shot.
- A live ticking clock as ambient chrome — bottom right, seconds included, updating in place, which means the page is never a still image even when the visitor does nothing. Cheapest possible signal that the site is alive.
- A cumulative counter instead of social proof furniture — "32253 plants watered" sits as bare text with a sprout glyph, no tile, no label, no big number treatment. The raw figure in body-size mono reads more credible than a stat card would.
- Environment metadata as the site's only copy — a climate name top left and a weather glyph top right turn the page into a place with conditions rather than a document with a title. Borrowable for any site that wants state without a dashboard.
- Navigation drawn in-world — the single labeled entry point is a chalkboard sandwich board with a hand-lettered "OPEN" slat, standing in the scene at a slight angle with its own cast shadow. A call to action becomes a prop, so the page needs no button styles at all.
- Diagonal shafts of pale sunlight as the layout grid — broad soft bands sweep from lower left to upper right across the field, spacing the plants and routing the eye toward the sign. Light is doing the work a column grid usually does.
- Depth by haze and scale, not by perspective lines — objects shrink and desaturate toward the top of the frame until the horizon dissolves into flat mist, and a dark out-of-focus hill cuts across the bottom-left corner as a foreground blur. Two moves, no vanishing point.
- Every rounded thing is a full circle — the measured radii are `50%` ten times over with one `72px` outlier, so the geometry of the interface is either a dot or a very soft slab. There is no 4/8/12px radius ladder to maintain.

## Style recipe

Build the page as one full-bleed illustrated scene and put the interface in the corners.

**Canvas.** Commit the entire viewport to a single hand-painted image (gouache or soft digital brush, visible paper grain, no vector shapes, no photography). Set `height: 100svh`, `overflow: hidden`, and design for no scroll — one screen is the whole page. Composition: low aerial angle, horizon in the upper third dissolving into haze, a dark out-of-focus mass clipping one bottom corner as foreground, sparse hand-drawn objects placed on a diagonal from that corner toward the opposite one.

**Color.** One warm analogous family, nothing outside it. Ground `#e8dac8`, sunlight `#dbb88b`, deeper glow `#ca9b68`, ink `#594e49`, secondary ink `#84746a`, shadow `#39312e`. Accents only where a living thing is painted — leaf green, a few poppy reds, a yellow bloom — each no more than ~1% of the frame. Never introduce a UI color: if a control needs to be visible, paint it into the scene instead.

**Type.** One monospace family for everything (JetBrains Mono or similar), weight 400 only. Two sizes: 16px for body, 12px for the corner HUD. Lowercase or sentence case, normal tracking, normal leading. No display face, no headline, no weight contrast — the painting is the display type.

**Layout.** Absolutely position four HUD items at the viewport corners with a uniform ~32px inset. Each is a 14–16px inline glyph plus a short mono string, `gap: 8px`, aligned to its corner. Nothing occupies the middle of the screen but the illustration. Give one corner a live-updating value (clock, counter, condition) so the page breathes.

**Surfaces.** No panels, no cards, no dividers, no borders, no backdrop blur behind text — the ink sits directly on the painting and is legible because the painting is deliberately pale where the labels land. Radii are `50%` for any dot or glyph chip and one very soft `72px` slab if a large surface is unavoidable. Shadows are painted into the artwork (soft, long, warm-tinted), never CSS.

**Motion.** Slow and atmospheric: a seconds-resolution clock, a drifting light or particle layer at 20–40s loops, gentle hover lift on the few interactive props (`transform: translateY(-2px) rotate(-1deg)`, 200ms ease-out). No slide-ins, no fades on scroll, no parallax jolt.

**The two moves that make it recognizable:** (1) the interface is four monospace labels in the corners and literally nothing else, and (2) every affordance is an object painted inside the world — a sign, a door, a gate — so the page has no chrome to style.