---
version: alpha
name: "Sight Unseen"
description: "Warm off-white canvas, custom Fugue grotesk, and terracotta punctuation — contemporary design journalism at the intersection of gallery and magazine"

colors:
  background: "#f1f1ed"
  surface: "#ffffff"
  surface-muted: "#f5f5f5"
  ink: "#000000"
  ink-muted: "#4a4a4a"
  primary: "#fa826d"
  on-primary: "#000000"
  primary-light: "#faad96"
  on-primary-light: "#000000"
  primary-hover: "#d56f5d"
  border: "#000000"
  border-subtle: "#e0e0dc"
  focus-ring: "#000000"
  shadow-soft: "#000000"  # was rgba(0,0,0,0.12) — flattened to nearest opaque for Google format

typography:
  display-hero:
    fontFamily: "Fugue Regular, Helvetica Neue, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.08px
  display:
    fontFamily: "Fugue Regular, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.07px
  heading-section:
    fontFamily: "Fugue Regular, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.05px
  heading-sub:
    fontFamily: "Fugue Regular, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.16px
  label-caps:
    fontFamily: "Fugue Regular, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.15px
  body-large:
    fontFamily: "apercu-regular, Calibri, Gill Sans, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0.16px
  body:
    fontFamily: "apercu-regular, Calibri, Gill Sans, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.15px
  nav-link:
    fontFamily: "Fugue Regular, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.15px
  button-ui:
    fontFamily: "Fugue Regular, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.15px
  caption:
    fontFamily: "Fugue Regular, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.13px

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

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-accent:
    backgroundColor: "{colors.primary-light}"
    textColor: "{colors.on-primary-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
    borderColor: "{colors.primary-light}"
    borderWidth: 1px
  button-accent-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderBottomColor: "{colors.border}"
    borderBottomWidth: 8px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-large}"
    rounded: "{rounded.none}"
    padding: 8px 12px
    borderColor: "{colors.border}"
    borderWidth: 1px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-large}"
    rounded: "{rounded.none}"
    padding: 8px 12px
    borderColor: "{colors.focus-ring}"
    borderWidth: 2px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 3px 8px
    borderColor: "{colors.border-subtle}"
    borderWidth: 1px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderBottomColor: "{colors.border-subtle}"
    borderBottomWidth: 1px
---

# Sight Unseen Design System

## Overview

Sight Unseen is an independent New York-based publication devoted to emerging and mid-career designers, makers, and artists working at the edges of the discipline. Its design system expresses a paradox that the brand has maintained since 2009: serious editorial intent delivered through a visually warm, approachable surface. The canvas is a distinctive parchment off-white (`{colors.background}`) — not the gallery-white that dominates design publishing, but a slightly warmed, linen-like tone that makes photography look printed rather than displayed. This thermal quality runs through every surface choice and gives the brand a sensibility closer to a printed catalog than a digital magazine.

The typographic architecture is built on two custom commercial faces. **Fugue Regular** (a geometric grotesk with subtle humanist correction) carries the entirety of the display hierarchy, all navigation, labels, and UI chrome — it appears almost exclusively at weight 400, which is the brand's most legible design decision: a single weight covering everything from 32px headlines down to 13px captions without introducing visual noise. **Apercu Regular** (a humanist grotesk) takes over for article body and prose-heavy contexts where its friendlier stroke contrast improves reading comfort at small sizes. Together they form a dual-grotesk system — no serifs — that reads as considered rather than classical.

The brand accent is a terracotta-salmon spectrum, split between a saturated `{colors.primary}` and a lighter, more buttery `{colors.primary-light}`. This coral-orange palette is the site's warmth signal: it surfaces only in buttons, filter chips, and select interactive states, giving it the stamped-in-wax quality of an editorial mark rather than a product brand color. Against the off-white canvas and pure-black typography, the terracotta punctuation feels handmade. Depth and structure come entirely from a thick bottom-only black border rule (`8px solid {colors.border}`) that anchors cards below their content — an unusual structural choice that reads like the binder clips and rule lines of a physical layout table.

