# Schemasofuncertainty · Design system migration spec

> Source: http://schemasofuncertainty.com  ·  Curated by OpenDesign  ·  en

> Worth including as an example of extreme typographic minimalism in academic publishing.

## 1. Identity DNA

This design system is modeled on a theoretical art journal—a printed artifact where the architecture of ideas is laid bare. It is an academic archive for theoretical concepts like uncertainty, where every choice serves the text, not decoration. The result is a purely typographic layout that feels both curated and intentionally sparse.

**One-liner:** An academic archive exploring theoretical concepts through text-heavy editorial design.
**Keywords:** Academic · Conceptual · Art Theory · Archive
**Analogy:** A theoretical art journal

## 2. Color

The color system is a strict, two-tone monochrome palette of dark green-black (#2C3829) on white (#FFFFFF). This is not a limitation but a foundation for maximum readability and unadorned academic focus.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#2C3829` | body text |
| `--muted` | `#2C3829` | placeholder |
| `--line` | `rgba(44,56,41,1)` | divider |

**Color principle:** Strict monochrome for maximum readability and academic focus

The principle is absolute: color exists only to support the legibility of text, never to create accent or emotional tone.

## 3. Typography

The typographic voice is defined by a deliberate pairing: Century Schoolbook, a transitional serif, for headings, and Next Mono, a monospace, for body text. This combination establishes a scholarly tone, where the formality of the serif heading is grounded by the technical, uniform texture of the monospace body.

- **Display:** transitional-serif
- **Body:** monospace
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 16px | 1.3 | 400 | 0px | Main headings |
| body | 10px | 1.3 | 400 | 0px | Body text |

**Type rules:**
- Use Century Schoolbook for headings and Next Mono for body text.
- Maintain strict 400 weight throughout.
- Keep line-height tight at 1.3x font size.

## 4. Spacing

All vertical and horizontal rhythm is governed by a strict 4px base grid, creating a tight, interlocking structure for the dense text columns.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict 4px base grid

## 5. Surfaces

Depth is conveyed through a flat, borderless philosophy where separation is achieved solely with a 1px solid border in the system's green-black ink. There are no drop shadows or layered surfaces; the design is resolutely two-dimensional.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** 1px solid #2C3829

## 6. Layout

The skeleton is a 5-column asymmetric grid with variable widths, creating a dynamic yet disciplined flow for the dense text blocks. This structure avoids rigid symmetry in favor of a more editorial, manuscript-like composition.

- **Container max:** 1440px
- **Grid:** 5 columns, gutter 0px
- **Breakpoints:** 768 px

**Skeleton:** 5-column asymmetric grid with variable widths

## 7. Motion & Interaction

Motion is minimal and utilitarian, reserved for simple state changes. Transitions are executed as straightforward opacity shifts or uniform property changes, avoiding any animation that would distract from the content.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Simple opacity transitions

- **Hover:** Text color change
- **Click:** Navigate to article
- **Transition:** All properties
- **Keyboard:** Standard tab navigation

## 8. Voice & Don'ts

The editorial voice is academic and theoretical, with headlines styled in a serif, uppercase format to convey conceptual weight. CTAs are reduced to their simplest form: plain, underlined text links that blend into the reading experience.

- **Tone:** Academic and theoretical
- **Headline style:** Serif, uppercase, bold conceptual titles
- **CTA style:** Plain text links
- **Avoid:** Playful language / Bright colors / Rounded corners / Visual illustrations

### Don'ts
- ❌ Don't use sans-serif fonts — screenshot shows serif for headings and monospace for body text
- ❌ Don't add shadows — screenshot shows flat, borderless design
- ❌ Don't use bright accent colors — screenshot shows strict monochrome palette
- ❌ Don't add border-radius — screenshot shows sharp rectangular corners
- ❌ Don't use large body font sizes — screenshot shows small 10px text
- ❌ Don't add decorative images — screenshot shows purely typographic layout

This system deliberately omits decorative imagery, playful language, and bright accent colors to maintain its role as a serious typographic archive.

## System Prompt (paste into AI tool)

```
This site is a theoretical academic archive exploring concepts like uncertainty through dense text-based layouts. It uses a strict monochrome palette with dark green-black (#2C3829) ink on white (#FFFFFF) backgrounds. Typography combines Century Schoolbook (transitional-serif) for headings with Next Mono (monospace) for body text. The layout is a multi-column grid with tight spacing. Critical constraints: Never use sans-serif fonts, never add shadows, never use bright colors, never add border-radius, keep body text small (10px), and maintain purely typographic design without decorative images.
```