---
version: alpha
name: Buffet
description: Editorial monochrome for a creative content studio — near-black canvas with off-white ink, oversized tight-tracked display sans, full-bleed imagery, and a single restrained CTA. Brand worlds built from contrast, not color.
colors:
  # Canvas + ink (dark editorial)
  background: "#0a0a0a"
  surface: "#141414"
  surface-soft: "#1c1c1c"
  ink: "#f5f3ee"
  ink-secondary: "#a8a6a0"
  ink-muted: "#6b6964"

  # Light inverse contexts
  paper: "#f5f3ee"
  paper-ink: "#0a0a0a"

  # Accent — minimal, warm off-white highlight
  primary: "#f5f3ee"
  on-primary: "#0a0a0a"

  # Hairlines + chrome
  border: "#2a2a2a"
  border-strong: "#3d3d3d"

  # Interactive
  hover-surface: "#1f1f1f"
  focus-ring: "#f5f3ee"

  # On-color
  on-ink: "#0a0a0a"
  on-surface: "#f5f3ee"

typography:
  display-hero:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -2px
  display:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1.5px
  heading:
    fontFamily: "Archivo, Helvetica Neue, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -1px
  sub-heading:
    fontFamily: "Archivo, Helvetica Neue, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Archivo, Helvetica Neue, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Archivo, Helvetica Neue, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Archivo, Helvetica Neue, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Archivo, Helvetica Neue, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Archivo, Helvetica Neue, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 1.5px
  caption:
    fontFamily: "Archivo, Helvetica Neue, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.5px

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

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  pill: 9999px

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

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.hover-surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.border}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  card-content:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 32px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 20px 32px
    borderColor: "{colors.border}"
---

# Buffet Design System

## Overview

Buffet is a creative content studio that "builds worlds around brands," and its own site is the proof of concept — a near-black editorial canvas where full-bleed imagery does the talking and typography arrives in oversized, tightly-tracked condensed display. The design system is unapologetically monochrome: a deep `{colors.background}` near-black paired with a warm off-white `{colors.ink}` that reads like printed paper rather than clinical white-on-black. Color is withheld on purpose so the project imagery — the actual brand worlds — carries all the chroma.

The typographic identity is the loudest gesture. Headlines use a heavy condensed display face (Anton as the closest Google match) set enormous, with negative tracking and sub-1.0 line-height so words stack into dense editorial blocks. Body and UI text drop to Archivo, a grotesque-adjacent sans that holds structure at small sizes while staying in the same modernist family. The contrast between the giant condensed display and the quiet functional sans is the whole rhythm of the page.

Chrome is reduced to almost nothing. There are no decorative borders, no shadows, no rounded cards — imagery sits edge-to-edge in a portfolio grid, and the few interactive surfaces (a single pill CTA, hairline-bordered badges) exist only where a click is required. Hairlines in `{colors.border}` separate sections when separation is truly needed; otherwise spacing alone does the work, with generous `{spacing.3xl}`–`{spacing.4xl}` vertical air between movements.

**Key Characteristics:**
- Warm dark editorial canvas — near-black `{colors.background}` with paper-warm off-white `{colors.ink}`
- Oversized condensed display headlines (Anton) with negative tracking and tight leading
- Archivo grotesque sans for all body and UI text
- Color withheld from chrome so full-bleed project imagery carries the chroma
- Visual-first portfolio grid navigation over text menus
- Single restrained pill CTA; hairline-bordered badges and inputs
- Sharp/square cards (`{rounded.none}`) — imagery is never softened
- Generous gallery spacing between sections

## Colors

### Canvas & Ink
- **Near-Black** (`{colors.background}`): The page canvas. Deep but not pure black — warmth keeps it editorial.
- **Surface** (`{colors.surface}`): Slightly lifted panels, cards, badges.
- **Surface Soft** (`{colors.surface-soft}`): Inner content panels, raised blocks.
- **Paper Off-White** (`{colors.ink}`): Primary text and the warm "printed" highlight.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, captions, muted labels.
- **Ink Muted** (`{colors.ink-muted}`): Lowest-emphasis metadata.

### Inverse / Paper
- **Paper** (`{colors.paper}`): Light inverse sections (occasional flipped blocks).
- **Paper Ink** (`{colors.paper-ink}`): Text on paper sections.

### Accent
- **Primary Off-White** (`{colors.primary}`): The CTA fill — light on dark, the inverse of the canvas. Never the canvas color itself.
- **On Primary** (`{colors.on-primary}`): Near-black text on the off-white CTA.

### Chrome
- **Border** (`{colors.border}`): Section hairlines, badge outlines.
- **Border Strong** (`{colors.border-strong}`): Secondary button and input outlines.
- **Hover Surface** (`{colors.hover-surface}`): Subtle hover lift on ghost surfaces.
- **Focus Ring** (`{colors.focus-ring}`): Off-white keyboard focus outline.

## Typography

### Font Family
- **Display**: `Anton` — heavy condensed grotesque for hero/display headlines, with fallbacks `Arial Narrow, sans-serif`.
- **Text/UI**: `Archivo` — modernist grotesque sans for headings, body, and UI, with fallbacks `Helvetica Neue, sans-serif`.