**Key Characteristics:**
- Parchment off-white (`{colors.background}`) canvas — thermal warmth, not gallery neutrality
- Fugue Regular at weight 400 throughout all display and UI contexts — restraint over weight variety
- Apercu Regular for body and long-form prose — humanist grotesk for reading comfort
- Terracotta primary (`{colors.primary}`) and peach-light variant (`{colors.primary-light}`) as the only brand color
- 8px bottom-only black border rule as the signature card structural device
- Hard-edge `{rounded.none}` throughout — no rounding at any UI layer
- Uppercase Fugue labels at 15px with 0.15px tracking for section eyebrows and navigation
- Motion is slow and deliberate — link color transitions at 0.8s ease, not the typical 0.2–0.3s product speed
- Sparse shadow usage — one soft rgba shadow on overlays only, flattened to `{colors.shadow-soft}`
- PrimeReact component library under the hood for complex interactive elements

## Colors

### Primary Canvas
- **Parchment** (`{colors.background}`): The site's defining surface — warm off-white with a barely perceptible yellow cast, pulled from the logo background zone. All pages and sections open on this canvas.
- **White** (`{colors.surface}`): Pure white used only for elevated surfaces — modals, input fields, subscribe overlays — where a visual lift off the parchment canvas is needed.
- **Smoke** (`{colors.surface-muted}`): Tertiary surface for subtle recessed states, hover backgrounds on certain filter chips.

### Text / Ink
- **Black** (`{colors.ink}`): The sole text color — pure black on parchment, high contrast, no softening. This is the brand's confidence: where others use near-black for warmth, Sight Unseen lets the canvas do that work and keeps the ink sharp.
- **Charcoal** (`{colors.ink-muted}`): Secondary text — metadata, timestamps, supplementary captions. Used sparingly to pull items visually behind the primary editorial voice.

### Brand Accent
- **Terracotta** (`{colors.primary}`): The active-state filter chip color — more saturated, closer to a warm red-orange. Appears on selected/hover filter buttons to signal interactivity without decorating the page.
- **Peach** (`{colors.primary-light}`): The primary CTA button color — lighter and more buttery than the terracotta, used for the main "Subscribe" and filter-confirm buttons. Border matches background (`1px solid {colors.primary-light}`) for a flush, label-like quality.
- **Terracotta Hover** (`{colors.primary-hover}`): Deepened version of the terracotta for hover/active states on accent buttons.

### Structure & Borders
- **Black Rule** (`{colors.border}`): The structural workhorse — `8px solid` bottom border on editorial cards, `1px solid` on inputs and input containers. Hard and architectural.
- **Warm Divider** (`{colors.border-subtle}`): A barely-warm light gray for section dividers and nav bottom borders where hard black would be too aggressive. The temperature difference from `{colors.background}` is small but intentional.
- **Shadow Soft** (`{colors.shadow-soft}`): Used only in the one identified drop shadow (modal overlays) — `rgba(0,0,0,0.12) 0px 10px 30px 0px` flattened to black with low confidence.

## Typography

### Font Family
- **Display / UI / Navigation**: `Fugue Regular`, self-hosted woff2, with fallbacks `Helvetica Neue, Arial, sans-serif`. A geometric grotesk with noticeably humanist warmth in certain letterforms (the `a`, `g`, and curved strokes). Used for everything from 32px headlines to 13px captions — the weight 400 uniformity is core to the brand's editorial restraint.
- **Body / Prose**: `apercu-regular`, self-hosted woff, with fallbacks `Calibri, Gill Sans, sans-serif`. A humanist grotesk that reads more openly at small sizes than Fugue. Used at 16px with 1.63 line-height for article lead text and body paragraphs.
- **No serifs present** — Sight Unseen runs a dual-grotesk system, which is unusual in design publishing. The warmth comes from the canvas and type color, not typeface class.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Feature article headlines at 32px, homepage hero cards |
| `display` | Article grid card titles, section primary headings at 28px |
| `heading-section` | Sub-section heads, sidebar groupings at 22px |
| `heading-sub` | Compact headings, related article titles at 16px |
| `label-caps` | Uppercase section labels, navigation eyebrows at 15px uppercase |
| `body-large` | Article lead paragraphs, newsletter intro, main prose at 16px Apercu |
| `body` | Standard body text at 15px Apercu |
| `nav-link` | Top navigation and footer links at 15px Fugue |
| `button-ui` | Button labels, filter chips, CTA text at 15px Fugue |
| `caption` | Image captions, bylines, timestamps at 13px Fugue |

