# Footer · Design system migration spec

> Source: https://www.footer.design  ·  Curated by OpenDesign  ·  en

> A refined curation platform that demonstrates how strict restraint in color and typography can create a sophisticated editorial presentation.

## 1. Identity DNA

Like a gallery designed by a meticulous curator, every element in Footer's system exists to showcase the work, not the frame. The identity is built on a strict editorial discipline: a monochromatic palette, generous white space, and a typographic voice that speaks with clarity and authority.

**One-liner:** A curated design gallery focusing on bold typography and editorial presentation.
**Keywords:** Curation · Editorial · Footer · Design Gallery · Minimal
**Analogy:** A clean, typographic gallery curation platform

## 2. Color

The color system is an exercise in subtraction, defined entirely by its refusal to introduce chromatic accent. A strict monochromatic scale of white, light gray, and near-black ink creates high contrast, ensuring the curated design work remains the sole source of visual interest.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F2F2F2` | card background |
| `--ink` | `#242424` | body text |
| `--ink-soft` | `rgba(36,36,36,0.64)` | secondary text |
| `--muted` | `#737373` | placeholder |
| `--line` | `rgba(36,36,36,0.12)` | divider |

**Color principle:** Strictly monochromatic with high contrast between white space and dark text

The governing principle is one of absolute restraint, where the absence of color becomes the defining aesthetic choice.

## 3. Typography

The typographic voice is singular and disciplined, relying on the humanist and grotesque qualities of Inter to serve both body text and display headings. This unified approach, with distinct weights and tight tracking, creates a professional, editorial tone without decorative flourish.

- **Display:** grotesque-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.0 | 600 | -1.28px | Headings |

**Type rules:**
- Primary text uses 18px with -0.54px tracking
- Secondary text uses 14px with -0.42px tracking
- Headings use 600 weight
- Body text uses 400 weight

## 4. Spacing

A consistent 4-pixel-based rhythm governs all spacing, from fine details to large structural gaps, creating a quiet but perceptible order beneath the curated content.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 40 / 60 px
- **Rhythm:** Consistent spacing increments of 4, 8, 12, 16, 24, 40, 60

## 5. Surfaces

Surfaces are defined not by depth effects but by clean lines and minimal borders. The system avoids drop shadows entirely, relying on a thin, semi-transparent border to delineate cards and buttons against the generous white space.

- **Radius:** sm 4px · md 8px · lg 1600px · pill 1600px
- **Borders:** 1px solid rgba(36,36,36,0.12) on cards and buttons

## 6. Layout

The foundational skeleton is a multi-column grid designed to present gallery cards in a clear, organized layout. This structure prioritizes visual hierarchy and ample breathing room between items, facilitating effortless browsing.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Multi-column grid layout for gallery cards

## 7. Motion & Interaction

Motion philosophy here is one of functional subtlety, applied only to communicate state changes. Transitions for hover, focus, and opacity are smooth and brief, serving the interface's clarity rather than adding decorative animation.

- **Durations:** micro 150ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle fade transitions on hover
  - Smooth color and background-color changes
  - Opacity transitions for state changes

- **Hover:** Color and background-color transitions over 0.15s
- **Click:** Standard pointer cursor
- **Transition:** All properties transition smoothly
- **Keyboard:** Standard focus management

## 8. Voice & Don'ts

The editorial voice is professional and clean, with headlines that are bold and tightly tracked, and calls-to-action that are direct. This tone extends to the system's deliberate avoidance of clutter, decorative elements, and vague language.

- **Tone:** Professional, clean, and curated
- **Headline style:** Bold, tightly tracked, uppercase or large case
- **CTA style:** Direct and action-oriented with pill-shaped buttons
- **Avoid:** Cluttered interfaces / Excessive decorative elements / Vague language

### Don'ts
- ❌ Don't use vibrant accent colors — screenshot shows strictly monochromatic palette
- ❌ Don't use rounded corners except for pill buttons — screenshot shows sharp corners on cards
- ❌ Don't use drop shadows — screenshot shows flat, border-defined surfaces
- ❌ Don't use decorative fonts — screenshot uses clean grotesque and humanist sans-serifs
- ❌ Don't create dense layouts — screenshot uses generous white space and clear hierarchy
- ❌ Don't use multiple font families — screenshot relies primarily on Inter with varying weights

The system explicitly rejects vibrant accent colors, excessive rounding, drop shadows, decorative fonts, dense layouts, and multiple font families.

## System Prompt (paste into AI tool)

```
A minimalist design curation gallery focusing on editorial presentation of web design work. The palette is strictly monochromatic using #FFFFFF backgrounds, #F2F2F2 soft backgrounds, #242424 primary ink, and rgba(36,36,36,0.64) secondary text. Typography uses Inter (humanist-sans for body, grotesque-sans for display) with tight letter spacing. Critical don'ts: avoid vibrant accent colors, avoid rounded corners except on pill buttons, avoid drop shadows, avoid decorative fonts, avoid dense layouts, avoid multiple font families. The design emphasizes clean lines, generous spacing, and clear typographic hierarchy for showcasing curated design work.
```
