# Val Town — Marketing Site Design Spec

> Source: val.town (live DOM, computed styles), 2026-07-25 (desktop 1512px).
> Coverage: home. Dashboard: behind login (`needs-dashboard`).
> Extracted with `scripts/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`, `:focus` and `@media` rules, so §4 states and §10 breakpoints
> are `not captured` for 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text

| 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 |

### Surfaces & borders

| 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 |

### Accent

| 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.

## 3. Typography Rules

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.

## 4. Component Stylings

### Buttons

- **Primary**: bg `#00bcff`, text `#052f4a`, radius `12px`, height `48px`, padding `0 20px`, Sprig Sans 16/700.
- **Nav secondary**: bg `#f8fafc`, ink text, `1px #e2e8f0`, radius `8px`, height `32px`, padding `0 12px`, IBM Plex Sans 14/700.
- **Icon**: transparent, radius `8px`, height `32px`, `8px` padding.

### Install-command field

- bg `#f0f9ff`, **`2px #74d4ff`** border, radius `12px`, height `48px`, padding `0 16px`, Sprig Sans 16/400, with a copy icon at the right. The 2px border is heavier than anything else on the page — this component is deliberately emphasised.

### Terminal card

- `#4b3d35` body with a `#695e57` title bar, three window dots, radius ~12px, iA Writer Mono 14/20/600 in white, `#695e57` horizontal rules between blocks. The signature product component.

### States

**Not captured — the 11 stylesheets carrying them are cross-origin.** The 5 readable
sheets contain **0** `:hover` and **0** `:focus` rules. Do not invent these; if a
hover is needed, prefer a small opacity or tint shift consistent with the warm
palette, and give focus a visible ring (the site's own could not be verified).

## 5. Layout Principles

An **asymmetric split hero**: the brown terminal card on the left, the hand-drawn
townscape on the right, with the headline and lede below-left and the CTA pair
below-right — deliberately unbalanced, which reinforces the informal character. A
soft warm diagonal band runs behind both, breaking the horizontal grid. Nav is a
simple left wordmark + links, right search/Log in/Sign up.

## 6. Depth & Elevation

Radius scale: `12px` on large controls (buttons, install field, terminal), `8px` on
small ones (nav button, icon buttons).

**Shadows: effectively none** — the census returned no meaningful box-shadow.
Depth comes from the illustration's own drawn shading, the brown card against white,
and 1–2px borders. Notably the borders vary in weight on purpose: `1px #e2e8f0` for
ordinary controls, `2px #74d4ff` to single out the install field.

## 7. Motion

The signature is ambient and organic:

| Animation | Duration | Iteration | Applies to |
|---|---|---|---|
| `_sway_` | 8.4s | infinite | trees (5 elements) |
| `_sway_` | 7.6s | infinite | trees (4) |
| `_sway_` | 6s | infinite | trees (3) |
| `_sway_` | 6.8s | infinite | trees (2) |
| `_sway_` | 9.2s | infinite | trees (2) |

**The same `_sway_` keyframe is applied at five different durations (6s–9.2s) across
16 elements**, so the trees drift out of phase and never visibly loop together. This
staggered-duration trick is the single most copyable idea in the spec.

Other keyframes: `home2026-dot-progress`, `home2026-tooltip-in`,
`home2026-tooltip-pulse` (a guided-tour tooltip system), plus hashed `go…` names
from a CSS-in-JS runtime (goober).

**1 `prefers-reduced-motion` block** is present, so the swaying is disabled for users
who ask. Transition durations/easings sit in the blocked stylesheets and are
`not captured`.

## 8. Backgrounds, Effects & WebGL

No canvas, no WebGL, no video, no gradients of consequence, no backdrop-filter. The
entire atmosphere is **hand-drawn SVG/raster illustration** plus one soft warm
diagonal band. This is the opposite of an effects-driven site: the warmth is drawn,
not rendered.

## 9. Do's and Don'ts

### Do
- Lead with hand-drawn illustration — visible, imperfect linework, not clean vector geometry.
- Set headlines large and LIGHT (48/400, -1.2px) and small UI text HEAVY (700).
- Pair the sky-blue `#00bcff` button with a navy `#052f4a` label.
- Keep the browns for the terminal card only.
- Animate ambient elements with one keyframe at several staggered durations so loops never sync.
- Use 12px radii on large controls, 8px on small.

### Don't
- Don't use white text on the blue button — it is navy `#052f4a`.
- Don't pull the illustration's greens, lilacs and peaches into UI chrome.
- Don't add shadows or gradients; depth is drawn.
- Don't centre the hero — the asymmetric split is the point.
- Don't invent hover/focus values for this app; they were unreadable (see §4).

## 10. Responsive Behavior

**Not captured.** The 5 readable stylesheets declare **zero `@media` breakpoints and
zero container queries**; the responsive rules live in the 11 cross-origin
CSS-modules bundles. **0 `prefers-color-scheme: dark` blocks** were found either, so
there is no evidence of a dark theme. Re-capture with the CDN sheets accessible to
fill this section.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Terminal `#4b3d35`/`#695e57` · Ink `#000000` · Muted `#6a7282` · Accent `#00bcff` (label `#052f4a`)
- Font: Sprig Sans (sub: Fraunces) 48/400 at -1.2px · IBM Plex Sans nav 14/700 · iA Writer Mono 14/600
- Radius: 12px large / 8px small · Control height: 48px primary, 32px nav
- Motion: one `_sway_` keyframe at 6–9.2s staggered · Shadows: none · Focus: not captured

<val-town_design_language>
The warmest, most hand-made developer brand: a white canvas crossed by a soft warm
diagonal, with a hand-drawn isometric townscape — ink-outlined shopfronts and sage
trees — as the hero illustration, beside a warm brown terminal card (#4b3d35 body,
#695e57 chrome) set in iA Writer Mono 14/600 white. Custom Sprig Sans sets headlines
LIGHT and large (48/57.6, weight 400, -1.2px tracking) while IBM Plex Sans sets nav
and small UI HEAVY at 14/700 — an inverted hierarchy that reads as friendly rather
than corporate. One sky blue #00bcff is the only saturated chrome colour and always
carries a navy #052f4a label, never white; a pale #f0f9ff install field is singled
out with an unusually heavy 2px #74d4ff border. 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 a deliberately asymmetric split hero. Its signature move 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.
Feels: warm, hand-made, playful, unhurried.
Avoid: white text on the blue button, clean vector illustration, shadows or
gradients, borrowing the illustration palette for UI chrome, and centred heroes.
</val-town_design_language>