---
version: alpha
name: Grain & Mortar
description: Warm editorial minimalism — a creative studio site on an off-white paper canvas with near-black ink, a single confident vermillion accent, and large serif-meets-grotesk headlines. Generous whitespace, oversized type, and craft-forward restraint.

colors:
  # Canvas + ink
  background: "#f4f1ea"
  surface: "#ffffff"
  surface-soft: "#ebe7dd"
  ink: "#1a1a1a"
  ink-pure: "#000000"
  ink-secondary: "#4a4742"
  ink-muted: "#7a766d"

  # Accent — the one warm pop
  primary: "#e8401f"
  primary-hover: "#c8330f"
  accent-soft: "#fbe4dd"

  # Neutrals
  line: "#d9d4c8"
  line-soft: "#e6e1d6"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#f4f1ea"

typography:
  display-hero:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -2px
  display:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -1px
  sub-heading:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.2px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.2px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.line}"

  label-tag:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

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

  card-work:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.line}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 24px 40px

  divider:
    backgroundColor: "{colors.line}"
    height: 1px
    width: 100%
---

# Grain & Mortar Design System

## Overview

Grain & Mortar is a Nebraska creative studio, and its website reads exactly like the studios it builds for: warm, crafted, and quietly confident. The canvas isn't sterile white — it's an off-white paper tone (`{colors.background}`), the color of good stock under gallery lights. Against it sits near-black ink (`{colors.ink}`) and a single, well-earned vermillion accent (`{colors.primary}`) that does all the pointing. There is no gradient, no glassmorphism, no second accent fighting for attention. The restraint is the brand.

The typographic engine is an editorial pairing: a high-contrast display serif for headlines (the kind with real optical character at large sizes) carried over a clean neutral grotesk for body and UI. Headlines run large — 56 to 72px — with tight negative tracking that makes them feel set, not typed. The body grotesk relaxes into a comfortable 1.6+ line-height for reading. This serif-on-top, sans-below split is the whole hierarchy: serif announces, sans explains.

Whitespace is the third material. Sections breathe with `{spacing.3xl}` to `{spacing.4xl}` of vertical air, work is shown large and uncrowded, and the layout never fills space just because it can. Chrome is minimal — hairline dividers in a warm taupe (`{colors.line}`), pill-shaped buttons, and small uppercase tracked labels (`{typography.label}`) that organize the page like captions in a monograph.

**Key Characteristics:**
- Off-white paper canvas (`{colors.background}`), never pure white for the page
- A single vermillion accent (`{colors.primary}`) — the only saturated color in the system
- Editorial serif display (`{typography.display-hero}`) over a neutral grotesk body
- Oversized headlines (56–72px) with tight negative tracking
- Generous gallery-grade whitespace between sections
- Uppercase tracked micro-labels for organization
- Pill-shaped buttons; soft warm hairlines instead of hard borders
- Warm neutral scale (taupe lines, soft cream surfaces) rather than cool grays

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): The page canvas — warm off-white, the brand's resting color.
- **White Surface** (`{colors.surface}`): Cards and content blocks that need to lift off the paper.
- **Soft Surface** (`{colors.surface-soft}`): Work tiles and muted blocks — a deeper cream.
- **Ink** (`{colors.ink}`): Primary text and headings. Near-black, not pure.
- **Ink Secondary** (`{colors.ink-secondary}`): Sub-copy and supporting text.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, timestamps.

### Accent
- **Vermillion** (`{colors.primary}`): The one pop — links, primary buttons, accent marks.
- **Vermillion Hover** (`{colors.primary-hover}`): Deeper press/hover state.
- **Accent Soft** (`{colors.accent-soft}`): Tinted background for tags and highlights.

### Neutrals
- **Line** (`{colors.line}`): Hairline dividers and input borders — warm taupe.
- **Line Soft** (`{colors.line-soft}`): Lighter card outlines.

### On-Color
- **On Primary** (`{colors.on-primary}`): White text on the vermillion accent.
- **On Ink** (`{colors.on-ink}`): Paper-tone text on dark ink buttons.

## Typography

### Font Family
- **Display**: `Fraunces`, with fallbacks `Georgia, serif` — a high-contrast editorial serif for all headlines.
- **Text/UI**: `Inter`, with fallbacks `Helvetica, Arial, sans-serif` — a neutral grotesk for body, labels, and buttons.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 72px serif hero — landing statement |
| `display` | 56px serif — major section openers |
| `section-heading` | 40px serif — section titles |
| `sub-heading` | 28px serif — sub-sections, callouts |
| `card-title` | 20px grotesk semibold — card and project titles |
| `body-large` | 20px grotesk — intros, lead paragraphs |
| `body` | 17px grotesk — standard reading text |
| `body-small` | 15px grotesk — dense supporting copy |
| `label` | 13px uppercase tracked — eyebrows, captions, organization |
| `button-ui` | 15px grotesk semibold — buttons and nav |
| `caption` | 13px grotesk — metadata |

