---
version: alpha
name: "Blank Street"
description: "A warm off-white canvas built on Lay Grotesk ultra-heavy uppercase display and a quiet serif counterpoint, anchored by a signature mint green and a near-black that replaces pure black entirely."

colors:
  # Surface / canvas
  background: "#fef8f5"        # warm parchment white — logo background color confirmed by extraction
  surface: "#ffffff"           # clean white card panels
  surface-mint: "#a8e0c8"     # /* estimated */ signature Blank Street mint green — brand canvas for accent sections
  surface-dark: "#231f20"      # near-black — footer, dark panels, inverted sections

  # Ink / text
  ink: "#231f20"               # near-black text — replaces pure black entirely, confirmed by extraction
  ink-secondary: "#5a5656"     # /* estimated */ muted supporting copy on light surfaces
  ink-muted: "#9c9898"         # /* estimated */ captions, metadata, disabled
  on-dark: "#fef8f5"           # warm white text on dark/inverted surfaces
  on-mint: "#231f20"           # near-black text on mint surfaces

  # Brand accent
  primary: "#231f20"           # near-black — primary button fill, high-contrast CTA
  on-primary: "#ffffff"        # white text on dark button
  accent: "#a8e0c8"            # /* estimated */ mint green — the brand's signature color
  on-accent: "#231f20"         # near-black text on mint

  # Interaction states
  primary-hover: "#3d3738"     # /* estimated */ slightly lighter near-black on hover

  # Borders
  border: "#e8e2de"            # /* estimated */ warm hairline dividers on parchment canvas
  border-dark: "#231f20"       # confirmed — dark stroke on links and buttons

  # Shadow tints
  shadow-soft: "#231f20"       # /* estimated */ dark-tinted shadow for any elevation

typography:
  display-hero:
    fontFamily: "Lay Grotesk, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 60px
    fontWeight: 800
    lineHeight: 0.95
    letterSpacing: 0px
  display:
    fontFamily: "Lay Grotesk, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 55px
    fontWeight: 800
    lineHeight: 0.95
    letterSpacing: 1.65px
  heading-section:
    fontFamily: "Lay Grotesk, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 25px
    fontWeight: 800
    lineHeight: 0.95
    letterSpacing: 0px
  body-large:
    fontFamily: "Lay Grotesk, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0px
  body:
    fontFamily: "Lay Grotesk, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0px
  body-serif:
    fontFamily: "Times, Georgia, Cambria, Times New Roman, serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px
  nav-link:
    fontFamily: "Lay Grotesk, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 800
    lineHeight: 1.60
    letterSpacing: 0.42px
  button-ui:
    fontFamily: "Lay Grotesk, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: 0.42px
  caption:
    fontFamily: "Lay Grotesk, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 28px
  2xl: 48px
  3xl: 80px
  4xl: 120px

rounded:
  none: 0px
  xs: 2px
  pill: 9999px

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

  button-outline:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 8px 24px
  button-outline-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 8px 24px

  button-ghost-inverted:
    backgroundColor: "#00000000"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 8px 24px
  button-ghost-inverted-hover:
    backgroundColor: "{colors.on-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 8px 24px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px
  card-mint:
    backgroundColor: "{colors.surface-mint}"
    textColor: "{colors.on-mint}"
    rounded: "{rounded.none}"
    padding: 20px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 8px 20px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 8px 20px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 20px

  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Blank Street Design System

## Overview

Blank Street's site opens like a quiet morning before the city wakes. The canvas is warm parchment (`{colors.background}`) — barely a blush above white, closer to a paper bag than a blank page — and everything sits on it with unusual restraint for a coffee brand operating in the DTC boom. There are no gradients, no illustration libraries, no neon splashes. The signature is earned through the collision of two voices: Lay Grotesk at weight 800, running fully uppercase at 55–60px with near-zero line-height (`0.95`), delivers the urgency of a coffee menu board pressed flat into a browser, while Times serif at a quiet 20px weight 400 cuts underneath it like a whisper. That pairing — brutalist grotesque and genteel serif — is the design's personality in two typefaces.

