# Calm & Minimal: Quiet, spacious, every pixel considered

Calm & Minimal is a quiet, light, spacious style for focused productivity tools and premium consumer software. Near-white tinted canvases, one restrained accent, and refined type with hierarchy carried by size rather than weight let real product UI do the persuading. Depth is soft and almost invisible, and each brand confines its personality to one contained device: a glossy icon, a gradient halo, a paper collage, or a set of line pictograms.

Sites in this collection: [Things](https://culturedcode.com/things/), [mymind](https://mymind.com), [Craft](https://www.craft.do), [Family](https://family.co), [Arc](https://arc.net), [Teenage Engineering](https://teenage.engineering).

## Brief for your agent

Design this in a calm, minimal, premium-software style. Use a light canvas of #ffffff alternating with near-identical tinted bands (warm #fbfaf9/#f6f4ef or cool #f2f5f7/#f9fafc), and separate sections by tint and space, never heavy lines. Hairlines, when needed, are 1px #e2e2e2. Text is #121212 for headlines, #3a475a–#474645 for body and #6b7280 for metadata. Use exactly one accent, #2576eb blue, for CTAs, links, active states and small eyebrows. Allow other colours only in tiny glyphs, tag capsules and user content. Typography: headlines in a regular-weight serif (Newsreader, weight 400) with H1 at 64–96px, line-height 0.95–1.0, tracking -0.03em, and H2 at 44–56px. Body is Inter at 16–18px with line-height 1.5, and lead paragraphs are 20–24px. Eyebrows are 12–13px uppercase with 0.1em tracking. Build hierarchy through size, not bold. Layout: centred single column with a 1080–1200px container, text measures of 420–500px, 120–200px between sections, and each section built from one headline, one short paragraph and one large visual. Show the real product UI as high-fidelity screenshots that are tilted, cropped or bleeding off edges, never illustrations. Components: fully rounded pill buttons 40–44px tall (accent or #171717 primary, #f6f4ef secondary), no borders. Cards use #fbfaf9 fills with a 16–24px radius and UI fragments cropped at the edge. Shadows are wide and faint (0 2px 8px rgba(0,0,0,.08), or a 1px rgba(0,0,0,.04) ring). App UI: a tinted #f2f5f7 sidebar about 240px wide with a small coloured icon per item and a white rounded selected row, a white main pane, 13–14px rows with hollow circular checkboxes and capsule tags, borderless filled inputs with a 12px radius and an accent focus ring, and empty states made of a small colour glyph, a bold title, one muted line and a text link. Add exactly one personality motif, such as a blurred radial glow behind the hero or an oversized app-icon bookend, and keep everything else quiet.

## Principles

### Tinted near-whites instead of lines

Separate sections by alternating near-identical off-whites rather than drawing borders or using strong contrast. Things alternates #f2f5f7, #fbfcfe and #ffffff. mymind alternates #ffffff, cool #f9fafc and warm #f6f4f2. Family uses #ffffff with #fbfaf9 bands. Craft sits on warm #fcf9f7, and Arc balances white against cream #fffcec. Keep the lightness difference between adjacent bands within about 2–4%. Where a divider is unavoidable, use a 1px hairline in #e1e1e1–#e2e2e2.

### One accent, used sparingly

Give a single colour all CTA, link, eyebrow and emphasis work, and keep surfaces neutral. Examples: Things blue #2576eb, mymind ember #ff5924, Arc cobalt #3139fb, and Family's near-black #171717 pills. Allow other colours only in small glyphs, tag pills, nav dots or user content. Things' coloured sidebar icons and mymind's dotted nav links show how. Teenage Engineering takes this to its extreme with only #000000 and #f1f2f2.

### Real product UI is the hero

Show pixel-accurate screenshots and live UI fragments, never illustrated mockups. Things tilts a real Mac window so it also forms the section divider. Family and Craft crop UI fragments at the card edge to imply more. Arc re-skins each browser window to demo a feature. mymind places a big rounded app panel with a 0 0 120px rgba(0,0,0,.15) shadow. The product chrome itself is airy and nearly borderless, so the screenshots read as calm.

### Slow, centred, narrow rhythm

Each section follows the same pattern: one headline, one short paragraph, one visual. Separate sections by 120–250px of space. Containers run 1000–1300px (Things 1015, Family 1024, Craft 1080, Arc 1200, mymind 1300). Text measures stay at 420–500px and are centred. Things, mymind and Arc repeat this cadence with almost no variation, and the repetition is a large part of why they feel calm.

### Hierarchy through size, not weight

Use either a regular-weight editorial serif with tight tracking or a tight medium/bold grotesk, then let size jumps do the work. The serif route: mymind's Louize at 140px, line-height 0.85, -0.06em, and Craft's Untitled Serif at 400 weight, 66px, -3%. The grotesk route: Family at 500 weight, 68px, -0.02em, and Things' system font at 700 weight, 36–56px. Body copy is 16–20px with line-height 1.4–1.6 in a soft graphite. Teenage Engineering builds its whole hierarchy from hairline weight 100 at 13px versus 27px, with no bold anywhere.

### Soft depth only

Prefer flat fills over shadows. When a shadow is needed, keep it long, wide and faint. Family uses a 1px ring at rgba(0,0,0,.04). Things' tweet cards use 0 2px 8px rgba(0,0,0,.1). Craft's layered shadows sit at 5–8% opacity. Card radii run 12–24px (Things 12–18, Craft and Family 24). Buttons are fully rounded pills. Never use hard offsets, heavy borders or glossy gradients on UI chrome.

### Personality in one contained device

Each site picks a single expressive motif and keeps it at the edges: Things' glossy app icon as hero and footer bookend, mymind's heavily blurred orange-pink radial halos, Craft's torn-paper hero and grainy pastel panels, Family's mascot clusters that bleed off the viewport edges, Arc's wavy band edges and grain, and Teenage Engineering's single-stroke pictograms. Choose one, place it at section boundaries or around the hero, and keep the content zone clean.

## Colour

Canvas: #ffffff to #fcf9f7. Alternate bands: cool #f2f5f7–#f9fafc or warm #f6f4ef–#fbfaf9. Pick one temperature per product; warm (paper, oat, cream #fffcec) reads more personal, and cool (mist) reads more native and Apple-like. Headline text: #000000–#121212 or graphite #303336. Body text: #3a475a–#474645. Muted text: #55606e–#848281, and only for metadata at 13px or larger on white; never put it on tints or gradients. Hairlines: #e1e1e1–#e2e2e2. Accent: one saturated hue, for example blue #2576eb, orange #ff5924, cobalt #3139fb, or near-black #171717 used as the CTA. Secondary pills use oat #f6f4ef or #f5f7f9. Optional pastels (periwinkle #b8caf5, mint #9bd8a9, butter #fde99b) only for large feature panels, all at similar lightness, one per pillar. Dark variant: #000000 with #f1f2f2 and no accent.

## Typography

Choose one route. (A) Editorial: a high-contrast or regular serif (Newsreader, Source Serif 4, Instrument Serif, Fraunces) at weight 400. H1 is 64–140px with line-height 0.85–1.0 and tracking -0.03 to -0.06em. Only apply that tight tracking above about 60px. H2 is 46–80px, and italic is reserved for one word or for product-voice lines. (B) Native grotesk: Inter or Manrope at weight 500–700. H1 is 56–68px with line-height 1.0–1.1 and -0.02em tracking. H2 is 36–44px, often written as two short stacked sentences ending in full stops. In both routes, body text is a crisp sans (Inter) at 16–18px with line-height 1.4–1.6, and lead paragraphs are 20–24px. Eyebrows are 12–13px, either uppercase with 0.08–0.1em tracking or sentence-case semibold in the accent. Metadata is 13–15px muted. Avoid bold serifs, and keep mixed weights to two per page.

## Layout

Use a centred single column with a 1000–1200px container and 420–500px text measures. Leave 120–250px between sections and 80–120px inside bands. Default to symmetric, centred alignment, and switch to 50/50 rows only for feature detail (Family). Let product visuals break the grid: tilted windows, device clusters and carousels that bleed off the edges. Grids stay sparse: 3×2 feature cards, a 4-column download or testimonial row, or a 2×2 card grid inside a panel with 16px gaps. The nav is minimal: logo left, 3–4 links at 14–15px, at most one pill CTA, and either no bar or a 1px hairline. A floating frosted pill nav (Craft, about 20px radius) is also acceptable. Close the page with a bookend that echoes the hero, such as an oversized cropped app icon.

## Components

Buttons are fully rounded pills, 32–44px tall, with 15px labels at weight 500–600. Primary is the accent or #171717 with white text; secondary is a #f6f4ef or #f5f7f9 fill. Neither has a border. Plain text links with a chevron or play icon, such as 'See features ›', often replace buttons entirely. Cards use #fbfaf9 or #f2f5f7 fills with 16–24px radius, no border, and a UI fragment cropped by the card edge, with a 14–15px title and a 2-line muted caption in the bottom-left. Section openers are a small full-colour glyph (about 40px) inline with or above the title, followed by a narrow grey paragraph. Tags are small outlined or tinted capsules. Testimonials are large italic serif quotes (about 28px) with a hairline leading to a small avatar, or small white cards with a 6px radius and a soft shadow. Product frames have a 10–12px radius, a 1px light border and a wide faint shadow. Download rows use 4–5 columns split by 1px vertical hairlines.

## App UI

Carry the calm straight into the product. The sidebar is a tinted pane (#f2f5f7 or #f9fafc) about 220–260px wide. Each nav item gets its own small coloured icon (blue tray, yellow star, red calendar) and a 13–14px label. The selected item is a white or slightly darker rounded row with an 8px radius, not an accent bar. The main pane is pure white. Rows are compact (13–14px text, 32–36px tall) with hollow circular checkboxes, grey sub-labels, capsule tags and right-aligned values. Separate rows with whitespace or #eee hairlines rather than full borders. Tables need no vertical rules: use 12px uppercase or muted headers, right-aligned numbers, and green or red reserved for deltas and status. Forms use #f5f7f9 filled inputs with a 10–12px radius or full pill, no border at rest, and a focus ring of 2px accent at 30–40% opacity. Labels are 13px medium. Search can be a large italic serif placeholder over a hairline (mymind). Floating panels (pickers, popovers) are white with a 12–16px radius and one soft shadow. Use accent colour only for the primary action, active tab markers, counts and the floating '+' button. Empty states are a small colour glyph, a bold 17–20px title, one muted line of at most 60 characters, and a single text link or pill, all centred with plenty of space. For a dark or instrument mode, follow Teenage Engineering: #000000 background, #f1f2f2 text, 1px outline icons, lowercase labels, 0 radius and no elevation.

## Do

- Alternate near-identical off-whites (#ffffff / #f2f5f7 / #fbfaf9) to separate sections.
- Use one accent colour for every interactive element.
- Show real, high-fidelity product screenshots, cropped or tilted so they bleed past the edges.
- Keep paragraphs centred and 420–500px wide.
- Leave 120–250px between sections.
- Set serif headlines at weight 400 with negative tracking, or grotesk headlines at 500–700 with -0.02em.
- Use pill buttons with flat fills, or plain text links with chevrons.
- Keep shadows at 4–15% opacity and wide, around 8–120px blur.
- Confine colour to small glyphs, tags and user content.
- Pick one personality motif and keep it at the hero and section edges.

## Don't

- Don't use gradients, glossy effects or heavy borders on buttons and cards.
- Don't add a second saturated brand colour.
- Don't use illustrated or fake UI where the real product could be shown.
- Don't bold serif headlines or apply tight tracking below 60px.
- Don't put #848281-level grey text on tinted panels or gradients.
- Don't pack dense feature grids or icon walls into one section.
- Don't use hard drop shadows or offset shadows.
- Don't stack multiple decorative motifs (grain, squiggles, halos, mascots) on one page.
- Don't use wide, left-aligned intro paragraphs.
- Don't fill large surfaces with saturated colour unless it is one deliberate brand band.

## Theme preset

```json
{
    "brand": "#2576eb",
    "neutral_tone": "warm",
    "mode": "light",
    "radius": 16,
    "density": "airy",
    "heading_font": "Newsreader",
    "body_font": "Inter",
    "shadow": "soft"
}
```

## The sites

### Things (https://culturedcode.com/things/)

Things presents itself like a well-made Apple app: a cool off-white canvas, the system font (rendering as SF Pro on Apple devices), one glossy app icon as the hero, and real product screenshots tilted and cropped like objects on a desk. Every section repeats the same quiet centred pattern of emoji-style icon plus bold title, a short grey paragraph and one blue link, so the polish of the product screenshots carries the page instead of marketing chrome.

Palette: #f2f5f7 background, #ffffff surface, #fbfcfe background, #303336 text, #55606e muted, #8792a1 muted, #2576eb accent, #5c9cf5 highlight. Type: ui-sans-serif (system stack, renders as SF Pro on Apple devices) headings, ui-sans-serif (system stack, renders as SF Pro on Apple devices) body.

Signature moves:
- Make the glossy app icon the hero image and repeat it oversized and cropped at the bottom of the page as a bookend.
- Show the real app UI in perspective, tilted on a diagonal and bleeding off the edge, so the screenshot also forms the section divider.
- Give every section the same opener: a small full-colour emoji-style glyph inline with a bold title, then a narrow centred grey paragraph.
- Use plain blue text links with icons or chevrons as CTAs instead of filled buttons, and keep strong colour for the single 'Free Trial' action.
- Present press quotes as speech bubbles with tails pointing to the publication logo, and highlight praise phrases with a soft blue underline.
- Alternate near-identical cool off-whites (#f2f5f7, #fbfcfe, #ffffff) to separate sections without lines or heavy contrast.

Full teardown: https://pageproofer.com/inspiration/calm-minimal/things.md · Screenshots: https://pageproofer.com/images/inspiration/calm-minimal/things/hero.jpg (first screen), https://pageproofer.com/images/inspiration/calm-minimal/things/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/calm-minimal/things/tokens.json

### mymind (https://mymind.com)

mymind pairs a high-contrast editorial serif (Louize, 140px, tight -6% tracking) with a soft, glowing orange-to-pink radial gradient and generous white space, so a productivity tool reads like a calm, private art book rather than SaaS software. The warmth comes almost entirely from blurred gradient halos and one hot orange (#ff5924), while the actual UI stays near-white and quiet, letting saved images and quotes carry the colour.

Palette: #ffffff background, #f9fafc surface, #f6f4f2 surface, #3a475a text, #000000 text, #748297 muted, #ff5924 accent, #e2e2e2 border. Type: Louize (205TF) headings, Inter (UI text); Avenir for small labels body.

Signature moves:
- Set the hero headline in a huge, tightly tracked high-contrast serif (140px, 0.85 line-height, -6% tracking) over a white circle carved out of a blurry orange-pink radial gradient.
- Embed coloured outlined pills inside running sentences to name content types, turning copy into a visual tag cloud.
- Use italic serif for product-voice moments (search placeholder, sign-off lines) to make the software feel personal and literary.
- Keep the palette almost monochrome and let a single hot orange (#ff5924) do all CTA, eyebrow and emphasis work, with gradient glows supplying warmth.
- Write a manifesto section in large serif prose with orange 'NO' statements to sell values rather than features.
- Prefix nav links with tiny coloured dots instead of icons or underlines.

Full teardown: https://pageproofer.com/inspiration/calm-minimal/mymind.md · Screenshots: https://pageproofer.com/images/inspiration/calm-minimal/mymind/hero.jpg (first screen), https://pageproofer.com/images/inspiration/calm-minimal/mymind/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/calm-minimal/mymind/tokens.json

### Craft (https://www.craft.do)

Craft pairs a warm off-white canvas and an elegant editorial serif with a tactile, scrapbook-like collage of torn paper, halftone clouds and grainy pastel feature panels. It works because the playful collage carries the brand personality while the product UI stays crisp, white and Apple-native. The result reads as both premium and approachable.

Palette: #fcf9f7 background, #ffffff surface, #030302 text, #b8caf5 accent, #9bd8a9 accent, #fde99b accent, #ffdbc5 highlight, #e1e1e1 border. Type: UntitledSerifFont (Klim Untitled Serif) headings, UntitledSansFont (Klim Untitled Sans) body.

Signature moves:
- Make the hero a torn-paper collage: rip-edged shapes in white, grey, black, periwinkle and lined notepaper frame the real app window as if it is emerging from a scrapbook.
- Add visible grain, noise or halftone texture to flat pastel panels and cloud imagery so digital surfaces feel like paper.
- Set every headline in a regular-weight serif with tight negative tracking, and italicise one word ('your') for voice. Keep all UI and body text in a crisp sans.
- Rotate one pastel panel colour per feature pillar (periwinkle = Write, mint = Imagine, butter = Plan). Tint each panel's pill button to match.
- Show product features as small, real, working UI fragments (a task list with tags, a calendar 'Today' tile, an integrations icon grid) inside white cards, never as abstract illustrations.
- Use pull quotes as editorial interludes: large italic serif, with a hairline rule leading to a tiny avatar, alternating sides.

Full teardown: https://pageproofer.com/inspiration/calm-minimal/craft.md · Screenshots: https://pageproofer.com/images/inspiration/calm-minimal/craft/hero.jpg (first screen), https://pageproofer.com/images/inspiration/calm-minimal/craft/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/calm-minimal/craft/tokens.json

### Family (https://family.co)

Family pairs a near-white, warm-neutral canvas and tight custom grotesk headlines with bursts of saturated, cartoon-mascot illustration, so a crypto wallet reads as friendly and consumer-grade instead of technical. The restraint everywhere else (Inter body at 14px, warm greys, soft #fbfaf9 cards, pill buttons) lets the playful illustrations and colour-coded section accents carry the personality without looking cluttered.

Palette: #ffffff background, #fbfaf9 surface, #f6f4ef surface, #121212 text, #474645 text, #848281 muted, #171717 accent, #f97316 highlight. Type: Family (custom grotesk) headings, Inter body.

Signature moves:
- Flank a centered headline with dense clusters of flat, cheerful mascot illustrations that bleed off both viewport edges, keeping the middle text zone completely clean.
- Give each feature section its own accent colour and apply it consistently to the eyebrow, checklist ticks and caption icons, while headlines and body stay neutral.
- Put real product UI inside soft warm-grey #fbfaf9 cards with 24px radius and let the phone or UI fragment crop off the card edge.
- Write headlines as two short stacked sentences in a tight 500-weight grotesk ('Relentless protection. Restful ease.').
- Use beige #f6f4ef and near-black #171717 pills as the only button styles—no outlines, no gradients.
- Replace borders with warm off-white fills and hairline dividers; the measured shadow is a near-invisible rgba(0,0,0,0.04) 1px ring.

Full teardown: https://pageproofer.com/inspiration/calm-minimal/family.md · Screenshots: https://pageproofer.com/images/inspiration/calm-minimal/family/hero.jpg (first screen), https://pageproofer.com/images/inspiration/calm-minimal/family/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/calm-minimal/family/tokens.json

### Arc (https://arc.net)

Arc's homepage pairs an electric cobalt (#3139fb) with warm cream (#fffcec) and white, then frames the product with hand-drawn squiggle edges, grainy noise textures and soft pastel gradient blooms, so a serious browser reads as playful and personal. Big, slightly rounded geometric display type in brand blue, quiet grey body copy and large real-product window mockups keep it legible and credible while the details stay whimsical.

Palette: #3139fb accent, #fffcec surface, #ffffff background, #696969 muted, #000000 text, #2702c2 highlight, #fffadd highlight. Type: Marlin Soft SQ (headlines, testimonials); Exposure VAR serif for the Dia hero headline headings, ABC Oracle body.

Signature moves:
- Cut colour bands with wavy, zigzag or scalloped SVG edges instead of straight lines, so sections feel hand-made and stitched together.
- Add a fine noise/grain texture over large flat brand-colour fields so the saturated cobalt feels printed rather than digital.
- Commit to one saturated brand colour (#3139fb) for headlines, borders, links and full-bleed bands, and balance it with warm cream #fffcec instead of grey.
- Show the real product UI in large browser-window mockups, but re-skin each one with a different theme colour so the screenshots double as feature demos.
- Hide playful hand-drawn line icons (peace sign, heart, squiggle arrow) as small delights around the testimonials and the 'more details' scroll cue.
- Write headlines as short declarative sentences with full stops, in heavy rounded display type with tight -4% tracking.

Full teardown: https://pageproofer.com/inspiration/calm-minimal/arc.md · Screenshots: https://pageproofer.com/images/inspiration/calm-minimal/arc/hero.jpg (first screen), https://pageproofer.com/images/inspiration/calm-minimal/arc/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/calm-minimal/arc/tokens.json

### Teenage Engineering (https://teenage.engineering)

Teenage Engineering's homepage is a single full-bleed black-and-white photograph of their New York store, with a hairline-thin white navigation of outline pictograms and lowercase labels floating across the top, and almost nothing else. It works because the restraint reads as confidence: pure black, one off-white, ultra-light type and line-drawn icons make the brand feel like a design object rather than a shop.

Palette: #000000 background, #f1f2f2 text, #e5e5e5 muted, #1a1a1a surface, #8a8a8a highlight. Type: te-40 (Teenage Engineering custom grotesk) headings, te-20 (custom, light/hairline grotesk) body.

Signature moves:
- Let one full-bleed monochrome photograph be the entire homepage, and put the headline inside the image (signage) instead of in HTML type.
- Pair every nav item with a custom single-stroke outline pictogram the same off-white as the text, so navigation reads like a technical diagram.
- Set all UI type lowercase at hairline weight (100) and create hierarchy only through size jumps (about 13px to about 27px), never bold.
- Use strict two-tone colour, #000000 and #f1f2f2, with zero radius, zero shadows and zero borders.
- Drop in a block of tiny Japanese text as graphic texture next to the logo, signalling a design-object sensibility.
- Float the nav transparently over the image with no bar, blur or gradient, relying on dark photo areas for contrast.

Full teardown: https://pageproofer.com/inspiration/calm-minimal/teenage-engineering.md · Screenshots: https://pageproofer.com/images/inspiration/calm-minimal/teenage-engineering/hero.jpg (first screen), https://pageproofer.com/images/inspiration/calm-minimal/teenage-engineering/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/calm-minimal/teenage-engineering/tokens.json