What is Val Town's primary brand color?

Val Town's marketing chrome is functionally monochrome — pure ink-black text on a pure paper-white canvas. The single chromatic moment above the fold is a cobalt-blue pill CTA, and the only color appearance below the fold is a navy testimonial card with cobalt highlights inside the body copy. The page CSS exposes the full Tailwind v4 palette as CSS custom properties (blue-500, orange-500, emerald-500, etc.), but none of those tokens are actually applied in the captured marketing surface. The voltage is held entirely in reserve for one button and one quote card, which is unusual for a developer platform — most peers paint at least the hero with a gradient mesh.

What typeface does Val Town use, and what should I use as a substitute?

Val Town pairs IBM Plex Sans for every spoken surface — display, heading, body, button, nav, and a 10px uppercase tracked-wide label tier — with iA Writer Mono for every editor frame, every code sample, and every emphasis treatment. The hero h1 sits at 48px in IBM Plex Sans weight 400, body at 14px / 400, and the largest mono moment in the captured page is a 24px iA Writer Mono headline. The unusual choice: the ` ` and ` ` tags in body copy render in iA Writer Mono at the same size as the surrounding sans, not in bold. IBM Plex Sans is open-source (SIL OFL) so no substitute is needed; for iA Writer Mono use JetBrains Mono or IBM Plex Mono as the closest open-source alternatives.

Why is Val Town's canvas pure white instead of an off-white or matte gray?

The canvas is pure paper-white — wired in CSS as --color-background and --color-white — and the text is pure ink-black wired as --color-text and --color-black. There is no warm cream softening the way Cloudflare layers its surfaces, and there is no near-black matte the way Vercel uses on its hero. The choice signals the same posture as iA Writer itself: paper-white and ink-black, every other tone held in reserve for the editor panels and the single CTA. The contrast is uncompromising and the screen reads more like a documentation page than a typical marketing site.

Why does Val Town use a monospace font for the bold and italic tags?

Inside the testimonial cards, body emphasis tags (` ` and ` `) render in iA Writer Mono at 16px / 700 rather than in IBM Plex Sans bold. The substitution is deliberate: it treats every word the writer wants to emphasize as if it were code, reinforcing the platform's positioning as a place where JavaScript is the lingua franca. The convention only works because the audience is fluent in monospace; for a general-audience product it would read as a styling bug. Val Town extends the same logic to the navy testimonial card — cobalt-highlighted phrases inside the body copy also render in mono.

Can I use this DESIGN.md to build my own React developer-platform marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Val Town's specific moves: pure-white canvas instead of an off-white or matte gray, single cobalt CTA reserved for the primary action, IBM Plex Sans for prose with iA Writer Mono for evidence, and the editor-screenshot-as-hero composition. The tokens resolve cleanly without invention. The mono-as-emphasis move is the one to borrow with care — it only works if your audience is already comfortable reading monospace; otherwise treat the emphasis tags with a sans-bold variant.

Val Town Design System

Val Town's marketing system runs IBM Plex Sans on pure white with ink-black text and iA Writer Mono for every code sample.

About Val Town DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source val.town

Developer Tools & IDEs

Val Town's marketing site does the unfashionable thing for a developer platform: it renders in pure black on pure white. No warm cream, no Vercel-style matte canvas, no Linear violet-graphite gradient. The hero headline "A nice place for JavaScript" sits at 48px in IBM Plex Sans weight 400, flush-left in the same paper-white container as the rest of the page. The right side of the band carries a stacked screenshot of two iA Writer Mono editor panels with a cobalt-blue "Start for free" pill CTA underneath — the only chromatic moment above the fold. Where Bun runs all-mono on a cream block and Vercel runs all-sans on matte black, Val Town runs sans-plus-mono on white paper and trusts the editor screenshot to do every bit of decorative work.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 4 color tokens — ink black, paper white, a cobalt-blue CTA fill, and a single navy testimonial card — because the extraction surfaces only two structural colors (black and white) and the cobalt is recovered from the rendered CTA. 11 typography tokens span IBM Plex Sans across display, heading, body, button, and a 10px uppercase tracked-wide label tier, plus iA Writer Mono in three sizes for code samples, editor frames, and emphasis runs (the system uses mono for the `<strong>` and `<em>` tags themselves, not just inside `<code>` blocks). 5 radius tokens centered on a 12px button radius. 14 component definitions covering the cobalt pill, the transparent secondary, the template card, the navy quote block, and the dark "Ship your first app" footer band.

Feed this file to Claude or Cursor and it reproduces Val Town's specific moves: pure-white canvas, single cobalt CTA, IBM Plex Sans for prose and iA Writer Mono for evidence, and the editor-screenshot-as-hero composition that lets the product do the talking. The one move worth borrowing only if your product is itself a code editor: mono-as-emphasis. Most teams should stick to bold-as-emphasis; Val Town gets away with it because every reader of the page is already fluent in monospace.

What makes it distinct

Editor-as-evidence herothe right half of the above-fold band is a stacked screenshot of two iA Writer Mono editor panels, with the headline flush left rather than centered over a gradient
True black on true whitetext sits at pure ink-black on pure paper-white, no warm cream and no near-black softening anywhere in the marketing chrome
Single cobalt pillone rounded blue CTA carries the only chromatic moment above the fold, paired with a transparent secondary
IBM Plex Sans plus iA Writer Monosans for every spoken surface, mono for every editor frame, every emphasis treatment, and every inline highlight
Quote-card chromatic blockthe lone color appearance below the fold is a navy testimonial card with cobalt highlights inside the IBM Plex Sans body copy

Live at val.town

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

val.town

Explore Val Town

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Val Town design system FAQ

Common questions about Val Town's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Val Town — official site

Val Town's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.