The `{colors.accent}` mint green, Blank Street's visual trademark from their branded cups and shop walls, punctuates the composition selectively. Rather than flooding the canvas, it appears as surface blocks in accent sections, as the fill for hover moments, and as badge fills — always in conversation with the near-black `{colors.ink}`. The primary CTA button is near-black (`{colors.primary}`) with a 50px pill radius and white uppercase type: it looks like it was stamped from a rubber block. On dark inverted sections, a transparent pill button with a white 1px border floats against photography — the "ORDER NOW" button extracted by dembrandt is this ghost-on-dark variant. The system never uses pure black; every dark value is the extracted `#231f20`, which carries just enough brown warmth to keep it from reading as printer ink.

What gives the system its character is the decision to almost eliminate radius variation. Outside of the pill CTAs and inputs, surfaces are largely square. Cards are flat rectangles. The few 2px micro-radius values appear on progress indicators and minor UI chrome — nothing more. This near-binary shape language (flat or pill, nothing in between) pushes the eye toward the typography and the mint accent rather than relying on shape softness to do the friendly work.

**Key Characteristics:**
- Warm parchment canvas (`{colors.background}`) — barely off-white, sets a paper-bag morning warmth
- Lay Grotesk weight 800, uppercase, 0.95 line-height (`{typography.display-hero}`) — the stamped menu-board personality
- Times serif (`{typography.body-serif}`) as a quiet secondary voice — contrast through typeface category, not weight
- Near-black `{colors.ink}` replaces pure black throughout — brown-tinted darkness
- Signature mint green `{colors.accent}` used sparingly in surface blocks and badges — the branded cup color
- Binary radius language: `{rounded.pill}` for CTAs and inputs, `{rounded.none}` for everything else
- Ghost pill button on dark: transparent fill, 1px white border, white uppercase type — the hero CTA pattern
- 0.95 line-height on all display type — stacked uppercase headlines read like single compressed shapes
- Positive letter-spacing (1.65px) on secondary display level — widens the uppercase for breadth
- Flat, shadow-free surfaces — depth comes from color blocking and typographic mass

## Colors

### Surface & Canvas
- **Parchment White** (`{colors.background}`): The defining canvas. Warm and skin-like, it keeps the page from feeling clinical.
- **White** (`{colors.surface}`): Clean panels, cards, and modal backgrounds on the warm canvas.
- **Mint Green** (`{colors.surface-mint}`): Blank Street's signature color — the same mint as the branded cups and shop interiors. Used as full-section fills and inverted panels.
- **Near-Black** (`{colors.surface-dark}`): Footer, dark editorial sections, and photography-overlaid modules.

### Ink / Text
- **Near-Black Ink** (`{colors.ink}`): All primary text — headings, body, labels. `#231f20` rather than pure black, carrying faint brown warmth.
- **Muted Gray** (`{colors.ink-secondary}`): Supporting copy and metadata on light backgrounds.
- **Warm Taupe** (`{colors.ink-muted}`): Captions, placeholders, disabled states.
- **Warm White** (`{colors.on-dark}`): Text on near-black and dark inverted surfaces.
- **Near-Black on Mint** (`{colors.on-mint}`): Body and labels on mint-green panels.

### Brand Accent
- **Near-Black** (`{colors.primary}`): Primary button fill — the heavy-stamp CTA. Hover lightens subtly to `{colors.primary-hover}`.
- **Mint Green** (`{colors.accent}`): The brand's chromatic identity — badge fills, section accents, interactive highlights.

### Borders & Shadows
- **Warm Hairline** (`{colors.border}`): Dividers and card edges on parchment — barely visible.
- **Dark Stroke** (`{colors.border-dark}`): 1px lines confirmed on links and buttons via extraction. Used for the ghost-button outline and underline hover animations.
- **Shadow Tint** (`{colors.shadow-soft}`): The dark near-black opaque stand-in for any rare elevation effect.

## Typography

