---
version: alpha
name: The Index
description: Curatorial modernism for a design-studio directory — pure-white gallery canvas, near-black ink, a single grotesque sans doing all the work, hairline rules instead of boxes, square corners, and zero decorative color. Content is the design.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#fafafa"
  ink: "#111111"
  ink-pure: "#000000"
  ink-secondary: "#666666"
  ink-muted: "#999999"

  # Single functional accent — link/hover state
  primary: "#111111"
  link: "#111111"
  link-hover: "#666666"

  # Hairlines + dividers
  border: "#e6e6e6"
  border-strong: "#111111"
  divider: "#ebebeb"

  # Neutral scale
  gray-900: "#111111"
  gray-700: "#333333"
  gray-600: "#666666"
  gray-400: "#999999"
  gray-200: "#e6e6e6"
  gray-100: "#f2f2f2"
  gray-50: "#fafafa"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

  # Selection
  selection-bg: "#111111"
  selection-text: "#ffffff"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.2px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.6px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  nav-link:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px
  meta-label:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0.2px
  mono-label:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px

spacing:
  micro: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

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

components:
  # Text link — the dominant interactive element
  link:
    textColor: "{colors.link}"
    typography: "{typography.body}"
  link-hover:
    textColor: "{colors.link-hover}"
    typography: "{typography.body}"

  # Filter / nav text button — underline-on-active, no chrome
  button-filter:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 4px 0px
  button-filter-active:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 4px 0px
    borderColor: "{colors.border-strong}"

  # Solid action button (rare — "View" / external)
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 10px 18px

  # Studio card — image + label, no border, square
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  # Index row — table-like entry separated by hairline
  index-row:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 0px
    borderColor: "{colors.divider}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
    borderColor: "{colors.divider}"

  # Mono metadata tag (category labels)
  meta-tag:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.none}"
    padding: 0px 0px

  # Thumbnail
  thumbnail:
    backgroundColor: "{colors.gray-50}"
    rounded: "{rounded.none}"
    borderColor: "{colors.border}"
---

# The Index Design System

## Overview

The Index is a curated directory of design studios, and its interface practices the exact discipline it celebrates. The page is a pure-white gallery (`{colors.background}`) carrying near-black ink (`{colors.ink}`), with no decorative color anywhere. Every studio is presented as a thumbnail and a name, arranged on a quiet grid that reads more like an exhibition wall than a website. The design gets out of the way so the work being indexed can be the only thing with personality.

The type system is deliberately singular: one grotesque sans (closest Google match: Inter) does everything from the masthead to the smallest caption. Hierarchy comes from size and weight, never from a second typeface or a color. Headings sit at a 500 weight with mild negative tracking; body text holds an even, comfortable rhythm; metadata drops to a quiet gray. A monospace voice (`{typography.mono-label}`) appears only for category labels and technical metadata, the one small concession to the "directory" feel.

Structure is built from hairlines, not boxes. Sections and index rows are separated by 1px dividers (`{colors.divider}`) rather than cards with borders and shadows. Corners are square (`{rounded.none}` is the default), there are no drop shadows, and interactive elements announce themselves through underlines and gray hover states rather than fills. The result is curatorial modernism: confident, content-first, and almost entirely achromatic.

**Key Characteristics:**
- Pure-white gallery canvas with near-black `{colors.ink}` text — no decorative color
- One grotesque sans for the entire hierarchy; mono only for category metadata
- Hairline dividers (`{colors.divider}`) instead of bordered/shadowed cards
- Square corners by default (`{rounded.none}`) — radius is the exception, never the rule
- Links and filters use underline + gray hover, not button chrome
- Studio thumbnails carry the only color on the page; chrome stays achromatic
- Generous whitespace and a quiet, table-like index rhythm

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, studio names, masthead. Near-black, slightly softened from pure.
- **Pure White** (`{colors.background}`): Page canvas, card surfaces.
- **True Black** (`{colors.ink-pure}`): Reserved for the strongest rules and active states.

