---
version: alpha
name: Letterpress Bluebird
description: "Retro-modern UI for a handmade-goods marketplace: cerulean ink on cream paper, hard offset shadows and Archivo type with generous modern spacing."
colors:
  background: "#faf5ea"
  foreground: "#1b1712"
  card: "#fffdf8"
  card-foreground: "#1b1712"
  popover: "#fffdf8"
  popover-foreground: "#1b1712"
  primary: "#136a98"
  primary-foreground: "#ffffff"
  secondary: "#f2eadb"
  secondary-foreground: "#2c261f"
  muted: "#f2eadb"
  muted-foreground: "#574e40"
  accent: "#d2ecf9"
  accent-foreground: "#0a2d41"
  destructive: "#c23221"
  destructive-foreground: "#ffffff"
  success: "#255a26"
  success-foreground: "#ffffff"
  warning: "#fbd777"
  warning-foreground: "#3a2802"
  border: "#e2d8c5"
  input: "#ac9f88"
  ring: "#1f82b5"
  dark-background: "#1b1712"
  dark-foreground: "#faf5ea"
  dark-card: "#2c261f"
  dark-card-foreground: "#faf5ea"
  dark-popover: "#2c261f"
  dark-popover-foreground: "#faf5ea"
  dark-primary: "#3f9fd0"
  dark-primary-foreground: "#061b29"
  dark-secondary: "#413a2f"
  dark-secondary-foreground: "#f2eadb"
  dark-muted: "#413a2f"
  dark-muted-foreground: "#cbbfaa"
  dark-accent: "#0a2d41"
  dark-accent-foreground: "#d2ecf9"
  dark-destructive: "#f56f5a"
  dark-destructive-foreground: "#3a0603"
  dark-success: "#5ea854"
  dark-success-foreground: "#0a1c0b"
  dark-warning: "#d49b14"
  dark-warning-foreground: "#231800"
  dark-border: "#413a2f"
  dark-input: "#6f6452"
  dark-ring: "#3f9fd0"
typography:
  display-lg:
    fontFamily: Archivo
    fontSize: 56px
    fontWeight: 800
    lineHeight: 1.04
    letterSpacing: -0.03em
  display-md:
    fontFamily: Archivo
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -0.025em
  heading-lg:
    fontFamily: Archivo
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.015em
  heading-md:
    fontFamily: Archivo
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.005em
  heading-sm:
    fontFamily: Archivo
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
  body-lg:
    fontFamily: Archivo
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Archivo
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Archivo
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Archivo
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0.01em
  caption:
    fontFamily: Archivo
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  code:
    fontFamily: Space Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 44px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 44px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
---

# Letterpress Bluebird

## Overview

Letterpress Bluebird serves a marketplace where independent makers sell ceramics, textiles, prints and other handmade goods. It borrows from 70s/80s offset printing and early desktop software: cream stock (neutral.50), one blue ink (brand), hard 0-blur offset shadows and heavy Archivo headlines. Spacing (4px grid), contrast (text pairs at 5:1 or higher) and control sizing (44px) follow current practice, so the retro cues work as character and the interface stays modern.

Moods: retro, playful, warm, confident. Built for: crafts-marketplace, e-commerce, handmade-goods. Density: comfortable.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

Brand is a cerulean scale used as the single ink for primary actions (brand.600 in light, brand.400 in dark), links and focus rings (brand.500 / brand.400). Neutrals are cream-to-ink browns. Every step leans warm, toward orange, never olive. This warm/cool pairing makes the blue the only cool hue on screen. Destructive is a red-orange (danger.600 light, danger.400 dark), far from cerulean in hue. Success is a yellow-leaning print green and warning a mustard, so both sit on the warm side next to the cream paper. Every status scale follows the same lightness curve as brand: pale 50–200 for fills, 500–700 for solid fills and text, 900–950 for foregrounds on light fills. Measured pairs: primary-foreground on primary 5.9:1 (light) and 5.9:1 (dark); muted-foreground on muted 6.7:1 (light) and 6.1:1 (dark); destructive-foreground on destructive 5.6:1 (light) and 6.0:1 (dark). In dark mode, background is a deep ink-brown (neutral.950). Cards and popovers lift one step to neutral.900. Primary uses brand.400 with brand.950 text: bright enough to read as ink, without neon glow.

- **Primary** `#136a98` / dark `#3f9fd0`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#faf5ea` / dark `#1b1712` on `#1b1712` / dark `#faf5ea`: page surface and body text.
- **Card** `#fffdf8` / dark `#2c261f`: raised surfaces.
- **Secondary** `#f2eadb` / dark `#413a2f`: secondary buttons and quiet controls.
- **Muted** `#f2eadb` / dark `#413a2f` with **muted-foreground** `#574e40` / dark `#cbbfaa`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#d2ecf9` / dark `#0a2d41`: highlights, selected rows, badges.
- **Destructive** `#c23221` / dark `#f56f5a`, **Success** `#255a26` / dark `#5ea854`, **Warning** `#fbd777` / dark `#d49b14`: status only, always paired with an icon or label.
- **Border** `#e2d8c5` / dark `#413a2f`, **Input** `#ac9f88` / dark `#6f6452`, **Ring** `#1f82b5` / dark `#3f9fd0`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## Typography