### Font Family
- **Primary**: `Lay Grotesk`, fallbacks `-apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif` — a custom grotesque extracted from the self-hosted font stack. Weight 800 for display and UI; 500 for body; 400 for reading.
- **Secondary Serif**: `Times`, fallbacks `Georgia, Cambria, Times New Roman, serif` — used as a body serif counterpoint for editorial passages. No custom weights, just the default browser Times.
- **Also self-hosted** (narrower use): `NimbusSanL` (condensed grotesque accent), `HomeVideo` (display novelty for specials or seasonal moments), `SuisseIntl` (clean Swiss grotesque, likely used for fine print and form fields).
- **OpenType**: No variable font axis found in extraction. Lay Grotesk is loaded as static otf files in four weights.

*Note: Lay Grotesk is proprietary. For external implementation, `Archivo Black` or `Bebas Neue` substitute for the heavy display level; `Inter` weight 800 substitutes for the UI level. Times has system-level availability on all platforms.*

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 60px / 800 / lh 0.95 — the stamped headline, uppercase |
| `display` | 55px / 800 / lh 0.95 / 1.65px spacing — wide-uppercase section titles |
| `heading-section` | 25px / 800 — compact uppercase sub-headings and category labels |
| `body-large` | 22px / 400 — lead paragraph copy, relaxed reading |
| `body` | 18px / 500 — standard body, compact card copy |
| `body-serif` | 20px / 400 / Times — editorial serif voice, lh 1.0 |
| `nav-link` | 14px / 800 / lh 1.60 / 0.42px — nav items, uppercase |
| `button-ui` | 14px / 800 / 0.42px — button labels, UPPERCASE |
| `caption` | 12px / 500 — fine labels, metadata |

### Principles
- **Uppercase is the register**: every display and UI element runs uppercase in Lay Grotesk. Sentence case appears only in body paragraphs.
- **Crash the display**: 0.95 line-height on 55–60px type collapses the gap between lines so multi-line headlines read as single compressed blocks.
- **Serif as contrast, not decoration**: Times appears at body scale to break the monotony of heavy grotesque — it is calming where Lay Grotesk is assertive.
- **Positive tracking at display scale**: secondary display (`{typography.display}`) runs at 1.65px spacing — the uppercase widens for breadth rather than condensing.
- **Three operative weights**: 800 for display and UI, 500 for important body, 400 for reading prose and the serif.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a strong 20px / 120px pole. The extraction surfaced 20px as the dominant value (13 occurrences) and 120px as the section-macro value (6 occurrences). Blank Street spaces its sections with strong vertical breathing while keeping component internals tight.

### Grid & Container
- Max content width: ~1440px, with 1920px as the wide-screen cap
- Hero: full-bleed photography with overlaid display type and ghost-pill CTA
- Location / city cards: grid of clean rectangular panels on the parchment canvas
- Menu: horizontal or grid layout with flat mint-panel callouts
- Footer: dark near-black surface with warm-white nav columns

### Whitespace Philosophy
- **Morning quiet**: generous 80–120px vertical section gaps let the photography breathe
- **Horizontal compression**: card grids run tight with 20px gutters — the density feels urban and considered, not sparse
- **No decorative fills**: whitespace on the parchment canvas is untouched — nothing fills the air between elements

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Default canvas — most surfaces and cards |
| Hairline (Level 1) | `1px solid {colors.border}` | Section dividers, card edges on parchment |
| Dark Outline (Level 2) | `1px solid {colors.border-dark}` | Links, ghost buttons, input borders |
| Color Block (Level 3) | Surface swap — parchment to mint, parchment to near-black | Section-level elevation via color, not shadow |
| Photo Overlay (Level 4) | `linear-gradient` over photography, from `rgba(0,0,0,0)` to `rgba(0,0,0,0.5)` | Hero and banner overlay to ensure type legibility on photography |

**Shadow Philosophy**: Blank Street has no drop shadows. The dembrandt extraction returned zero shadow declarations. Depth is communicated through typography mass (a 60px uppercase block IS the elevation on the page), color blocking (parchment to mint to near-black), and the rare photographic gradient overlay. The system is deliberately flat — it looks printed, not rendered in a 3D UI space.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All cards, panels, section frames, and layout containers |
| `xs` | 2px | Minor UI chrome — progress bars, micro-indicators |
| `pill` | 9999px | All CTAs, inputs, and badge labels |