### Text Hierarchy
- **Ink Secondary** (`{colors.ink-secondary}`): Descriptions, metadata, secondary labels.
- **Ink Muted** (`{colors.ink-muted}`): Placeholder text, inactive filters, fine print.

### Interactive
- **Link** (`{colors.link}`): Text links — same ink as body, distinguished by underline.
- **Link Hover** (`{colors.link-hover}`): Gray hover/dim state on links and filters.

### Hairlines & Dividers
- **Border** (`{colors.border}`): Thumbnail outlines, faint containers.
- **Border Strong** (`{colors.border-strong}`): Active filter underline, emphasis rules.
- **Divider** (`{colors.divider}`): Index-row separators and section rules — the structural workhorse.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Primary text.
- **Gray 700** (`{colors.gray-700}`): Strong secondary text.
- **Gray 600** (`{colors.gray-600}`): Metadata, captions.
- **Gray 400** (`{colors.gray-400}`): Muted/inactive.
- **Gray 200** (`{colors.gray-200}`): Hairlines.
- **Gray 100 / Gray 50** (`{colors.gray-100}` / `{colors.gray-50}`): Subtle surface tints for thumbnail placeholders.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `Helvetica Neue, Arial, sans-serif` — a neutral grotesque carrying the entire system.
- **Monospace**: `JetBrains Mono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, monospace` — category labels and technical metadata only.

### 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` | Masthead / page title |
| `section-heading` | Section titles, category headers |
| `card-title` | Studio names under thumbnails |
| `body-large` | Intro / about copy |
| `body` | Standard reading and index text |
| `body-small` | Dense lists, secondary copy |
| `nav-link` | Navigation and filter labels |
| `meta-label` | Metadata, secondary descriptions |
| `caption` | Fine print, counts |
| `mono-label` | Category tags, technical metadata |

### Principles
- **One typeface, all the work**: Hierarchy is built from size and weight (400 reading, 500 emphasis), never from a second display face.
- **Restrained tracking**: Mild negative letter-spacing on large headings; neutral elsewhere.
- **Mono as metadata voice**: The monospace face appears only for category/technical labels — the lone signal that this is an index.
- **Color is not hierarchy**: Secondary text steps down in gray value, not in hue.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px. The scale steps generously toward the top (`{spacing.3xl}` 64px, `{spacing.4xl}` 96px) to give sections gallery-wall breathing room.

### Grid & Container
- Max content width: roughly 1200–1400px with comfortable side margins.
- Studio grid: responsive multi-column thumbnail grid (3–4 up on desktop).
- Index view: single-column, table-like rows separated by hairlines.
- Hero/masthead: left-aligned title with category filters beneath.

### Whitespace Philosophy
- **Gallery emptiness**: Large vertical gaps between sections; whitespace carries the rhythm.
- **Hairlines over boxes**: Separation comes from 1px `{colors.divider}` rules, not from cards, fills, or shadows.
- **Square and flat**: No rounding, no elevation — depth would contradict the curatorial flatness.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page background, text, most elements |
| Hairline (Level 1) | `1px solid {colors.divider}` | Index-row and section separation |
| Outline (Level 1b) | `1px solid {colors.border}` | Thumbnail / image frame |
| Emphasis (Level 2) | `1px solid {colors.border-strong}` | Active filter underline |

**Depth Philosophy**: The Index has effectively no elevation system. There are no drop shadows and no raised cards. "Depth" is expressed purely through hairline contrast — a faint `{colors.divider}` for routine separation, a strong `{colors.border-strong}` for active emphasis. Flatness is the point.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — cards, thumbnails, buttons |
| `micro` | 2px | Rare soft edge on small chips |
| `xs` | 4px | Optional input corners |
| `sm` | 6px | Optional soft buttons |
| `md` | 8px | Maximum rounding, used sparingly |
| `pill` | 9999px | Reserved; not used in core chrome |

