---
version: alpha
name: Fellowship
description: Gallery-grade editorial minimalism for digital art — near-black ink on pure white, oversized tight-tracked display headlines, uppercase mono micro-labels for utility chrome, sharp-cornered cards letting full-bleed artist imagery carry the page.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f5f5f3"
  ink: "#111111"
  ink-pure: "#000000"

  # Secondary text
  ink-secondary: "#5c5c5c"
  ink-muted: "#8a8a8a"

  # Accent — restrained, used for links + active states
  primary: "#111111"
  link: "#1a1a1a"
  link-hover: "#000000"

  # Inverse surface (footer / film section)
  surface-inverse: "#0a0a0a"
  ink-inverse: "#f5f5f3"
  ink-inverse-muted: "#9a9a9a"

  # Lines + neutrals
  border: "#e6e6e4"
  border-strong: "#111111"
  gray-100: "#ededeb"
  gray-200: "#d8d8d6"
  gray-500: "#737373"

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

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -2.4px
  display:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.96px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.44px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1.2px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.2px

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

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

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

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"

  button-inverse:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
    padding: 14px 28px

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

  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xs}"
    padding: 24px

  badge-mono:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
    padding: 4px 10px

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

  nav-link:
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"

  footer:
    backgroundColor: "{colors.surface-inverse}"
    textColor: "{colors.ink-inverse}"
    typography: "{typography.body-small}"
    padding: 64px 32px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
---

# Fellowship Design System

## Overview

Fellowship presents itself as a digital-art institution, and its design system is built to feel like a contemporary gallery rather than a web product. The page is overwhelmingly white (`{colors.background}`) with near-black ink (`{colors.ink}`), and almost every decision pushes the chrome toward invisibility so that full-bleed artist imagery becomes the only loud thing on the page. There is no decorative color, no rounded softness, no gradient — just type, line, and image arranged with editorial confidence.

The typographic voice does the heavy lifting. Oversized display headlines (up to 64px) set in a tight-tracked grotesque carry section statements like manifesto copy, with aggressive negative letter-spacing (`-2.4px` at hero scale) that compresses the words into a single architectural block. Against that, utility chrome — nav links, button labels, captions, metadata — switches to an uppercase monospace with positive tracking, a move that reads as "catalog plate" and signals the platform's technical, on-chain provenance without ever shouting it.

Structurally, Fellowship is sharp-cornered. Cards, buttons, and image frames use 0px radius (`{rounded.none}`) as the default, reinforcing the gallery-wall, printed-catalog feeling. Artist cards are essentially framed images with a thin hairline (`{colors.border}`) and text set below, so the work is the hero and the container disappears. A single inverted section — typically the film/feature block and the footer — flips to near-black (`{colors.surface-inverse}`) for dramatic contrast, the one place the system allows itself a moment of theater.

**Key Characteristics:**
- Pure-white gallery canvas with near-black `{colors.ink}` — no decorative color in chrome
- Oversized tight-tracked display type (-2.4px at 64px) for editorial statements
- Uppercase monospace (`{typography.label-mono}`) with positive tracking for all utility labels, nav, and buttons
- Sharp 0px corners everywhere — buttons, cards, image frames
- Full-bleed artist imagery carried by near-invisible containers
- One inverted near-black section for the film/footer, used sparingly for drama
- Hairline borders (`{colors.border}`) instead of shadows for separation

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings, sharp dark buttons. Near-black, not pure, for a softer gallery feel.
- **Pure White** (`{colors.background}`): Page background, card surfaces, button text on dark.
- **True Black** (`{colors.ink-pure}`): Hover state for primary buttons, maximum-contrast moments.

### Secondary Text
- **Ink Secondary** (`{colors.ink-secondary}`): Artist bios, descriptions, supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Metadata, timestamps, de-emphasized captions.

### Accent / Interactive
- **Primary** (`{colors.primary}`): Active states, emphasized labels (intentionally monochrome).
- **Link** (`{colors.link}`): Inline and nav links.
- **Link Hover** (`{colors.link-hover}`): Link hover state.

### Inverse Surface
- **Surface Inverse** (`{colors.surface-inverse}`): Near-black film/footer section.
- **Ink Inverse** (`{colors.ink-inverse}`): Text on the inverse surface.
- **Ink Inverse Muted** (`{colors.ink-inverse-muted}`): Muted text on dark.