Archivo covers display and interface text. Display and headings follow a ~1.41 ratio (28 → 40 → 56px). These sizes use weight 800 (display) or 700 (heading-lg), with tracking that tightens as size grows: -0.015em at 28px, -0.025em at 40px, -0.03em at 56px. Interface text runs 12–20px in weights 400–600. Body lines are 1.5–1.6 for comfortable reading of product descriptions. Space Mono (400/700) is reserved for prices, SKUs, order numbers and tag-like labels via the code style, which gives a receipt feel.

- Display: **Archivo** (fallback Helvetica Neue, Arial, sans-serif)
- Interface: **Archivo** (fallback system-ui, sans-serif)
- Mono: **Space Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Archivo | 56px | 1.04 | 800 |
| display-md | Archivo | 40px | 1.1 | 800 |
| heading-lg | Archivo | 28px | 1.2 | 700 |
| heading-md | Archivo | 20px | 1.3 | 600 |
| heading-sm | Archivo | 16px | 1.4 | 600 |
| body-lg | Archivo | 18px | 1.6 | 400 |
| body-md | Archivo | 16px | 1.55 | 400 |
| body-sm | Archivo | 14px | 1.5 | 400 |
| label | Archivo | 14px | 1.25 | 600 |
| caption | Archivo | 12px | 1.4 | 500 |
| code | Space Mono | 14px | 1.5 | 400 |

## Layout

Comfortable density on a 4px base grid (space.1 = 4px). Content max-width is 1280px. Product grids use space.6 (24px) gutters and cards use space.6 padding. Buttons and inputs are 44px tall with space.5 / space.3 horizontal padding, so every control meets touch-target size.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

Elevation is a hard offset shadow with 0 blur in ink color (neutral.950), like a misregistered print. shadow.sm (2px) goes on resting cards and buttons, shadow.md (4px) on hover and menus, and shadow.lg (8px) only on dialogs. Shadowed surfaces always carry a 2px border. In dark mode the ink shadow nearly matches the background, so depth comes from the neutral.900 card surface plus the 2px border token instead.

- sm: `2px 2px 0 0 rgba(27, 23, 18, 1)`
- md: `4px 4px 0 0 rgba(27, 23, 18, 1)`
- lg: `8px 8px 0 0 rgba(27, 23, 18, 1)`

## Shapes

Corners stay tight: radius.md (4px) on buttons and inputs, radius.lg (8px) on cards, radius.xl (12px) as the ceiling for dialogs. These give a printed-label edge without looking sharp or corporate. radius.full is only for badges and tag chips.

Radius scale: sm 2px, md 4px, lg 8px, xl 12px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 44px tall, 20px horizontal padding, label type. Input: 44px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use one primary button per view for the main action, such as Add to cart or Publish listing; render the rest as secondary (neutral.100 fill) or ghost.
- **Do:** Set display-lg (56px) and display-md (40px) in Archivo 800 with their token letterSpacing (-0.03em / -0.025em); keep them to one line or two short lines.
- **Do:** Render prices, SKUs and order numbers in the code style (Space Mono 14px) so digits align in listings, carts and receipts; use weight 700 for the final total.
- **Do:** Apply shadow.sm to resting cards and buttons, move to shadow.md on hover and for menus, and reserve shadow.lg for dialogs; always pair with a 2px border in the foreground ink tone.
- **Do:** In dark mode, show depth with the neutral.900 card surface and the 2px border instead of the ink shadow, which disappears on neutral.950.
- **Do:** Show keyboard focus as a 2px ring in the ring token (brand.500 light, brand.400 dark) with a 2px offset on buttons, inputs and product cards.
- **Do:** Keep buttons and inputs at 44px height, card padding at space.6 (24px) and product-grid gaps at space.6.
- **Do:** Pair every success, warning and destructive color with an icon or text label so meaning never depends on color alone.
- **Don't:** Don't add blur to shadows; elevation is always a hard offset with 0 blur radius.
- **Don't:** Don't use radii above radius.xl (12px) on cards, dialogs or controls; reserve radius.full for badges and tag chips.
- **Don't:** Don't introduce pure grey or pure black; use the warm neutral ramp (neutral.950 for text, neutral.200 for light borders).
- **Don't:** Don't use destructive (red-orange) for promotions or sale tags; use accent or warning badges instead.
- **Don't:** Don't set body paragraphs or headings in Space Mono; it is only for data, prices and small labels.
- **Don't:** Don't use weight 800 below 28px; from heading-md (20px) down, use weight 600.
- **Don't:** Don't stack more than one hard shadow on a surface or nest shadowed cards inside shadowed cards.
- **Don't:** Don't use muted-foreground (neutral.700 / neutral.300) for prices or primary product names; use foreground.