## Components

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

### Links & Filters
- **`link`** — Ink-colored text link, underline as affordance, dims to `{colors.link-hover}` on hover.
- **`button-filter`** — Text-only category filter; active state gains a `{colors.border-strong}` underline. No background, no radius.
- **`button-primary`** — Solid ink button for rare external "View" actions; square corners, white text.

### Cards & Rows
- **`card`** — Studio entry: thumbnail above a name. No border, no shadow, square corners.
- **`index-row`** — Table-like list entry separated by a `{colors.divider}` hairline.
- **`thumbnail`** — Image frame on a `{colors.gray-50}` placeholder with a faint `{colors.border}` outline.

### Navigation & Metadata
- **`nav-bar`** — Minimal white header with a bottom `{colors.divider}` hairline; 14px weight-500 links.
- **`meta-tag`** — Category label in `{typography.mono-label}`, gray, no chrome.

## Do's and Don'ts

### Do
- Keep the canvas pure white and the ink near-black — let indexed work supply all color
- Build hierarchy from size and weight in a single grotesque sans
- Separate content with 1px `{colors.divider}` hairlines, not bordered/shadowed cards
- Default to square corners (`{rounded.none}`)
- Use the monospace face only for category/technical metadata
- Signal links and filters with underline + gray hover, not fills

### Don't
- Don't introduce decorative accent colors into the chrome
- Don't add drop shadows or raised card treatments
- Don't round corners by default — flatness is the identity
- Don't bring in a second display typeface
- Don't use color to express hierarchy — step down in gray instead
- Don't let chrome compete with the studio thumbnails

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column grid, stacked filters |
| Tablet | 600–1024px | 2-column thumbnail grid |
| Desktop | 1024–1400px | 3–4 column grid, full index width |
| Large | >1400px | Centered, generous side margins |

### Touch Targets
- Filter and nav links carry adequate vertical padding for tapping
- Thumbnails are large tap targets in the grid
- Index rows give full-width tap area per entry

### Collapsing Strategy
- Studio grid: 3–4 columns → 2 → single column
- Filters: inline row → wrapped / stacked
- Index rows: maintain single column at all sizes, tighten padding on mobile
- Section spacing: 64px+ → ~32px on mobile

### Image Behavior
- Next.js-optimized responsive thumbnails maintain aspect ratio
- Faint `{colors.border}` outline preserved at all sizes
- Placeholder tint (`{colors.gray-50}`) shown before load

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Pure White `{colors.background}`
- Heading / body text: Ink `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Hairline: `1px solid {colors.divider}`
- Link hover: `{colors.link-hover}`
- Active emphasis: `{colors.border-strong}`

### Example Component Prompts
- "Create a studio card: square thumbnail on `{colors.gray-50}` with a 1px `{colors.border}` outline, name below in 18px Inter weight 500 `{colors.ink}`, category in 12px JetBrains Mono `{colors.ink-secondary}`. No card border, no shadow, square corners."
- "Build a filter row: text-only labels in 14px Inter weight 500 `{colors.ink}`. Active filter gets a 1px `{colors.border-strong}` underline. No background, no radius."
- "Design an index list: full-width rows of studio name + category, each separated by a 1px `{colors.divider}` hairline, 14px vertical padding, 16px Inter body text."
- "Create a minimal nav bar: white background, 14px Inter weight 500 links in `{colors.ink}`, bottom hairline `1px solid {colors.divider}`."

### Iteration Guide
1. Default everything to square corners and no shadow — rounding/elevation is off-system.
2. Separate with hairlines (`{colors.divider}`), never with card borders or fills.
3. One sans for hierarchy; mono only for category metadata.
4. Keep all chrome achromatic — color lives in the studio thumbnails alone.
5. Express secondary information by stepping down in gray, not by changing hue.

---

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