### Principles
- **Serif announces, sans explains**: Every headline is the display serif; every paragraph, label, and button is the grotesk. The split is the hierarchy.
- **Tight display tracking**: Headlines use -1px to -2px letter-spacing so large serif type feels set and intentional.
- **Generous reading line-height**: Body copy runs 1.6–1.65 — comfortable, editorial, never cramped.
- **Tracked uppercase labels**: 13px labels open up with +1.2px letter-spacing to act as captions and section eyebrows.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with large jumps (`{spacing.3xl}`, `{spacing.4xl}`) reserved for section separation.

### Grid & Container
- Max content width: approximately 1200px, generous side margins
- Hero: large single-column serif statement with ample top padding
- Work: large project tiles, often two-up or full-bleed, never tightly gridded
- Hairline dividers (`{colors.line}`) separate major sections

### Whitespace Philosophy
- **Gallery rhythm**: Sections separated by `{spacing.3xl}`–`{spacing.4xl}` of vertical air.
- **Show work large**: Project imagery dominates; surrounding chrome stays minimal.
- **Air over fill**: The layout leaves space deliberately — emptiness is part of the craft.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed imagery, dividers |
| `sm` | 4px | Inputs, small containers |
| `md` | 8px | Inline elements |
| `lg` | 16px | Cards, work tiles |
| `pill` | 9999px | Buttons, tags, labels |

## Components

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

### Buttons
- **`button-primary`** — Vermillion fill, white text, pill radius. The CTA.
- **`button-secondary`** — Dark ink fill, paper-tone text, pill radius.
- **`button-ghost`** — Paper background with a warm hairline border.

### Tags & Labels
- **`label-tag`** — Soft accent background, vermillion text, uppercase tracked label, pill radius.

### Cards
- **`card`** — White surface lifted off the paper canvas, soft warm outline, 16px radius.
- **`card-work`** — Deeper cream surface for project tiles.

### Inputs
- **`input`** — White surface, warm taupe border, 4px radius.

### Navigation
- **`nav-bar`** — Paper-tone header, ink links, grotesk semibold, generous padding.

### Dividers
- **`divider`** — 1px warm taupe hairline replacing heavy section borders.

## Do's and Don'ts

### Do
- Use the off-white paper canvas (`{colors.background}`) for the page, not pure white
- Set headlines in the display serif with tight negative tracking
- Keep the vermillion accent (`{colors.primary}`) as the only saturated color
- Pair serif headlines with grotesk body and UI
- Give sections gallery-grade whitespace
- Use uppercase tracked labels to organize content like captions
- Use pill buttons and warm hairlines

### Don't
- Don't use pure white for the page background — the warmth is the brand
- Don't introduce a second accent color to compete with the vermillion
- Don't set body copy in the display serif — that's for headlines only
- Don't tighten body line-height below ~1.6
- Don't add heavy borders or shadows — warm hairlines carry separation
- Don't crowd work imagery; let it breathe

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero serif scales down, stacked work tiles |
| Tablet | 600–1024px | Two-up work grids, expanded padding |
| Desktop | 1024–1400px | Full layout, max ~1200px content width |
| Large Desktop | >1400px | Centered with generous margins |

### Collapsing Strategy
- Hero serif: 72px → scales down proportionally, keeps tight tracking
- Navigation: horizontal links → menu toggle
- Work tiles: two-up → single column
- Section spacing: `{spacing.4xl}` → `{spacing.2xl}` on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Page background: Paper `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Accent / CTA: Vermillion `{colors.primary}`
- Divider/border: Line `{colors.line}`

### Example Component Prompts
- "Create a hero on `{colors.background}` paper. Headline in Fraunces 72px weight 500, line-height 1.02, letter-spacing -2px, color `{colors.ink}`. Lead paragraph in Inter 20px weight 400, line-height 1.6, color `{colors.ink-secondary}`. Vermillion pill CTA (`{colors.primary}`, white text, 14px 28px padding)."
- "Design a work card: white surface (`{colors.surface}`), 16px radius, soft warm outline (`{colors.line-soft}`), 32px padding. Title in Inter 20px weight 600. Eyebrow as uppercase tracked label (`{typography.label}`) in `{colors.primary}`."
- "Build a tag: soft accent background (`{colors.accent-soft}`), vermillion text (`{colors.primary}`), uppercase 13px +1.2px tracking, pill radius."

### Iteration Guide
1. Keep the page on warm paper, never pure white
2. Serif for every headline, grotesk for everything else
3. One accent only — the vermillion does all the pointing
4. Whitespace is a material; favor air over density
5. Hairlines and pills, not heavy borders and hard corners

---

## 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 Grain & Mortar. Brand names and trademarks belong to their respective owners.