---
version: alpha
name: Pur Natur
description: Warm editorial minimalism for premium solid-wood flooring — T-Star Mono Round headlines (a rounded geometric monospace) set in uppercase against a soft cream canvas, near-black ink, and earthen wood-tone accents. Photography-led, near-monochrome, with mono-typographic labels that read like a craft maker's mark.

colors:
  # Canvas + ink
  background: "#f6f3ee"        # soft warm cream canvas
  surface: "#ffffff"
  surface-soft: "#efeae2"      # warmer panel tint
  ink: "#1c1a17"               # warm near-black, not pure black
  ink-secondary: "#6b6258"     # warm muted brown-gray body
  ink-muted: "#9a9085"         # captions, metadata

  # Warm wood accents
  primary: "#8a6a47"           # warm oak/walnut brown — CTA + links
  accent-clay: "#b08d63"       # lighter clay/timber
  accent-bark: "#4a3b2c"       # deep bark brown for dark panels

  # Neutral warm scale
  line: "#ddd6cc"              # hairline borders, dividers
  line-soft: "#e8e2d8"
  stone-400: "#aaa093"
  stone-600: "#74695c"

  # On-color
  on-primary: "#f6f3ee"
  on-dark: "#f1ece4"
  on-ink: "#f6f3ee"

typography:
  display-hero:
    fontFamily: "Space Mono, T-Star Mono Round, ui-monospace, monospace"
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.5px
  display-mono-label:
    fontFamily: "Space Mono, T-Star Mono Round, ui-monospace, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 2px
  section-heading:
    fontFamily: "Space Mono, T-Star Mono Round, ui-monospace, monospace"
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0px
  card-title:
    fontFamily: "Space Mono, T-Star Mono Round, ui-monospace, monospace"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  button-ui:
    fontFamily: "Space Mono, T-Star Mono Round, ui-monospace, monospace"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 1.5px
  caption:
    fontFamily: "Space Mono, T-Star Mono Round, ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 1.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 10px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent-bark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 28px

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 28px
    borderColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
    borderColor: "{colors.line}"

  card-dark:
    backgroundColor: "{colors.accent-bark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.none}"
    padding: 40px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 14px 16px
    borderColor: "{colors.line}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.line}"
---

# Pur Natur Design System

## Overview

Pur Natur sells solid-wood flooring — Douglas fir and oak planks milled for people who care where their materials come from — and the site is designed to feel like the product: honest, warm, and quiet. The canvas is a soft cream (`{colors.background}`) rather than clinical white, so the whole page reads at the temperature of unfinished timber. Photography of grain and light does the heavy lifting; the typography frames it without competing.

The signature move is the headline face: T-Star Mono Round, a rounded geometric monospace, used uppercase with generous tracking for hero lines, section labels, and buttons. A monospace at display size is an unusual, almost industrial choice for a natural-materials brand, and that tension is the point — it signals precision and craft, a maker's stamp pressed into the wood. Running body copy switches to a calm neutral sans (Inter as the closest open substitute), keeping long-form text comfortable while the mono carries identity. The corpus substitute for T-Star Mono Round is **Space Mono**, which shares the rounded terminals and even rhythm.

Color is deliberately restrained. Near-black warm ink (`{colors.ink}`) sits on cream, secondary copy steps down to a muted brown-gray (`{colors.ink-secondary}`), and the only real accent is wood itself: a warm oak/walnut brown (`{colors.primary}`) for links and primary actions, with a deeper bark brown (`{colors.accent-bark}`) reserved for dark inset panels. Nothing is saturated; nothing competes with the photography.

Geometry is sharp and editorial. Corners are square (`{rounded.none}` dominates), borders are single warm hairlines (`{colors.line}`), and layout leans on a strict grid with generous whitespace. There are no rounded cards, no drop shadows, no glassy chrome — the structure is as plain-sawn as the planks.

**Key Characteristics:**
- T-Star Mono Round (substitute: Space Mono) for all headlines, labels, and buttons — uppercase, tracked
- Warm cream canvas (`{colors.background}`), never pure white, never pure black ink
- Single wood-tone accent (`{colors.primary}`) — links and CTAs only
- Square corners and hairline warm borders — no rounding, no shadows
- Neutral sans for body (Inter) so the mono stays a brand signal, not a reading burden
- Photography-led: typography and color recede so grain and light lead
- Deep bark-brown (`{colors.accent-bark}`) dark panels for contrast moments

## Colors

### Canvas & Ink
- **Cream Canvas** (`{colors.background}`): The default page background — warm, paper-like.
- **Surface White** (`{colors.surface}`): Cards and panels lifted off the cream.
- **Warm Ink** (`{colors.ink}`): Headings and primary text. Warm near-black, never pure.
- **Secondary Ink** (`{colors.ink-secondary}`): Body and supporting copy.
- **Muted Ink** (`{colors.ink-muted}`): Captions, metadata, fine print.

### Wood Accents
- **Oak Brown** (`{colors.primary}`): Links, primary buttons — the one true accent.
- **Clay** (`{colors.accent-clay}`): Lighter timber tint for highlights.
- **Bark** (`{colors.accent-bark}`): Deep brown for dark inset panels and primary hover.

### Neutral Warm Scale
- **Line** (`{colors.line}`): Hairline borders, dividers.
- **Line Soft** (`{colors.line-soft}`): Lightest separators.
- **Stone 400 / 600** (`{colors.stone-400}` / `{colors.stone-600}`): Muted UI neutrals.

