---
version: alpha
name: Footer
description: Gallery-grade editorial minimalism — a near-white canvas, ink-black type, and a single restrained accent, where curated thumbnails are the only color. Clean grid cards, generous whitespace, system-grade sans with tight headings, and soft rounded chrome.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#fafafa"
  surface-muted: "#f5f5f5"
  ink: "#111111"
  ink-secondary: "#555555"
  ink-tertiary: "#888888"

  # Accent — used sparingly for badges/links/CTA
  primary: "#111111"
  accent: "#3b5bdb"
  accent-soft: "#edf0fb"

  # Editor's Choice / status
  badge-bg: "#111111"
  badge-text: "#ffffff"

  # Borders + dividers
  border: "#ebebeb"
  border-strong: "#dddddd"

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

typography:
  display-hero:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  meta:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  badge-label:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.2px

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

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 10px
  lg: 14px
  xl: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
    borderColor: "{colors.border-strong}"
  button-load-more:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 28px

  badge:
    backgroundColor: "{colors.badge-bg}"
    textColor: "{colors.badge-text}"
    typography: "{typography.badge-label}"
    rounded: "{rounded.sm}"
    padding: 4px 8px

  badge-accent:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.accent}"
    typography: "{typography.badge-label}"
    rounded: "{rounded.sm}"
    padding: 4px 8px

  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 0px
    borderColor: "{colors.border}"

  card-meta:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-small}"
    padding: 12px 16px

  thumbnail:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.md}"
    borderColor: "{colors.border}"

  favicon:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    width: 32px
    height: 32px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  chip-filter:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.meta}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
---

# Footer Design System

## Overview

Footer (footer.design) is a curation gallery — a hand-picked library of the best website footers — and its own interface practices exactly the restraint it celebrates. The page is a near-pure white canvas (`{colors.background}`) carrying ink-black type (`{colors.ink}`), so that the only real color on screen comes from the curated thumbnails themselves. This is editorial minimalism in service of curation: the chrome recedes, the content performs.

The layout is a clean, evenly-gridded set of cards. Each card pairs a screenshot thumbnail with a 32px favicon, a tight site title, and a muted one-line description. Spacing is generous and consistent — whitespace is the primary structural device, separating items without rules or heavy borders. Where borders appear, they are whisper-light (`{colors.border}`), used to define thumbnail frames and card edges rather than to decorate.

Typography is a geometric humanist sans (Inter-class) with tight tracking on headings (-1.6px at hero) that relaxes to neutral at reading sizes. Three weights carry the whole system: 400 for body and descriptions, 500 for UI/meta, 600 for titles and headings. The "Editor's Choice" badge is the one moment of inversion — black fill, white label — a small, deliberate accent in an otherwise quiet field.

**Key Characteristics:**
- Near-pure white canvas with ink-black text; thumbnails supply all the color
- Inter-class humanist sans with tight heading tracking (-1.6px hero, -0.8px section)
- Three-weight system: 400 body, 500 UI/meta, 600 titles
- Card grid with light hairline borders (`{colors.border}`) and generous whitespace
- Inverted "Editor's Choice" badge (black fill, white text) as the signature accent
- Soft rounded chrome (10–14px cards, pill buttons)
- Restraint as identity — the curated content is the visual centerpiece

## Colors

### Canvas + Ink
- **White** (`{colors.background}`): Page background, card surfaces.
- **Surface Soft** (`{colors.surface-soft}`): Thumbnail backers, input fields.
- **Surface Muted** (`{colors.surface-muted}`): Load-more button, filter chips.
- **Ink** (`{colors.ink}`): Primary text, titles, headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Descriptions, meta text.
- **Ink Tertiary** (`{colors.ink-tertiary}`): Timestamps, least-important labels.

### Accent
- **Primary** (`{colors.primary}`): Ink-black primary CTA and badge fill.
- **Accent** (`{colors.accent}`): Sparing link/active accent.
- **Accent Soft** (`{colors.accent-soft}`): Tinted accent badge background.

### Status
- **Badge Bg** (`{colors.badge-bg}`): Black "Editor's Choice" pill fill.
- **Badge Text** (`{colors.badge-text}`): White badge label.

