---
version: alpha
name: Whilst
description: Frictionless writing made calm — a warm cream canvas (#FFFDF7) with a paper-grain multiply texture, soft warm-black serif ink (#2B2B2B), full-serif typography at a single generous 28.7px reading size, hairline black/6 borders, and whisper-quiet black-tinted ghost buttons. Editorial stillness over UI chrome.

colors:
  # Canvas + ink
  background: "#fffdf7"      # warm cream paper
  surface: "#fffdf7"
  ink: "#2b2b2b"             # warm near-black, primary text
  ink-strong: "#1e1e1e"      # darker warm ink (dark-mode canvas / strong text)
  ink-pure: "#000000"

  # Muted ink (rgba over cream, flattened opaque)
  ink-muted: "#959491"       # was rgba(43,43,43,0.5) over cream — secondary/footer links
  ink-faint: "#bfbebb"       # was rgba(43,43,43,0.3) — placeholder / disabled

  # Hairline borders + ghost-button tints (flattened over cream)
  border-hairline: "#f0eee8" # was rgba(0,0,0,0.06) over cream — dividers, inset rings
  border-soft: "#e8e6e0"     # was rgba(0,0,0,0.12) — button hover border
  ghost-fill: "#f9f7f1"      # was rgba(0,0,0,0.02) — ghost button rest fill
  ghost-fill-hover: "#f3f1eb" # was rgba(0,0,0,0.04) — ghost button hover fill

  # On-color
  on-ink: "#fffdf7"

  # Dark mode (declared in CSS but listed for completeness)
  dark-canvas: "#1e1e1e"

typography:
  display-serif:
    fontFamily: "Spectral, Georgia, Cambria, 'Times New Roman', serif"
    fontSize: 28.7px
    fontWeight: 500
    lineHeight: 1.41
    letterSpacing: 0px
  display-serif-light:
    fontFamily: "Spectral, Georgia, Cambria, 'Times New Roman', serif"
    fontSize: 28.7px
    fontWeight: 400
    lineHeight: 1.41
    letterSpacing: 0px
  body-serif:
    fontFamily: "Spectral, Georgia, Cambria, 'Times New Roman', serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  button-ui:
    fontFamily: "Spectral, Georgia, Cambria, 'Times New Roman', serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px
  small:
    fontFamily: "Spectral, Georgia, Cambria, 'Times New Roman', serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 10px
  md: 15px
  lg: 20px
  xl: 40px
  2xl: 60px
  3xl: 80px
  4xl: 160px

rounded:
  none: 0px
  sm: 6px
  md: 10px
  lg: 16px
  circle: 9999px

components:
  # Ghost CTA — the only button on the page
  button-ghost:
    backgroundColor: "{colors.ghost-fill}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 15px
    borderColor: "{colors.border-hairline}"
    transition: "border-color 200ms ease, background 200ms ease"
  button-ghost-hover:
    backgroundColor: "{colors.ghost-fill-hover}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 15px
    borderColor: "{colors.border-soft}"

  # Hairline divider
  divider:
    backgroundColor: "{colors.border-hairline}"
    height: 1px
    width: 400px

  # Inline text cursor / caret accent
  caret:
    backgroundColor: "{colors.ink}"
    width: 2px

  # Circular hero image well with inset hairline ring
  image-circle:
    rounded: "{rounded.circle}"
    borderColor: "{colors.border-hairline}"

  # Card / panel surface (screenshots, example tiles)
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.border-hairline}"

  # Footer / secondary link
  link-muted:
    textColor: "{colors.ink-muted}"
    typography: "{typography.small}"
---

# Whilst Design System

## Overview

Whilst is a distraction-free writing app, and its marketing site is the product's thesis rendered as a webpage: write without friction. Where most software sites shout with saturated accents and dense UI, Whilst whispers. The entire canvas is a single warm cream (`{colors.background}`, `#FFFDF7`) — not white, but a paper-tinted off-white that reads like the page of a notebook. Over it sits a repeating grain texture (`/images/texture.png`, tiled at 200px and set to `mix-blend-mode: multiply`), which gives the flat color the subtle tooth of real paper. Text is a warm near-black (`{colors.ink}`, `#2B2B2B`) rather than a cold pure black, keeping the whole surface soft and lamplit.

The most distinctive move is the commitment to a single serif typeface across everything — headline, body, footer, and even the lone button. There is no sans-serif anywhere. The hero sets at a generous 28.7px with 40.6px line-height, weights split only between 500 (the lead line) and 400 (the continuation), so the page reads like a paragraph of literary prose rather than a marketing headline. A blinking 2px caret (`{components.caret}`) sits inline after a rotating phrase ("People use Whilst for…"), turning the copy itself into a live writing demo.