### On-Color
- **On Primary** (`{colors.on-primary}`): Cream text on the oak-brown CTA.
- **On Dark** (`{colors.on-dark}`): Warm off-white on bark panels.

## Typography

### Font Family
- **Display/Brand**: `Space Mono` (substitute for T-Star Mono Round), fallback `ui-monospace, monospace`
- **Body**: `Inter`, fallback `Helvetica Neue, Arial, sans-serif`

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 52px uppercase mono hero |
| `display-mono-label` | Tracked mono eyebrow/kicker labels |
| `section-heading` | Section titles in mono |
| `card-title` | Product / feature card titles |
| `body-large` | Lead paragraphs, intros (sans) |
| `body` | Standard reading text (sans) |
| `body-small` | Fine print, form labels |
| `button-ui` | Buttons — uppercase tracked mono |
| `caption` | Metadata, tags |

### Principles
- **Mono as the maker's mark**: T-Star Mono Round in uppercase carries the entire brand voice. Use it for headlines, labels, and buttons — never for long paragraphs.
- **Sans for reading**: Body copy in a neutral sans keeps long text comfortable.
- **Tracking on mono**: Labels and buttons get +1.5px to +2px letter-spacing; hero stays near-neutral.
- **Two weights**: Regular (400) and Bold (700) only — matching the two webfonts the brand actually ships.

## Layout

### Spacing System
Base rhythm is 8px, scaling to large editorial gaps (`{spacing.3xl}`–`{spacing.4xl}`) between sections. Whitespace is generous so photography can breathe.

### Grid & Container
- Max content width ~1280px, centered
- Hero: full-bleed photography with overlaid mono headline
- Product sections: 2–3 column plank/grid layouts
- Dividers: 1px solid `{colors.line}`

### Whitespace Philosophy
- **Material breathing room**: Large vertical gaps between sections let grain photography dominate.
- **Square, calm, gridded**: No rounding, no shadow — structure comes from alignment and hairlines.
- **Restraint as luxury**: Sparse accents and quiet color read as premium and natural.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — buttons, cards, inputs, badges |
| `xs` | 2px | Tiny inline elements |
| `sm` | 4px | Small containers |
| `md` | 6px | Occasional softening |
| `lg` | 10px | Rare, image insets |
| `pill` | 9999px | Reserved (sparingly used) |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Oak-brown fill, cream text, square corners, uppercase tracked mono. Hover deepens to bark.
- **`button-outline`** — Cream surface, ink text, 1px ink border, square.

### Cards
- **`card`** — White surface on cream, hairline border, square, no shadow.
- **`card-dark`** — Bark-brown panel with warm off-white text for contrast moments.

### Inputs
- **`input`** — White, hairline border, square; focus border shifts to oak-brown.

### Navigation
- **`nav-bar`** — Cream header, uppercase mono links, bottom hairline border.

### Badges
- **`badge`** — Soft warm tint, square, mono caption — used like a craft label.

## Do's and Don'ts

### Do
- Use T-Star Mono Round (Space Mono) uppercase for headlines, labels, and buttons
- Keep the canvas warm cream — never pure white
- Limit accent to the single oak-brown; let wood photography supply the color
- Keep corners square and borders to single warm hairlines
- Use bark-brown panels for high-contrast moments

### Don't
- Don't set long body paragraphs in the mono face
- Don't introduce saturated or cool colors into chrome
- Don't add drop shadows or rounded cards — the system is flat and square
- Don't use pure black ink or pure white surfaces
- Don't crowd the photography — whitespace is the luxury signal

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked imagery, hamburger nav |
| Tablet | 600–1024px | 2-column product grids |
| Desktop | 1024–1280px | Full multi-column editorial grid |
| Large | >1280px | Centered, generous margins |

### Collapsing Strategy
- Hero mono headline scales down, keeps uppercase tracking
- Nav links collapse to hamburger
- Product grids 3 → 2 → 1 column
- Section spacing compresses from 140px toward 64px on mobile

### Image Behavior
- Full-bleed grain photography maintained at all sizes
- Square crops, no rounding

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Oak Brown `{colors.primary}`
- Background: Cream `{colors.background}`
- Heading text: Warm Ink `{colors.ink}`
- Body text: Secondary Ink `{colors.ink-secondary}`
- Border: 1px `{colors.line}`
- Dark panel: Bark `{colors.accent-bark}`

### Example Component Prompts
- "Hero on warm cream `{colors.background}`. Uppercase headline in Space Mono 52px weight 700, color `{colors.ink}`. Oak-brown square CTA (`{colors.primary}`, cream text, uppercase tracked mono, 0px radius, 16px 28px padding)."
- "Product card: white surface, 1px `{colors.line}` border, square corners, no shadow. Title in Space Mono 22px weight 700, body in Inter 16px `{colors.ink-secondary}`."
- "Dark feature panel: bark-brown `{colors.accent-bark}` background, warm off-white text `{colors.on-dark}`, uppercase mono heading."

### Iteration Guide
1. Mono uppercase for all headlines/labels/buttons; sans for body only
2. Cream canvas + warm near-black ink — never pure white or black
3. One accent: oak brown — everything else is neutral warm gray
4. Square corners, hairline borders, zero shadow
5. Let photography lead; typography and color recede

---

## 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 Pur Natur. Brand names and trademarks belong to their respective owners.