The shape language is nearly binary. Everything interactive is a full pill; everything structural is a hard rectangle. There is no middle ground — no 8px, no 16px cards. This maximizes the contrast between buttons (fluid, friendly) and the surrounding layout (rectilinear, rigorous). For a coffee brand, it translates to: the cup (the experience) is round; the city blocks (the context) are square.

## Components

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

### Buttons
- **`button-primary`** — Near-black (`{colors.primary}`) fill, white text, pill-shaped. The heavy-stamp CTA. Hover lightens subtly.
- **`button-outline`** — White fill, near-black text, `{colors.border-dark}` outline, pill-shaped. Secondary action on light surfaces. Hover inverts to dark fill.
- **`button-ghost-inverted`** — Transparent fill, `{colors.on-dark}` border and text, pill-shaped. The confirmed hero CTA on photography — "ORDER NOW" over dark overlaid imagery. Hover fills to warm white with dark text.

### Cards
- **`card`** — White surface, no radius, `{spacing.lg}` padding. Clean rectangular panels for menu items, locations, and content blocks.
- **`card-mint`** — Mint-green surface (`{colors.surface-mint}`), no radius. Brand-accent panels for featured items or callouts.

### Inputs
- **`input`** — White fill, pill-shaped, warm hairline border. **`input-focus`** tightens to `{colors.border-dark}` — the dark stroke clarifies the active state.

### Navigation
- **`nav-bar`** — Parchment canvas, near-black links in Lay Grotesk 800 uppercase. Hairline base. On scroll, likely transitions to white or opaque parchment (dembrandt noted 0.3s `background-color` transition on nav).

### Badges / Tags
- **`badge`** — Mint fill (`{colors.accent}`), near-black label, pill-shaped. The branded-cup color applied to UI labels.

## Do's and Don'ts

### Do
- Use parchment (`{colors.background}`) as the default canvas — never cold pure white
- Set all display and UI text in Lay Grotesk weight 800, uppercase (`{typography.display-hero}`)
- Crash display type to 0.95 line-height — if the lines have air between them, pull leading down
- Keep buttons and inputs as full pills (`{rounded.pill}`) — the only round shapes in the system
- Keep all layout containers hard rectangles (`{rounded.none}`) — cards, panels, sections never round
- Use `{colors.ink}` (`#231f20`) for all dark text — the brown near-black, never pure `#000000`
- Reserve mint `{colors.accent}` for one accent moment per section — it loses impact when overused
- Use the ghost-pill button (`button-ghost-inverted`) on any photography overlay
- Reach for Times serif (`{typography.body-serif}`) to break the grotesque monotony in long editorial passages
- Pair uppercase grotesque display with positive letter-spacing (`1.65px`) at the secondary display level

### Don't
- Don't add border-radius to cards or layout panels — the system is binary: pill or flat
- Don't lower the font weight below 500 in Lay Grotesk for any UI text — lightness is not on-brand
- Don't use display type in sentence case — uppercase is the visual register for Lay Grotesk
- Don't put mint green as text on white — the mint is a surface color, not an ink color
- Don't add drop shadows — the system is deliberately flat and printed-feeling
- Don't fill the hero button with mint — `{colors.primary}` near-black is the primary CTA fill
- Don't use Lay Grotesk below 12px for any readable text — the heavy weight needs room
- Don't introduce a fourth typeface — grotesque display, grotesque body, and Times serif is the full palette
- Don't set display type below 0.95 line-height — collapsing further than `0.95` breaks legibility on multi-line headlines
- Don't use a warm-white `{colors.background}` for dark sections — switch to `{colors.surface-dark}` for full inversion

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <768px | Single column; display type scales to ~36–44px; nav collapses to hamburger; full-bleed photography stacks |
| Tablet | 768–1023px | Two-column grids; display 44–55px; photo-and-copy pairs emerge |
| Desktop | 1024–1439px | Full multi-column layout; display at 55–60px; footer columns expand |
| Large Desktop | 1440–1919px | Wide container; generous section padding; maximum type scale |
| XL | ≥1920px | Capped layout at ~1440px max content width; outer canvas shows more parchment |

### Touch Targets
- Pill buttons run approximately 36–40px tall with `8px 24px` padding — comfortable thumb targets
- Nav links carry generous vertical padding at 14px; uppercase weight aids legibility at small sizes
- The transparent ghost button in the hero always has a visible 1px white border for clear tap affordance on photography