### Principles
- Weight 400 across every Fugue context — hierarchy is built entirely through size and letter-spacing, never weight. This is a distinctive editorial commitment.
- Apercu and Fugue are both grotesks but serve distinct roles: Apercu for reading, Fugue for scanning. The system never reverses these.
- Uppercase transforms applied to label-caps and certain navigation eyebrows at 15px — the caps do meaningful semantic work (section label vs. article title) without introducing a different weight.
- Slow transition speed (0.8s ease on link color) gives hover and focus states an unhurried quality that aligns with the brand's deliberate editorial pace.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The site runs a compact but breathing scale. The 7px and 8px values are the workhorse gutters, with 15–18px for card padding and 44–50px for section breathing room. The spacing personality is measured — not the generous negative-space approach of luxury editorial brands, but editorial density that never feels crowded.

### Grid & Container
- Max content width: approximately 1600px before side margins balance out
- Homepage: multi-column image-and-text grid, responsive from 4-column desktop to single-column mobile
- Article pages: narrow reading column (~680–760px) with generous side padding
- Featured sections break container for full-bleed treatment at select moments
- Navigation: a centered wordmark with utility links left and right — a centered editorial masthead convention

### Whitespace Philosophy
- Spacing is editorial: content packs generously but is separated by structural rules rather than open air
- The 8px base unit keeps things tighter than luxury brands, appropriate for a high-frequency publication
- Parchment canvas provides a warmth buffer — the perceived airiness comes from the color temperature, not the amounts of space

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, body text, image containers |
| Rule (Level 1) | `8px solid {colors.border}` bottom only | Editorial card bottoms — the system's primary structural signature |
| Hairline (Level 2) | `1px solid {colors.border}` | Input borders, form containers, nav bottom rule |
| Subtle (Level 3) | `1px solid {colors.border-subtle}` | Section dividers, secondary separators |
| Overlay (Level 4) | `rgba(0,0,0,0.12) 0px 10px 30px 0px` | Modal surfaces and subscribe pop-ups lifted above the parchment canvas |
| Focus Ring | `2px solid {colors.focus-ring}` | Keyboard-navigable interactive elements |

**Shadow Philosophy**: Sight Unseen treats depth through weight rather than diffuse shadow. The 8px bottom rule on cards is purely structural — a thick ink rule that anchors content to a baseline the way old-school layout tables used physical rules. Soft drop shadows appear only on modal overlays where genuine elevation must lift off the canvas. The rest of the system is entirely flat, relying on the visual density of black borders and the tonal break between `{colors.background}` and `{colors.surface}` for any layering effect.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every interactive and structural element — cards, buttons, inputs, filters, navigation |
| `pill` | 9999px | Unused in current production — not part of the active visual language |

Sight Unseen is categorically sharp-cornered. The `0px` radius is not a design decision documented anywhere — it is simply the only choice made. No input, button, card, or container curves. This aligns with the editorial print sensibility: type and images on a page don't have rounded corners; neither does the digital version.

## Components

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

### Button variants

- **`button-primary`** — Black background (`{colors.ink}`), white text, `{rounded.none}`, 10px 20px padding. The site's strongest CTA: the Subscribe button in the modal overlay runs in this style. Hover state transitions to terracotta (`{colors.primary}`) background.
- **`button-accent`** — Peach-light background (`{colors.primary-light}`), black text, matching border, `{rounded.none}`. Used for filter confirmation and section-level CTAs. Lower visual weight than the black primary, reads as a default action rather than a commitment.
- **`button-accent-hover`** — Deepens to terracotta (`{colors.primary-hover}`) on hover, black text (`{colors.on-primary}`). The transition (0.4–0.8s ease) is noticeably slow compared to product defaults.