### Borders
- **Border** (`{colors.border}`): Hairline card and thumbnail outlines.
- **Border Strong** (`{colors.border-strong}`): Secondary button outline.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif`

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 44px page hero — tight tracking |
| `section-heading` | Section titles |
| `card-title` | Card / site names |
| `body-large` | Intro copy |
| `body` | Standard reading text |
| `body-small` | Card descriptions |
| `meta` | Meta labels, filter chips |
| `button-ui` | Buttons, links |
| `caption` | Small metadata |
| `badge-label` | Editor's Choice badge |

### Principles
- **Tight headings, neutral body**: Negative tracking compresses headlines (-1.6px hero); reading sizes sit at 0px.
- **Three weights only**: 400 (read), 500 (interact/meta), 600 (announce). No bold beyond 600.
- **Muted descriptions**: Card copy uses `{colors.ink-secondary}` to keep titles dominant.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with generous section gaps (`{spacing.3xl}`–`{spacing.4xl}`).

### Grid & Container
- Max content width ~1200px, centered
- Card grid: 3-column → 2-column → single column
- Thumbnails maintain a consistent aspect ratio across the grid

### Whitespace Philosophy
- **Curation-first emptiness**: Generous gutters let each thumbnail breathe; the chrome never competes with the content.
- **Hairlines over fills**: Separation comes from light borders and spacing, not background blocks.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 4px | Small spans |
| `sm` | 6px | Badges, favicons |
| `md` | 10px | Thumbnails, inputs |
| `lg` | 14px | Cards |
| `xl` | 20px | Large containers |
| `pill` | 9999px | Buttons, filter chips |

## Components

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

### Buttons
- **`button-primary`** — Ink-black pill, white text. Default CTA.
- **`button-secondary`** — White pill with `{colors.border-strong}` outline.
- **`button-load-more`** — Muted-surface pill for pagination.

### Badges
- **`badge`** — Black "Editor's Choice" pill, white label. The signature accent.
- **`badge-accent`** — Soft tinted accent variant.

### Cards
- **`card`** — White surface, `{rounded.lg}`, hairline border. Holds thumbnail + meta.
- **`thumbnail`** — Soft-backed screenshot frame with hairline border.
- **`favicon`** — 32px rounded site mark.

### Inputs & Nav
- **`input`** — Soft-surface search field.
- **`nav-bar`** — White sticky header with hairline bottom border.
- **`chip-filter`** — Pill filter chips on muted surface.

## Do's and Don'ts

### Do
- Keep the canvas white and let thumbnails supply the color
- Use tight negative tracking on headings, neutral on body
- Use the three-weight system: 400 / 500 / 600
- Define edges with hairline borders, not fills
- Reserve the black inverted badge for "Editor's Choice"

### Don't
- Don't add decorative background colors to chrome
- Don't use weight 700+ on body text
- Don't crowd the grid — whitespace is structural
- Don't outline thumbnails with heavy borders
- Don't let accent color compete with curated content

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column cards, tight padding |
| Tablet | 600–1024px | 2-column grid |
| Desktop | >1024px | 3-column grid, max 1200px content |

### Collapsing Strategy
- Card grid: 3 → 2 → 1 column
- Nav: horizontal links → compact / menu
- Section spacing: 64px+ → 40px on mobile

### Image Behavior
- Thumbnails keep aspect ratio and hairline border at all sizes
- Favicons stay 32px

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA / badge: Ink-black `{colors.primary}`
- Background: White `{colors.background}`
- Heading text: `{colors.ink}`
- Description text: `{colors.ink-secondary}`
- Border (hairline): `{colors.border}`

### Example Component Prompts
- "Create a gallery card: white surface, 14px radius, 1px `{colors.border}` outline. Thumbnail on top (10px radius, soft `{colors.surface-soft}` backer). Below: 32px favicon, 16px Inter weight 600 title `{colors.ink}`, 14px weight 400 description `{colors.ink-secondary}`."
- "Build an 'Editor's Choice' badge: black `{colors.badge-bg}` fill, white text, 11px Inter weight 600, 6px radius, 4px 8px padding."
- "Make a load-more button: `{colors.surface-muted}` pill, `{colors.ink}` text, 14px weight 500, 12px 28px padding."

### Iteration Guide
1. White canvas, ink type, thumbnails as the only color
2. Tracking scales with size: -1.6px hero → 0px body
3. Three weights: 400 read, 500 interact, 600 announce
4. Hairline borders define structure; whitespace separates
5. The inverted black badge is the one accent — use it sparingly

---

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