Chrome is reduced to almost nothing. Borders are hairlines tinted at 6% black (`{colors.border-hairline}`), dividers max out at 400px wide, and the single call-to-action is a ghost button: a barely-there 2% black fill (`{colors.ghost-fill}`) inside a 6px-radius hairline, deepening to 4% on hover. The hero artwork lives inside a perfect circle (`{rounded.circle}`) with an inset 1px ring, floating half off the right edge. Nothing competes with the words.

**Key Characteristics:**
- Warm cream paper canvas (`#FFFDF7`) with a tiled grain texture set to `multiply` — flat color with real paper tooth
- Warm near-black ink (`#2B2B2B`), never cold pure black
- Serif-only typography (Spectral-class) across headline, body, footer, AND buttons — no sans anywhere
- A single generous reading size (28.7px / 40.6px line-height), differentiated only by weight 400 vs 500
- Live blinking caret inline in the copy — the page writes itself
- Ghost button as the only interactive chrome: 2%→4% black fill inside a 6px hairline
- Hairline borders at 6% black; dividers capped at 400px — restraint as identity
- Circular hero image well with an inset 1px ring, bleeding off the page edge
- Native dark mode swapping the cream canvas for `#1e1e1e`

## Colors

### Primary
- **Cream Paper** (`{colors.background}`): The entire page canvas, every surface. Warm off-white, not pure white.
- **Warm Ink** (`{colors.ink}`): Primary text — headline, body, button label. Warm near-black.
- **Strong Ink** (`{colors.ink-strong}`): Darker warm tone; doubles as the dark-mode canvas color.

### Muted Ink
- **Muted Ink** (`{colors.ink-muted}`): Footer/secondary links — `{colors.ink}` at 50% over cream, flattened opaque.
- **Faint Ink** (`{colors.ink-faint}`): Placeholder and disabled text — `{colors.ink}` at ~30%.

### Hairlines & Ghost Tints
- **Hairline Border** (`{colors.border-hairline}`): The signature — 6% black over cream. Dividers, inset image ring, button rest border.
- **Soft Border** (`{colors.border-soft}`): 12% black; button border on hover.
- **Ghost Fill** (`{colors.ghost-fill}`): 2% black; the ghost button's resting fill.
- **Ghost Fill Hover** (`{colors.ghost-fill-hover}`): 4% black; ghost button hover fill.

### On-Color
- **On Ink** (`{colors.on-ink}`): Cream used on dark backgrounds (rare).

## Typography

### Font Family
- **Primary**: A literary serif (Spectral-class), fallbacks `Georgia, Cambria, 'Times New Roman', serif`. Used for EVERYTHING — there is no secondary or sans family.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-serif}`, `{typography.body-serif}`).

| Token | Use |
|---|---|
| `display-serif` | 28.7px serif weight 500 — the lead hero line |
| `display-serif-light` | 28.7px serif weight 400 — the hero continuation |
| `body-serif` | Standard reading text |
| `button-ui` | The single ghost button label, 15px serif |
| `small` | Footer links, fine print |

### Principles
- **Serif everywhere**: The whole identity rests on one literary serif. No sans-serif appears anywhere — buttons and UI labels are serif too.
- **One size, two weights**: The hero uses a single 28.7px size; hierarchy comes from weight (500 lead, 400 continuation), not scale.
- **Prose, not headlines**: Copy is written and set as flowing sentences with a blinking caret — the marketing reads like writing in progress.
- **Generous leading**: 40.6px line-height on 28.7px text (~1.41) gives the page an unhurried, book-page rhythm.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. The page leans on large vertical rhythm — 80px blocks above and below the hero copy, with side padding scaling from 40px up to 160px at the widest breakpoint.

### Grid & Container
- Split hero: left column ~50–55% (max 720px) holds the copy; right column holds the circular image bleeding off-screen
- Side padding scales responsively: `sm:40px → md:60px → lg:80px → xl:160px`
- Dividers are short — capped at 400px wide, never full-bleed
- Footer links pinned bottom-left

### Whitespace Philosophy
- **Calm emptiness**: The cream canvas dominates; content occupies a fraction of the viewport with deliberate stillness.
- **Off-edge bleed**: The circular hero image floats half off the right edge (`right: -60px to -80px`), implying a world continuing beyond the frame.
- **Texture, not decoration**: Depth comes from the paper grain (`multiply`) and hairlines alone — no shadows, no color blocks.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow — paper grain texture only | Page canvas, text |
| Hairline (Level 1) | `0 0 0 1px {colors.border-hairline}` / inset ring | Buttons, image well, dividers |
| Ghost Fill (Level 1b) | 2%→4% black tint inside hairline | The CTA button |

**Shadow Philosophy**: Whilst uses essentially no drop shadows. The only "depth" is the inset hairline ring on the circular image (`box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06)`) and the multiply-blended paper texture. Flat, tactile, analog — depth is implied by grain and hairline, never by floating.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 6px | The ghost button |
| `md` | 10px | Cards, screenshot tiles |
| `lg` | 16px | Larger panels |
| `circle` | 9999px | The hero image well (full circle on square aspect) |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-ghost}`, `{components.image-circle}`).

