# Foundation · Design system migration spec

> Source: https://foundation.app  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a restrained, editorial design system focused purely on conveying a direct and sincere message through typography and space.

## 1. Identity DNA

Foundation's announcement pages are not a marketing campaign, but a plain-spoken open letter to a community. The design system that supports this letter is built with the same directness and sincerity, functioning as a transparent, minimal framework for clear communication.

**One-liner:** A sincere, typographically-driven shutdown notice with a restrained, monochromatic design.
**Keywords:** transparent · direct · sincere · minimal · community-focused
**Analogy:** A plain-spoken open letter.

## 2. Color

The palette is a study in stark contrast and restraint. Pure black and off-white form the high-contrast foundation, while a single, warm yellow accent is reserved for moments of critical emphasis.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#EDEDED` | body text |
| `--muted` | `#8A8A8A` | placeholder |
| `--accent` | `#FFD400` | single accent |
| `--line` | `rgba(237, 237, 237, 0.25)` | divider |

**Color principle:** High-contrast monochromatic palette with minimal, sparing use of a single warm accent.

This strict monochromatic discipline ensures the design never competes with the sincerity of the message it carries.

## 3. Typography

Typography is the primary voice of the system, using a clean, neutral humanist sans-serif. Its treatment creates a clear hierarchy: widely tracked uppercase for metadata establishes a quiet, formal rhythm, while tight, heavy headlines deliver the core announcement with direct impact.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -2px | Main announcement headline |
| body | 20px | 1.65 | 400 | normal | Primary body text |
| caption | 11.52px | 1.65 | 400 | 2.5344px | Uppercase dates and metadata |

**Type rules:**
- Uppercase and widely tracked for small labels like dates and footer text.
- Tight tracking and heavy weight for prominent display headlines.
- Generous paragraph spacing to maintain a calm reading rhythm.

## 4. Spacing

A consistent vertical rhythm is maintained through generous whitespace, giving each element room to breathe and emphasizing the calm, linear reading path.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent vertical rhythm with generous whitespace to emphasize the text.

## 5. Surfaces

Depth is communicated with extreme subtlety. A near-invisible inset shadow and semi-transparent 1px borders provide just enough structure to define containers without adding visual weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - inset 0 0 2px 0 rgba(0, 0, 0, 0.03)
- **Borders:** Subtle 1px borders using a semi-transparent white or light grey.

## 6. Layout

The layout skeleton is a deliberate constraint: a narrow, single column centered on the page. This architecture eliminates choice and focuses the entire experience on a single, linear reading experience.

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

**Skeleton:** A narrow, single-column centered layout optimized for readability.

## 7. Motion & Interaction

Motion is used to acknowledge interaction, not to decorate. Transitions are smooth and decelerating, applying subtle opacity or background shifts to interactive elements to provide clear, unobtrusive feedback.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.16, 1, 0.3, 1)`
- **Patterns:**
  - Smooth, decelerating transitions for interactive elements.
  - Subtle opacity fades.

- **Hover:** Subtle background color shifts on interactive elements.
- **Click:** Smooth transitions on active states.
- **Transition:** All properties transition smoothly, primarily background-color and opacity.
- **Keyboard:** Standard focus indicators.

## 8. Voice & Don'ts

The editorial voice is sincere, direct, and transparent, mirroring the design's clarity. Headlines are short and declarative, while calls to action remain subtle and secondary to the primary message.

- **Tone:** Sincere, direct, and transparent.
- **Headline style:** Short, impactful, and declarative.
- **CTA style:** Subtle and unobtrusive, often secondary to the main message.
- **Avoid:** Marketing jargon / Overly bright or saturated colors / Dense, complex layouts

### Don'ts
- ❌ Don't use complex layouts — screenshot shows a single-column, highly focused reading layout.
- ❌ Don't use a wide variety of colors — screenshot shows a strictly monochromatic palette with one accent.
- ❌ Don't use serif or highly decorative fonts — screenshot shows a clean, neutral humanist sans-serif.
- ❌ Don't use dense, compact spacing — screenshot shows generous whitespace between paragraphs.
- ❌ Don't use heavy borders or drop shadows — screenshot shows only very subtle, semi-transparent borders.
- ❌ Don't center all body text — screenshot shows left-aligned body text within a centered container.

The system deliberately avoids complex layouts, vibrant color palettes, and decorative typography, adhering to its core principle of direct communication.

## System Prompt (paste into AI tool)

```
This system documents a minimalist, editorial design system for the Foundation app's announcement pages. The identity is direct, transparent, and community-focused, utilizing a stark, monochromatic palette: solid black (#000000) backgrounds with off-white (#EDEDED) text and muted grey (#8A8A8A) accents. A single, sparingly used warm yellow (#FFD400) serves as a high-chroma accent. The typography relies on a clean, neutral humanist-sans-serif with a clear hierarchy of tracked uppercase labels and tight, heavy display headlines. The layout is a narrow, centered single-column optimized purely for reading. Critical don'ts: avoid using multiple bright colors, avoid complex multi-column layouts, and avoid using overly decorative or serif typefaces. The design prioritizes calm readability and sincere, direct communication.
```
