Letterpress Bluebird

About 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.

Color

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.

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.

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.

Elevation

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.

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.

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.
• 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.
• 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.
• 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.
• 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.
• 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.
• Keep buttons and inputs at 44px height, card padding at space.6 (24px) and product-grid gaps at space.6.
• 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 use radii above radius.xl (12px) on cards, dialogs or controls; reserve radius.full for badges and tag chips.
• Don't introduce pure grey or pure black; use the warm neutral ramp (neutral.950 for text, neutral.200 for light borders).
• Don't use destructive (red-orange) for promotions or sale tags; use accent or warning badges instead.
• Don't set body paragraphs or headings in Space Mono; it is only for data, prices and small labels.
• Don't use weight 800 below 28px; from heading-md (20px) down, use weight 600.
• Don't stack more than one hard shadow on a surface or nest shadowed cards inside shadowed cards.
• Don't use muted-foreground (neutral.700 / neutral.300) for prices or primary product names; use foreground.