The warmest, most hand-made brand in the library. A white canvas crossed by a soft warm diagonal carries a genuinely HAND-DRAWN isometric townscape — ink-outlined shopfronts labelled IMPORTS, SHOP and VAL'S CAFE, with sage-green trees drawn in visibly imperfect linework rather than clean vector geometry — set beside a warm brown terminal card (#4b3d35 body, #695e57 chrome) running iA Writer Mono, which grounds the whimsy in something technical. Its typography inverts the usual hierarchy: the custom Sprig Sans sets headlines LIGHT and large (48/57.6 at weight 400, -1.2px tracking) while IBM Plex Sans sets nav and buttons HEAVY (14–16px at 700), which is much of why the page reads friendly rather than corporate. One sky blue #00bcff owns the primary button and always pairs with a navy #052f4a label, never white; the install-command field is deliberately singled out with a 2px #74d4ff border against every other control's 1px. Radii are 12px on large controls and 8px on small, and there are no shadows or gradients — depth is drawn, not rendered. The layout is an asymmetric split hero. Its most copyable idea is motion: a single sway keyframe applied at five staggered durations from 6s to 9.2s across sixteen trees, so nothing ever loops in phase, with prefers-reduced-motion honoured.
Browse Val Town in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: val.town (live DOM, computed styles), 2026-07-25 (desktop 1512px). Coverage: home. Dashboard: behind login (needs-dashboard). Extracted withscripts/extract.js. Only 5 of 16 stylesheets were readable — 11 are cross-origin (CSS-modules bundles served from an esm.town CDN). Those 5 contain zero:hover,:focusand@mediarules, so §4 states and §10 breakpoints arenot capturedfor that specific reason, not for want of asking. Everything from computed styles (colour, type, radii, animation) is complete. Reality check: the queue hint said "playful light, hand-made small-web character" — accurate, and if anything understated. The hero is a hand-drawn isometric illustration of an actual little town, and its trees sway on a loop.
Val Town is the warmest, most hand-made brand in the library. The canvas is white, crossed by a soft warm off-white diagonal band, and the hero is a **hand-drawn isometric townscape** — shopfronts labelled IMPORTS, SHOP and VAL'S CAFE, with ink-outlined trees in sage green — rendered with visible, slightly wobbly linework rather than vector-perfect geometry. Beside it sits a warm brown terminal card (#4b3d35 body, #695e57 chrome) running iA Writer Mono, which grounds the whimsy in something technical. The custom Sprig Sans carries headlines at 48px weight 400 with -1.2px tracking; IBM Plex Sans handles nav and UI at a much heavier 700. The single bright accent is a sky blue #00bcff on the Sign Up button, paired with a deep navy #052f4a label rather than white. Corners are generously rounded (12px on large controls, 8px on small). The defining detail is motion: **the trees sway continuously on staggered 6–9.2s loops**, so the page is quietly alive. Feels: warm, hand-made, playful, unhurried.
| Token | Hex | Role / usage |
|---|---|---|
| text-ink | #000000 | headlines and body — dominant (274 elements) |
| text-inverse | #ffffff | text inside the brown terminal card (27) |
| text-muted | #6a7282 | secondary supporting copy |
| link | #00598a | inline links (deep blue) |
| text-on-accent | #052f4a | the navy label on the sky-blue button |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | page background |
| terminal-body | #4b3d35 | the warm brown terminal card |
| terminal-chrome | #695e57 | its lighter title bar and rules |
| tint-blue | #f0f9ff | the pale blue install-command field |
| tint-slate | #f8fafc | the nav Sign-up button fill |
| border-slate | #e2e8f0 | 1px hairline on small controls |
| border-blue | #74d4ff | the 2px border on the install field |
| rule | #d4d4d4 | dividers |
| rule-2 | #e5e5e5 | lighter dividers |
| Token | Hex | Role / usage |
|---|---|---|
| accent-blue | #00bcff | the primary Sign Up button (with #052f4a text) |
| coral | #ff7250 | the illustrated agent mascot / small marks |
Rules: the sky blue is the only saturated chrome colour and always pairs with the navy #052f4a label, never white. The browns belong exclusively to the terminal card. All other colour lives inside the hand-drawn illustration (sage greens, lilac, peach building fills) and should not be pulled into UI chrome.
Three faces, each with a clear job: Sprig Sans (custom brand face) for headlines and large buttons, IBM Plex Sans for nav and small UI, iA Writer Mono for the terminal. Preview substitutes Fraunces for Sprig Sans (licensed; closest open face with comparable warmth and a soft humanist character) and IBM Plex Mono for iA Writer Mono. IBM Plex Sans is loaded as itself.
| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero display (h1) | 48 / 57.6 | 400 | -1.2px |
| Section (h2) | 48 / 52.8 | 400 | -1.2px |
| Nav link | 14 / 20 | 700 | normal |
| Primary button | 16 | 700 | normal |
| Terminal / mono | 14 / 20 | 600 | normal |
Pattern: headlines are light (400) and large, while the small UI text is heavy (700) — the inverse of the usual hierarchy, and a large part of why the page feels friendly rather than corporate. Negative tracking (-1.2px) only at display sizes.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.