### Buttons
- **`button-ghost`** — The site's only button. 2% black fill (`{colors.ghost-fill}`) inside a 6px-radius 6% hairline, 15px serif label, 10px 15px padding. Hover deepens fill to 4% and border to 12%. Includes a small arrow icon (`→`) drawn with 1.5px stroke.

### Dividers
- **`divider`** — A 1px hairline at 6% black, capped at 400px wide. Separates logo from copy.

### Image Treatment
- **`image-circle`** — Hero artwork in a perfect circle with `overflow: hidden` and an inset 1px hairline ring. Scales 1.05 and parallaxes subtly on interaction.
- **`card`** — Screenshot/example tiles: cream surface, 10px radius, hairline border.

### Distinctive Components
- **Live Caret**: A 2px-wide ink bar (`{components.caret}`) blinking inline after rotating phrases — the marketing copy types itself.
- **Paper Texture Overlay**: A fixed, pointer-events-none layer tiling `texture.png` at 200px with `mix-blend-mode: multiply` over the entire canvas.

## Do's and Don'ts

### Do
- Use the warm cream `{colors.background}` (#FFFDF7), never pure white
- Set ALL text in the serif — including buttons and UI labels
- Keep ink warm (`{colors.ink}`, #2B2B2B), never cold pure black
- Use hairline borders at 6% black for every edge
- Layer a multiply paper-grain texture over the canvas for tactility
- Build hierarchy from weight (400/500) at one size, not from a big scale
- Let imagery bleed off the page edge inside circular masks

### Don't
- Don't introduce a sans-serif — the serif-only rule is the identity
- Don't use saturated accent colors; the palette is cream + warm ink + black tints only
- Don't use drop shadows — depth is grain and hairline, never float
- Don't use full-bleed dividers; cap them around 400px
- Don't make buttons loud — the CTA is a near-invisible ghost
- Don't switch to a cold gray/white background that kills the paper warmth

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, image hidden or stacked, tighter padding |
| Tablet (sm) | 640–768px | Split hero begins; 40px side padding; image 420px |
| Tablet (md) | 768–1024px | 60px side padding; image 480px |
| Desktop (lg) | 1024–1280px | 80px side padding; image 560px |
| Large (xl) | >1280px | 160px side padding; copy max 720px; image 700px |

### Touch Targets
- The ghost button uses 10px 15px padding for a comfortable tap area
- Footer links spaced with a 16px gap

### Collapsing Strategy
- Hero split (copy + circular image) → single column on mobile; the bleed image hides below `sm`
- Side padding scales down from 160px to 40px
- Copy stays at its serif reading size; line length governed by max-width
- Texture overlay persists at all sizes

### Image Behavior
- Circular hero well maintains its inset hairline ring at all sizes
- Image scales 1.05 with subtle parallax translate on pointer movement
- Screenshots delivered as `.avif` for both desktop and mobile examples

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Cream Paper `{colors.background}` (#FFFDF7)
- Heading/body text: Warm Ink `{colors.ink}` (#2B2B2B)
- Secondary/footer links: Muted Ink `{colors.ink-muted}`
- Border (hairline): `0 0 0 1px {colors.border-hairline}` (6% black)
- Button fill: `{colors.ghost-fill}` → hover `{colors.ghost-fill-hover}`

### Example Component Prompts
- "Create a hero on cream `{colors.background}` with a tiled paper texture set to multiply. Lead line at 28.7px serif weight 500, color `{colors.ink}`, line-height 40.6px; continuation at the same size, weight 400. Add a 2px blinking caret inline."
- "Build a ghost button: 2% black fill `{colors.ghost-fill}`, 6px radius, 6% hairline border, 15px serif label `{colors.ink}`, 10px 15px padding, trailing → arrow at 1.5px stroke. Hover: fill 4%, border 12%."
- "Place a circular image well (`{rounded.circle}`) with `overflow: hidden` and an inset `0 0 0 1px {colors.border-hairline}` ring, bleeding 60px off the right edge."
- "Add a short divider: 1px `{colors.border-hairline}`, max-width 400px."

### Iteration Guide
1. Cream `#FFFDF7` canvas + multiply paper texture is the foundation — never plain white
2. Everything is serif, including buttons — no sans anywhere
3. Warm ink `#2B2B2B`, never cold black
4. One type size, hierarchy by weight (400 vs 500)
5. Hairlines at 6% black for every edge; no drop shadows
6. The single CTA is a whisper-quiet ghost button, not a solid fill

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Whilst. Brand names and trademarks belong to their respective owners.