### 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` | 96px condensed hero — maximum editorial impact |
| `display` | Large section openers |
| `heading` | Section titles (Archivo bold) |
| `sub-heading` | Sub-sections, project titles |
| `card-title` | Project/card headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-medium` | Emphasized inline text |
| `label` | Uppercase nav, button, and tag labels (tracked) |
| `caption` | Metadata, credits |

### Principles
- **Condensed display, neutral text**: Anton carries identity at large sizes; Archivo keeps everything legible below. Never set body copy in the condensed face.
- **Negative tracking scales with size**: -2px at 96px tightens to neutral by body. The big type should feel packed.
- **Tracked uppercase labels**: nav, buttons, and tags use `{typography.label}` with +1.5px tracking — the only place tracking goes positive.
- **Tight leading on display**: sub-1.0 line-height stacks headlines into solid blocks.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.2xl}`–`{spacing.4xl}`) for gallery-scale vertical rhythm.

### Grid & Container
- Full-bleed portfolio grid — imagery runs edge-to-edge at 16:9 (1600×900)
- Generous max content width for text sections (~1200px) centered on the dark canvas
- Section breaks via `{spacing.3xl}`+ vertical air, occasionally a `{colors.border}` hairline

### Whitespace Philosophy
- **Gallery emptiness**: Massive vertical space between movements lets each project breathe.
- **Imagery first**: Text sections are islands of calm between full-bleed visual blocks.
- **No decorative chrome**: depth comes from imagery and contrast, not shadows.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No border, no shadow | Canvas, text blocks, full-bleed images |
| Hairline (1) | `1px solid {colors.border}` | Section dividers, badges |
| Panel (2) | `{colors.surface}` fill | Lifted content panels |
| Focus | `2px solid {colors.focus-ring}` outline | Keyboard focus |

**Depth Philosophy**: Buffet builds depth from value contrast and full-bleed scale, not shadow. Surfaces lift by stepping up the near-black ladder (`{colors.background}` → `{colors.surface}` → `{colors.surface-soft}`) rather than casting shadows. Sharp corners keep imagery uncompromised.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Imagery, cards, full-bleed blocks |
| `xs` | 2px | Subtle inline elements |
| `sm` | 4px | Inputs, small content panels |
| `md` | 8px | Larger content panels |
| `pill` | 9999px | CTA buttons, badges, tags |

## Components

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

### Buttons
- **`button-primary`** — Off-white pill, near-black text, tracked uppercase label. The single emphatic CTA.
- **`button-secondary`** — Transparent canvas, `{colors.border-strong}` outline, off-white text. Hover lifts to `{colors.hover-surface}`.

### Badges
- **`badge`** — `{colors.surface}` fill, `{colors.border}` hairline, tracked uppercase label for project tags/credits.

### Cards
- **`card`** — Square (`{rounded.none}`), imagery-forward, hairline-separated. Image cards are never rounded.
- **`card-content`** — Slightly lifted text panel (`{colors.surface-soft}`) for written sections.

### Inputs
- **`input`** — `{colors.surface}` fill, `{colors.border-strong}` outline. Focus swaps to `{colors.focus-ring}`.

### Navigation
- **`nav-bar`** — Transparent dark header, tracked uppercase labels, hairline bottom border. Visual-first; logo + minimal links.

## Do's and Don'ts

### Do
- Keep the canvas warm near-black with paper off-white ink
- Use Anton condensed for display, Archivo for everything functional
- Let full-bleed imagery carry all the color
- Use tracked uppercase labels for nav/buttons/tags
- Keep imagery and cards square — never round a project image
- Use value steps (surface ladder) for depth, not shadows

### Don't
- Don't introduce decorative accent colors into chrome — imagery owns the chroma
- Don't set body copy in the condensed display face
- Don't add shadows or rounded cards to imagery
- Don't use pure black or clinical pure white — keep both warm
- Don't crowd sections — the gallery spacing is the identity
- Don't make the CTA the canvas color; it must invert to off-white

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display drops to ~48px, stacked grid |
| Tablet | 600–1024px | 2-up portfolio grid, display ~64px |
| Desktop | 1024–1400px | Full grid, display 96px |
| Large | >1400px | Centered, generous margins |

### Touch Targets
- Pill CTA uses 14px vertical padding for comfortable tap
- Nav labels at 13px with generous spacing
- Badges padded for tap legibility

### Collapsing Strategy
- Display headlines scale down but preserve negative tracking proportionally
- Portfolio grid: multi-column → 2-up → single full-bleed column
- Navigation: inline labels → minimal/hamburger
- Section spacing: 120px+ → ~64px on mobile

### Image Behavior
- Full-bleed 16:9 imagery maintained across breakpoints
- Next.js responsive image optimization
- Imagery never gains border radius or shadow at any size

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Near-Black `{colors.background}`
- Heading/body text: Paper Off-White `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Primary CTA: Off-White pill `{colors.primary}` with near-black text
- Hairline: `1px solid {colors.border}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline in Anton 96px, line-height 0.95, letter-spacing -2px, color `{colors.ink}`. Sub-copy in Archivo 20px `{colors.ink-secondary}`. Single off-white pill CTA (`{colors.primary}` fill, `{colors.on-primary}` text, tracked uppercase label)."
- "Build a portfolio grid: full-bleed 16:9 images, square corners (`{rounded.none}`), no shadow, hairline `{colors.border}` separation. Project title in Archivo 22px weight 600, tracked uppercase tag badge below."
- "Design a tag badge: `{colors.surface}` fill, `{colors.border}` hairline, off-white `{colors.ink-secondary}` text, pill radius, tracked uppercase 13px label."

### Iteration Guide
1. Color belongs to imagery, never to chrome — keep UI monochrome
2. Anton for display only; Archivo for all functional text
3. Tracking is negative on display, positive only on uppercase labels
4. Depth = value steps up the near-black ladder, never shadow
5. Keep imagery square and edge-to-edge; gallery spacing is the identity

---

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