### Cards

Cards in Sight Unseen are structural frames, not styled containers. The visual identity of a card is carried by its bottom `8px solid {colors.border}` rule — a thick ink underline that sits beneath the image and caption block. No background tinting, no radius, no shadow. The rule is the card.

### Inputs

The email input in the subscribe overlay: white surface (`{colors.surface}`), black 1px border, sharp corners, Apercu body-large type. Focus state increases border to 2px. No placeholder styling beyond default; the input label floats above. The `1px 1px 1px 0px` border variant (left side missing) appears on the search input in the nav — a deliberate one-sided border that reads as an open form field attached to the nav frame.

### Badges / Tags

Section labels and category eyebrows use uppercase Fugue at 13–15px with positive letter-spacing. They carry no background or border — they are purely typographic landmarks. Filter chips are similarly borderless by default, but swap to the `{colors.primary}` terracotta fill when active.

### Navigation

The masthead centers the wordmark (`Sight Unseen` in Fugue Regular) with abbreviated utility navigation (`Explore the Archive`, `Job Board`, `Our Services`) set in 15px Fugue to the left and right. The logo is an SVG wordmark on a `{colors.background}` safe zone — no lockup with an icon. A bottom `1px solid {colors.border-subtle}` separates the nav from content. The nav does not appear to be sticky by default; on scroll the masthead exits and a compact version appears.

## Do's and Don'ts

### Do
- Use `{colors.background}` (parchment) as the universal canvas — never swap to pure white except for elevated overlay surfaces
- Set all display and UI type in Fugue Regular weight 400 — single weight, size carries hierarchy
- Use Apercu for body text and prose reading contexts — don't let Fugue handle long-form
- Apply the `8px solid {colors.border}` bottom rule to editorial cards — this is the brand's structural signature
- Use `{colors.primary-light}` (peach) for primary CTAs and `{colors.primary}` (terracotta) for active filter states only
- Keep all border-radius at `{rounded.none}` — no rounding at any scale
- Set section eyebrow labels in uppercase Fugue at 15px with positive letter-spacing
- Honor the slow 0.8s transition speed on hover states — it is intentional editorial pace, not an oversight
- Use `{colors.ink}` (black) for all primary text — let the warm canvas provide the reading warmth
- Apply positive letter-spacing (0.07–0.16px) consistently across all Fugue contexts

### Don't
- Don't replace `{colors.background}` with `#ffffff` on any non-elevated surface — the warmth would collapse
- Don't introduce border-radius at any scale — not 2px, not 4px, not anything
- Don't use Fugue for long-form article body — it lacks Apercu's reading-optimized spacing
- Don't use the terracotta `{colors.primary}` as a decorative fill — it belongs only to active interactive states
- Don't shorten hover transition durations to the product-standard 0.2s — the slow ease is brand-critical
- Don't add box shadows to editorial cards or image tiles — the bottom rule IS the card affordance
- Don't introduce any additional typeface — the dual-grotesk system is intentionally closed
- Don't use the peach `{colors.primary-light}` for semantic or alert states — it is a CTA color, not a semantic signal
- Don't center the wordmark and then left-align body content — the centered masthead convention requires centered nav logic throughout
- Don't tighten letter-spacing to zero on Fugue display text — the positive tracking is load-bearing for the editorial character

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single-column grid, stacked nav, headline drops to ~22px |
| Mobile | 480–767px | Single-column with select 2-col article grids |
| Tablet | 768–1000px | 2–3 column image grids, nav begins to linearize |
| Desktop | 1000–1300px | 3–4 column grids, full masthead, 28–32px headlines |
| Large Desktop | >1300px | Maximum grid, 4+ columns, generous side margins |

### Touch Targets
- Nav links: 15px Fugue with 10–15px vertical padding — adequate but not generous; the publication assumes desktop primary usage
- Filter chips and buttons: 36–44px effective tap height with padding, meeting minimum accessibility threshold
- Article image tiles: full-tile tappable area with no internal click target subdivision

