chloeyan.me

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.

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.