### Collapsing Strategy
- **Navigation**: full horizontal bar → hamburger toggle on mobile; uppercase Lay Grotesk links become a stacked full-screen menu
- **Display type**: 60px → ~44px → ~36px while holding `0.95` line-height and uppercase register
- **Grid**: location and product grids reduce from three or four columns to a single column
- **Section spacing**: 120px macro spacing compresses to ~48px on mobile; 20px card gutters hold

### Image Behavior
- Hero photography is full-bleed at all breakpoints; the gradient overlay (`rgba(0,0,0,0)` to `rgba(0,0,0,0.5)`) keeps type legible across all viewport widths
- Product and location imagery fills card frames without padding — hard edges to the container

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Parchment (`{colors.background}`)
- Text: Near-Black (`{colors.ink}`)
- Brand accent: Mint Green (`{colors.accent}`)
- Primary CTA: Near-Black (`{colors.primary}`) fill + white text
- Secondary text: Muted Gray (`{colors.ink-secondary}`)
- Border: Warm Hairline (`{colors.border}`)
- Dark section: Near-Black Surface (`{colors.surface-dark}`) + warm-white text (`{colors.on-dark}`)
- Inverted CTA: Ghost pill — transparent fill + 1px `{colors.on-dark}` border

### Example Component Prompts

- "Create a hero section on parchment (`{colors.background}`) with a 60px Lay Grotesk weight 800 uppercase headline in near-black (`{colors.ink}`), line-height 0.95 so multi-line stacks compress into a block. Below: a pill CTA button — near-black fill (`{colors.primary}`), white label (`{colors.on-primary}`), 14px Lay Grotesk weight 800 uppercase, `{rounded.pill}` radius, `8px 24px` padding."
- "Build a location card: white surface (`{colors.surface}`), no border-radius (hard rectangle), near-black title in Lay Grotesk 800 uppercase, body copy in Lay Grotesk 500 at 18px, `{spacing.lg}` padding. No shadow."
- "Render a hero over full-bleed photography: apply a `linear-gradient(rgba(0,0,0,0) 25%, rgba(0,0,0,0.5) 100%)` overlay. Over it: ghost pill button — transparent background, `1px solid {colors.on-dark}`, white text at `{typography.button-ui}`, `{rounded.pill}` radius, `8px 24px` padding."
- "Create a mint-panel callout: `{colors.surface-mint}` background fill, no border-radius, `{spacing.lg}` padding. Heading in 25px Lay Grotesk weight 800 uppercase (`{colors.on-mint}`). Body in 18px Lay Grotesk weight 500."
- "Design a nav bar: parchment background (`{colors.background}`), near-black wordmark left. Nav links in 14px Lay Grotesk weight 800 uppercase, 0.42px spacing (`{typography.nav-link}`), near-black (`{colors.ink}`). Pill CTA button anchored right. Hairline base border (`{colors.border}`). On scroll: transition `background-color` over 0.3s `ease`."
- "Render a badge: mint fill (`{colors.accent}`), near-black label (`{colors.on-accent}`), 12px Lay Grotesk weight 500 (`{typography.caption}`), `{rounded.pill}`, `4px 12px` padding."

### Iteration Guide

1. Start on parchment (`{colors.background}`). If the canvas reads cold or pure white, warm it — the parchment is the brand temperature.
2. Set display text in Lay Grotesk weight 800, uppercase, 0.95 line-height. If lines have breathing room, collapse them.
3. Near-black (`{colors.ink}`) replaces `#000000` everywhere — if you see pure black text, replace it with `#231f20`.
4. Buttons and inputs are full pills (`{rounded.pill}`). Everything else (cards, panels, sections) is a hard rectangle (`{rounded.none}`).
5. Mint green (`{colors.accent}`) is the one chromatic moment per composition — one badge, one accent panel, one hover highlight.
6. On photography: ghost pill with 1px white border, not a filled CTA — the fill belongs to flat surfaces.
7. For editorial passages, drop to Times serif (`{typography.body-serif}`) — the contrast against the grotesque creates rhythm.

---

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