# 205TF · Design system migration spec

> Source: https://www.205.tf  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of a 'restraint-first' design system where extreme minimalism and custom interaction patterns are used to elevate a specialized product (type specimens).

## 1. Identity DNA

205TF is a curated black-box gallery, a space designed to present type specimens as monolithic artifacts. The entire system is built on a foundation of absolute stark contrast, where the inherent character and craftsmanship of the typefaces is the sole protagonist, framed by a minimalist architecture of precision and editorial clarity.

**One-liner:** A minimalist, high-contrast type foundry gallery that lets specimen typography speak for itself.
**Keywords:** foundry · type · gallery · editorial · precision
**Analogy:** A curated black-box gallery where type specimens are presented as monolithic artifacts.

## 2. Color

The color system is an exercise in radical reduction, employing a strict monochromatic palette of pure black and white. This duotone foundation is interrupted only by a single, functional neon-yellow accent reserved for status badges, ensuring all visual attention remains on the specimen itself.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-quiet` | `#EAEAE9` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#808080` | secondary text |
| `--muted` | `#CCCCCC` | placeholder |
| `--accent` | `#FFFF00` | single accent |
| `--line` | `rgba(255,255,255,1.0)` | divider |

**Color principle:** Absolute stark contrast to elevate the inherent character and craftsmanship of the typefaces being presented.

The governing principle is absolute stark contrast, using color not as decoration but as a tool to elevate form.

## 3. Typography

Typography is both subject and narrator. The specimens themselves are predominantly transitional-serif and didone-serif, presented in high-contrast specimens, while the UI navigation adopts a strict mono-like geometric sans. A consistent 400 weight across all interface text maintains a neutral, editorial voice that defers to the display type.

- **Display:** didone-serif
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 100px | 0.95 | 400 | -2px | hero specimen names and large scale showcases |
| heading | 56px | 1.0 | 400 | -1px | secondary specimen headlines and large grid labels |
| body | 14px | 1.4 | 400 | 0 | navigation links, small UI text, and specimen details |

**Type rules:**
- Maintain high contrast by strictly using white text on black backgrounds for all specimens.
- Utilize extreme tracking (negative letter-spacing) on large-scale display typography to tighten visual density.
- Reserve bold weights strictly for specific specimen showcases, keeping the UI strictly at a 400 weight.

## 4. Spacing

Spatial rhythm is governed by a strict 7-point base unit, creating a highly constrained grid that structures all padding, gaps, and margins with mathematical rigor.

- **Base unit:** 7px
- **Scale:** 7 / 14 / 28 / 56 px
- **Rhythm:** Strict 7-point base unit applied to all padding, gaps, and margins, creating a highly constrained spatial grid.

## 5. Surfaces

Surfaces are rendered with flat, clean edges, rejecting any depth cues from shadows or 3D effects. The primary interaction is graphic, using dashed outlines and occasional 1px or 2px solid strokes to define state, all within a framing container with a distinctive 24px corner radius.

- **Radius:** sm 0px · md 0px · lg 24px · pill 999px
- **Borders:** Flat, clean edges or dashed outlines (used in the hero graphic), with occasional 1px or 2px solid strokes for interactive grid states.

## 6. Layout

The layout skeleton is a strict two-column asymmetric grid on desktop, designed for dramatic juxtaposition. This structure completely collapses into a single, continuous vertical stack on mobile, prioritizing a focused, linear reading of the specimens.

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

**Skeleton:** A strict two-column asymmetric grid on desktop that completely collapses into a single continuous vertical stack on mobile.

## 7. Motion & Interaction

Motion philosophy is one of deliberate, smooth transformation. All structural slides and state changes are governed by a specific cubic-bezier easing curve, with durations between 0.45s and 0.6s creating a sense of controlled, purposeful transition rather than playful animation.

- **Durations:** micro 220ms · small 400ms · medium 600ms
- **Easing:** `cubic-bezier(0.52, 0.07, 0.2, 0.99)`
- **Patterns:**
  - Smooth cubic-bezier easing applied to all structural transforms and container slides.
  - Strict 0.45s to 0.6s transition durations for primary carousel and grid state changes.
  - Instantaneous cursor updates to custom SVG arrows when hovering over interactive specimen zones.

- **Hover:** Custom SVG cursors (left and right arrows) replace the default pointer to indicate interactive carousel or grid navigation.
- **Click:** Directs to specimen detail pages or advances the image carousel, maintaining a seamless state change.
- **Transition:** A 0.45s or 0.6s transform transition with a specific custom cubic-bezier easing curve.
- **Keyboard:** Standard tab navigation likely applies, though custom cursors suggest a heavy reliance on mouse/trackpad.

## 8. Voice & Don'ts

The editorial voice is expert, minimalist, and supremely confident. It is communicated through unapologetically large, highly tracked-out specimen names and subtle text links, with a complete avoidance of standard button aesthetics to maintain focus.

- **Tone:** Expert, minimalist, and supremely confident.
- **Headline style:** Unapologetically large, highly tracked-out specimen names that function more as visual anchors than mere headings.
- **CTA style:** Subtle, non-intrusive text links that deliberately avoid standard button aesthetics to keep the focus on the type.
- **Avoid:** Avoid using standard HTML buttons or brightly colored UI elements that would distract from the specimens. / Avoid multi-column text blocks; keep text strictly to single lines or very short, high-impact bursts. / Avoid introducing any decorative elements or illustrations that are not actual type specimens.

### Don'ts
- ❌ Don't introduce secondary colors — screenshot shows a strictly achromatic black and white palette, save for a single functional yellow badge.
- ❌ Don't use bold or heavy UI weights — screenshot shows all navigation and UI elements rendered in a consistent 400 weight.
- ❌ Don't apply drop shadows or 3D effects — screenshot shows completely flat, graphic surfaces with no depth cues.
- ❌ Don't use rounded corners on cards — screenshot shows the black specimen containers fitting perfectly square within a 24px radius outer frame.
- ❌ Don't create dense text paragraphs — screenshot shows the UI relies almost entirely on massive display typography and sparse navigation links.
- ❌ Don't use default browser cursors on interactive zones — screenshot clearly demonstrates custom arrow cursor images for left/right navigation.

The system deliberately refuses secondary colors, bold UI weights, decorative elements, and dense text blocks, upholding a discipline where restraint is the primary design tool.

## System Prompt (paste into AI tool)

```
205TF is a premium digital type foundry website that utilizes a stark, minimalist black-and-white aesthetic to let its font specimens speak for themselves. The UI relies on a strict 7-point spacing grid and a 12-column layout, ensuring a highly structured yet dramatic presentation. Key colors are limited to pure black (#000000) and white (#FFFFFF), with a solitary high-contrast yellow (#FFFF00) used sparingly for status badges like 'Updated'. The typography categories are predominantly transitional-serif and didone-serif, though the UI navigation is set in a mono-like geometric sans. Critical constraints include: never introduce secondary or decorative colors, maintain a strict 400 font weight across all standard UI elements, and avoid traditional button components in favor of custom SVG cursors and text links to preserve the gallery-like purity of the layout.
```