### Collapsing Strategy
- **Image grid**: steps from 4 columns → 2 → 1 as viewport narrows; hairline structural rules maintained throughout
- **Masthead**: centered wordmark stacks to a narrower form; utility links may collapse to icon-only at small sizes
- **Article column**: reading width of 680–760px on desktop scales to full-width on mobile with horizontal padding maintained at ~16px
- **Headlines**: display-hero (32px) drops to heading-section (~22px) on mobile — proportional, weight 400 throughout

### Image Behavior
- Images are the primary editorial content; they scale proportionally within their grid cells without art direction changes
- Full-bleed hero images maintain aspect ratio and compress vertically at mobile
- The 8px card bottom rule scales down to 4–6px at narrow viewports where necessary

---

## Agent Prompt Guide

### Quick Color Reference
- Background (canvas): `{colors.background}` — warm parchment off-white
- Primary text: `{colors.ink}` — pure black
- Secondary text: `{colors.ink-muted}` — charcoal
- CTA button: `{colors.primary-light}` — peach accent
- Active/filter accent: `{colors.primary}` — terracotta
- Border rule: `{colors.border}` — pure black
- Subtle divider: `{colors.border-subtle}` — warm light gray
- Surface (elevated): `{colors.surface}` — pure white

### Example Component Prompts

- "Build an editorial article card on `{colors.background}` parchment. Full-bleed image above. Below: category label in uppercase 13px `{typography.caption}` Fugue, black. Article headline in 28px `{typography.display}` Fugue weight 400. Byline in 13px `{typography.caption}` Fugue, `{colors.ink-muted}`. No card background, no radius, no shadow. Bottom: `8px solid {colors.border}` rule anchoring the card to its baseline."
- "Create the site masthead. Background `{colors.background}`. Left side: utility nav links in 15px Fugue weight 400 `{typography.nav-link}`, black. Center: wordmark 'Sight Unseen' in Fugue Regular ~28px. Right side: secondary utility links + search icon, same typography. Bottom: `1px solid {colors.border-subtle}`. All sharp corners, no shadow."
- "Design a subscribe call-to-action button. Background `{colors.primary-light}` peach. Text `{colors.on-primary-light}` black. Typography `{typography.button-ui}` 15px Fugue. Padding `10px 20px`. No border-radius. Border: `1px solid {colors.primary-light}`. Hover: transition 0.8s ease to `{colors.primary-hover}` background, black text."
- "Create a section eyebrow label. Text in uppercase `{typography.label-caps}` Fugue 15px, letter-spacing 0.15px, black. No background, no border. Sit above the section headline which is in 28px `{typography.display}` Fugue weight 400."
- "Build an email subscribe input. Container background `{colors.surface}` white. Input: 16px Apercu `{typography.body-large}`, padding `8px 12px`, border `1px solid {colors.border}`, no border-radius. Submit button beside it: black background `{colors.ink}`, white text, 15px Fugue `{typography.button-ui}`, no radius. Focus state: border increases to `2px solid {colors.focus-ring}`."
- "Create a filter chip bar. Each chip: background transparent or `{colors.surface}`, black text 15px Fugue `{typography.button-ui}`, border `1px solid {colors.border-subtle}`, no radius, padding `6px 12px`. Active state: background `{colors.primary}` terracotta, text `{colors.on-primary}` black, transition 0.4s ease."

### Iteration Guide

1. Start with `{colors.background}` — the parchment canvas is the brand's most distinctive choice and must be present before any other decisions
2. Set all display and navigation text in Fugue Regular weight 400; set all body/prose in Apercu Regular weight 400
3. Anchor editorial cards with `8px solid {colors.border}` bottom rule — no other card treatment exists in this system
4. Use `{colors.primary-light}` only for primary CTAs and `{colors.primary}` only for active filter states; never decorate with either color
5. All corners are `0px` — remove any border-radius from every element before proceeding
6. Uppercase + positive letter-spacing for section labels; normal case + small positive tracking for headings
7. Slow hover transitions (0.4–0.8s ease) on all interactive color changes — this is signal, not tech debt

---

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