A warm, quiet ground for small websites. Paper, ink, one clay accent and a little haze — fast to load, calm to read and easy to make your own.

Paper and inkand a little haze

A design system and site starter by a2Studio, built for restaurants, studios and small shops.

Explore the system See components

01 — Principles

Less, but warmer

Paper, not screen

Warm ivory backgrounds and brown-black ink. Never pure white, never pure black.

Words carry it

A serif for what you say, a sans for what you do. Sentence case everywhere — never capitalised titles.

iii

One human mark

The handwritten wordmark appears once per page. Its rarity is what makes it feel personal.

Lean by default

Static HTML, one CSS file, self-hosted fonts. The haze is CSS, not an image. No JS unless a feature needs it.

02 — Wordmark

The human title

Set in Damion, a smooth, connected brush-pen hand. Always lowercase. Use it for the logo and, at most, one signature word in a hero — never for headings or body text.

gesso

gesso Small, in the header

gesso Medium, in the footer

gesso Large, on tiles

Give it air — at least its own x-height of space on every side. Place it on paper or haze.

Don't

Set sentences in it, capitalise it, stretch it, or put it on a busy photo.

03 — Colour

Paper, ink and clay

Neutrals do 95% of the work. Clay is the only accent: fill it, mark with it, focus with it — but use --clay-text for small type. Every text pair below passes WCAG AA. Gesso is light only — there is no dark mode.

Neutrals

Paper--paperPage background

Paper 2--paper-2Wells, code, hover

Paper 3--paper-3Pressed, selected

Card--cardRaised surfaces

Ink--inkBody text · 15.2:1

Ink 2--ink-2Secondary · 6.7:1

Ink 3--ink-3Captions · 4.7:1

Accent & status

Clay--clayFills, marks, focus

Clay text--clay-textLinks · 4.8:1

Ok--okSuccess

Warn--warnCaution

Error--errorFailure

Haze

Sky--haze-sky

Mist--haze-mist

Cream--haze-cream

Honey--haze-honey

Peach--haze-peach

Blush--haze-blush

04 — Typography

Two voices that share a sentence

Measured on anthropic.com and copied as a system, not a mood. The sans does the work: headings in bold, interface, body, meta. The serif is the reading and feeling voice: long text, statements and display names. Their faces are licensed, so Gesso ships free, self-hosted equivalents.

Source Serif 4

Serif: reading text, statements, display

Stand-in for Tiempos / Anthropic Serif, variable 200–900

--font-serif

Geist

Sans: headings in bold, interface, body, meta

Stand-in for Styrene / Anthropic Sans, variable 100–900

--font-sans

Geist Mono

Mono: prices, code, data

Tabular figures for prices and numbers

--font-mono

Damion

Hand: wordmark only

The "human" title — one word, lowercase

--font-hand

Scale

Display--text-4xl, 44 → 80px, serif 500

Quiet things last longer

Page heading--text-3xl, 34 → 48px, sans 700

Quiet things last longer

Section heading--text-2xl, 28 → 36px, sans 700

Quiet things last longer

Small heading--text-xl, 22 → 28px, sans 600

Quiet things last longer

Card title--text-lg, 19 → 22px, sans 600

Quiet things last longer

Intro paragraph--text-lg, 19 → 22px, sans 400

Quiet things last longer

Reading text--text-md, 17 → 18px, serif 400

Quiet things last longer

Interface text--text-base, 16px, sans 400

Quiet things last longer

Description--text-sm, 15px, sans 400

Quiet things last longer

Nav, meta, labels--text-ui, 13px, sans 400

Quiet things last longer

The statement

A bold sans lead says what it is. The serif carries on in the same sentence and says why it matters, in a calmer voice.

<p class="statement"><strong>What we do.</strong> Why it matters.</p>

One statement per page, at the top or as a section opener. Lead short (3–8 words), serif part one or two lines.

Don't

Mix the fonts mid-word, set a whole paragraph bold, or stack two statements.

Casing and labels

Sentence case

Our work, in plain words · Get in touch · Opening hours

Never capitalised

Our Work, In Plain Words · GET IN TOUCH · Opening Hours

Applies to every title, heading, button, nav link, label and eyebrow. Only names keep their capitals (Zürich, Altin Steakhouse). No text-transform: uppercase anywhere. A label above a heading is one plain word or phrase — never a dotted keyword line like «Ristorante · Pizzeria · Bar».

In use

11 November 2026

A website should feel like a good letter

Clear, personal and unhurried. You read it once and remember who sent it.

Long text switches to the serif at 17 pixels, in a column about 720 pixels wide, so an article reads like a printed page. Headings stay in the bold sans. Numbers in tables use the mono and line up: CHF 1'480.00.