### Lines & Neutrals
- **Border** (`{colors.border}`): Hairline card and section dividers.
- **Border Strong** (`{colors.border-strong}`): Outline buttons, input borders, emphatic rules.
- **Surface Soft** (`{colors.surface-soft}`): Subtle off-white tint for soft cards and badges.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `Helvetica Neue, Arial, sans-serif` — a tight neo-grotesque standing in for the brand's custom display grotesque.
- **Monospace**: `Space Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace` — used uppercase for all utility/catalog labels.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 64px hero statements — manifesto headlines |
| `display` | 48px major section openers |
| `section-heading` | 32px section titles |
| `card-title` | Artist names, card headings |
| `body-large` | Lead paragraphs, feature intros |
| `body` | Standard reading copy |
| `body-small` | Captions, secondary copy |
| `label-mono` | Uppercase mono — nav, buttons, metadata |
| `caption` | Tags, small UI labels |

### Principles
- **Two voices, strict split**: tight-tracked grotesque for editorial type, uppercase mono for every piece of utility chrome. Never mix.
- **Compression at scale**: letter-spacing scales negative with size (-2.4px at 64px, relaxing toward 0 at body).
- **Mono is the brand signal**: uppercase `{typography.label-mono}` carries the technical, catalog-plate identity for nav, CTAs, and metadata.
- **Restrained weights**: 400 for reading and mono labels, 500–600 for headings. No heavy bold.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Generous editorial rhythm: section gaps run `{spacing.3xl}`–`{spacing.4xl}` to give imagery room to breathe.

### Grid & Container
- Wide content container with full-bleed image breakouts
- Artist work shown in image-first card grids (2–3 columns)
- Sharp-cornered frames; separation by hairline border and whitespace, not shadow

### Whitespace Philosophy
- **Gallery emptiness**: large vertical padding between sections; white space frames the work
- **Image carries the page**: containers recede so artist imagery dominates
- **Inverse drama**: a single near-black section breaks the white rhythm for the film/footer

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — buttons, cards, image frames |
| `xs` | 2px | Soft cards, badges |
| `sm` | 4px | Minor containers |
| `md` | 8px | Rare larger surfaces |
| `pill` | 9999px | Reserved for occasional avatar/status dots |

## Components

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

### Buttons
- **`button-primary`** — sharp black box, white uppercase mono label, 0px radius. The default CTA (e.g. "WATCH FILM").
- **`button-outline`** — white with a strong black hairline, uppercase mono label.

### Cards
- **`card-artist`** — image-first frame, near-invisible hairline border, sharp corners; name + role set below.
- **`card-soft`** — subtle off-white tint for editorial blocks.

### Navigation
- **`nav-bar`** — white, hairline-bottomed, uppercase mono links and social icons.

### Inverse
- **`footer`** — near-black surface, light text, the system's one inverted region.

## Do's and Don'ts

### Do
- Keep chrome monochrome — let artist imagery be the only color
- Use uppercase `{typography.label-mono}` for nav, buttons, and metadata
- Use 0px radius everywhere by default
- Separate with hairline borders and whitespace, not shadows
- Use the inverse near-black section sparingly, for the film/footer only

### Don't
- Don't introduce decorative accent colors into chrome
- Don't round buttons or cards — sharp corners are the identity
- Don't use the editorial grotesque for utility labels (that's mono's job)
- Don't add drop shadows for depth — hairlines and space do the work
- Don't crowd sections — the gallery rhythm depends on generous space

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, mono labels persist |
| Tablet | 600–1024px | 2-column artist grids |
| Desktop | 1024–1440px | Full 3-column grids, full-bleed imagery |
| Large | >1440px | Centered, generous margins |

### Collapsing Strategy
- Hero: 64px → scales down, keeps proportional negative tracking
- Navigation: horizontal mono links → menu toggle
- Artist grid: 3-column → 2 → single column
- Section spacing: 96px+ → ~48px on mobile

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Ink `{colors.ink}`, white mono label, 0px radius
- Background: Pure White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Borders: hairline `{colors.border}`
- Inverse section: `{colors.surface-inverse}`

### Example Component Prompts
- "Create a hero: white background, 64px Inter weight 600, line-height 1.02, letter-spacing -2.4px, color `{colors.ink}`. Below it a sharp black CTA (`{colors.ink}`, 0px radius, 14px 28px padding) with an uppercase Space Mono label, 12px, letter-spacing 1.2px."
- "Build an artist card: image-first, 0px radius, 1px `{colors.border}` frame. Name below in 22px Inter weight 500, letter-spacing -0.44px; role in 12px uppercase Space Mono `{colors.ink-secondary}`."
- "Design an inverted footer: `{colors.surface-inverse}` background, `{colors.ink-inverse}` text, uppercase mono nav links."

---

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