05 — Haze & grain

The signature surface

Soft blooms of light with film grain on top, taken from the "jermaine" reference. Pure CSS: layered radial gradients plus an SVG noise filter, under 1 KB. Use one haze per view — a hero, a featured card or a footer band.

dawn .haze

dusk .haze--dusk

mist .haze--mist

paper .haze--paper

<Haze variant="dawn" drift grain as="section">…</Haze>
<!-- or plain HTML -->
<section class="haze grain" data-drift>…</section>

06 — Artwork

Painted, not rendered

Two image styles, generated from the prompts in doc/art-direction.md without reference images. Web-sized .webp files live in public/pictures/; the full-size .jpg masters stay in pictures/ and are not deployed.

Haze pictures

For heroes, banners and closing bands. Painted and film are blurred; canvas keeps the oil strokes. Keep the CSS .haze behind them as the loading fallback.

Archive collage

For cards, case studies and journal posts. One engraving, one flat colour field, quiet paper. Sits on paper with a large radius and no shadow.

Columns on graph paper `collage-columns`

Compass rose, butter half `collage-compass`

Nautilus X-ray, green bar `collage-nautilus`

Drafting compass, cornflower band `collage-drafting-compass`

1900s car patent, sage half `collage-automobile`

Dandelion X-ray, clay bar `collage-dandelion-xray`

Pocket watch movement `collage-pocket-watch`

Storm clouds, block mosaic `collage-clouds-mosaic`

07 — Space & shape

A 4px grid, mostly flat

Space separates; borders define; shadow is only for things that float above the page.

--space-14px

--space-28px

--space-312px

--space-416px

--space-524px

--space-632px

--space-748px

--space-864px

--space-996px

--space-10128px

Radius

Every picture gets 4px corners (--radius-media), as on anthropic.com. Buttons use 10px, cards 8px, pills are fully round.

xs · 4px

sm · 8px

md · 12px

lg · 20px

xl · 28px

full · pill

Elevation

--shadow-1

--shadow-2

--shadow-3

08 — Buttons

One strong action per view

<Button variant="primary|accent|secondary|ghost" size="sm|md|lg" href="/contact">Label</Button>

09 — Forms

Labels above, help below

10 — Cards

Plain, raised, haze

Engraving of rosemary and thyme with a butter-yellow block

Plain

Altin Steakhouse

A multilingual restaurant site with a seasonal menu and table booking.

Patent drawing of a 1900s car with a sage block

Raised, as a link

Rentit Cars

Fleet, prices and online requests for a Zurich car rental. Hover me.

Haze, for one featured item

Start with a quiet ground

Use the haze card once, for the thing you most want people to see.

Hero and header

Statement above, picture that grows

Rebuilt from anthropic.com. The statement sits above a picture card. As you scroll, the card's side and bottom insets and its 4px corners shrink to zero, so it grows to full width. One CSS variable, --grow, drives all three; a 15-line script sets it, reduced motion starts it fully grown, and without JS it simply stays at rest.

<h1 class="statement statement--hero"><strong>What it is.</strong> Why it matters.</h1>
<ExpandingMedia src="/pictures/haze.webp" width={1600} height={686}>
  <p class="display lockup"><span class="lockup__line">First line</span><span class="lockup__line">second line</span></p>
  <p>One sentence.</p>
  <Button href="#">Action</Button>
</ExpandingMedia>

The header puts the links as pills on the left, the wordmark exactly in the centre and the call to action on the right. On phones the wordmark moves left and the links go into the menu.

11 — Badges & callouts

Small signals

Neutral New Open today Few spots left Closed

Note

Opening hours change over the holidays — check the calendar before you visit.

Tip

Book on weekdays before 18:00 for the quietest tables.

Heads up

Online payments are paused during maintenance tonight from 22:00.

12 — Prose

Long-form reading

Wrap any long text in .prose. It switches to the serif, opens the line height and keeps the measure at 64 characters, so articles, case studies and legal pages read like a printed page.

Getting started

Copy src/styles/tokens.css and base.css into the project.
Change the clay and haze tokens to the client's colours.
Replace the wordmark text — keep it to one lowercase word.

Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.

Links look like this inline link: clay text with a soft underline that firms up on hover.

13 — Motion

Felt, not seen

Short, eased transitions on state changes only. The haze drifts over 28 seconds. Everything stops for prefers-reduced-motion.

--dur-fast120ms · Hover, press

--dur-base200ms · Cards, menus

--dur-slow420ms · Page elements

Hover or focus a row. Easing: --ease-out cubic-bezier(0.22, 1, 0.36, 1).

Build something quiet.

Start with Gesso