# Type Network · Design system migration spec

> Source: https://www.typenetwork.com  ·  Curated by OpenDesign  ·  en

> This site is worth including as a masterclass in editorial web design, demonstrating how high-contrast typography and extreme restraint can create a deeply premium and authoritative user experience.

## 1. Identity DNA

Type Network operates with the curatorial precision of a gallery and the transactional clarity of a marketplace. Its design system is built to frame high-end typography not as mere decoration, but as the primary artifact. The visual language must therefore be both a pedestal and a label, guiding the user with authority while remaining subordinate to the type itself.

**One-liner:** A refined editorial platform for premium typography licensing and foundry partnerships.
**Keywords:** typography · licensing · foundry · premium · editorial
**Analogy:** A curated gallery and marketplace for high-end typography, combining the prestige of a museum with the utility of a licensing platform.

## 2. Color

The color system is one of stark, binary contrast: a foundation of pure black and white establishes a formal, editorial field. A single, vibrant orange acts as a focused signal, marking the most critical interactive elements and headlines.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#111111` | secondary text |
| `--muted` | `#777777` | placeholder |
| `--accent` | `#F56900` | single accent |
| `--line` | `rgba(218, 218, 218, 1)` | divider |

**Color principle:** Stark, high-contrast black and white foundation with a single vibrant orange accent to highlight the core message.

The palette is a functional tool for hierarchy, not a source of decorative variety.

## 3. Typography

Typography is the system's central pillar, defined by a strict dialectic between display and body. A sharp Didone serif carries the expressive, headline voice, while a humanist sans-serif provides the neutral, readable body and interface text.

- **Display:** didone-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 96px | 1.0 | 400 | -1px | Hero headline |
| h1 | 24px | 1.33 | 400 | normal | Section title |
| body | 18px | 1.44 | 400 | normal | Main body text |
| small | 14px | 1.5 | 400 | normal | Metadata and navigation |

**Type rules:**
- Use Didone serif for large expressive display type to evoke classic editorial elegance.
- Use Humanist sans-serif for all body copy, navigation, and UI elements for clean readability.
- Maintain high contrast between display serif and sans-serif body text.

## 4. Spacing

Spatial rhythm is governed by a strict 4px baseline grid, creating a consistent and airy vertical cadence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A strict 4px baseline grid with generous vertical padding to maintain an airy, editorial feel.

## 5. Surfaces

Surfaces are defined by flat planes and thin, 1px borders, not by shadows or gradients. Depth is communicated through precise separation and generous whitespace.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Thin 1px solid borders in #DADADA or #CCCCCC, used strictly for subtle horizontal separation and card containment.

## 6. Layout

The layout is a single, wide column anchored by a restrained max-width. Content is segmented into distinct horizontal zones, clearly delineated by subtle hairline rules.

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

**Skeleton:** A wide single-column container with a max-width, featuring distinct horizontal sections separated by thin hairline borders.

## 7. Motion & Interaction

Motion is purely utilitarian, limited to smooth color transitions on interactive states. The goal is to provide calm, immediate feedback without disrupting the page's composed atmosphere.

- **Durations:** micro 150ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Color and background-color transitions on interactive elements.
  - Text-decoration-color transitions for links.

- **Hover:** Subtle color changes on interactive elements, often transitioning to the accent orange or darkening text.
- **Click:** Immediate visual feedback, maintaining the clean and understated interaction model.
- **Transition:** Smooth 0.15s transitions using a standard ease-out curve for color and border-color changes.
- **Keyboard:** Standard browser focus outlines on interactive elements.

## 8. Voice & Don'ts

The editorial voice is confident and authoritative, speaking as a curator of premium tools. Language is direct and refined, avoiding casual conversation to match the system's formal visual rigor.

- **Tone:** Confident, authoritative, and refined. Speaks as an expert curator of high-end design tools.
- **Headline style:** Direct, impactful, and often utilizes large serif type for maximum visual weight.
- **CTA style:** Subtle, understated ghost buttons with simple text and an arrow, allowing the typography to lead.
- **Avoid:** Avoid overly casual or conversational language. / Avoid dense, cluttered layouts without clear horizontal separation. / Avoid using sans-serif for large, expressive headlines. / Avoid using rounded borders excessively; keep corners sharp or only slightly rounded. / Avoid using drop shadows or heavy box shadows for depth. / Avoid using bright, multi-color palettes; maintain the strict black-white-orange scheme.

### Don'ts
- ❌ Don't use drop shadows — the screenshot shows flat surfaces separated only by thin 1px borders.
- ❌ Don't use rounded pill buttons for primary actions — the screenshot shows rectangular buttons with 4px radius.
- ❌ Don't use sans-serif for the main hero headline — the screenshot shows a large Didone serif font.
- ❌ Don't use a complex multi-color background — the screenshot shows a strictly white background.
- ❌ Don't use heavy, bold weights for body text — the screenshot shows weight 400 for all standard text.
- ❌ Don't use thick borders — the screenshot shows thin, subtle 1px borders in light gray.

The system deliberately excludes drop shadows, complex color palettes, and rounded UI elements to preserve its flat, typographic focus.

## System Prompt (paste into AI tool)

```
Type Network is a premium, curated marketplace for typography, acting as a liaison between world-class foundries and global enterprises. The visual system is defined by a high-contrast black and white base with a single vibrant orange (#F56900) accent. It combines a refined Didone-serif for expressive display headings with a clean humanist-sans for body copy. Key critical donts include: do not use drop shadows or complex gradients; do not use thick borders or heavy drop caps; do not use sans-serif for large display headlines. The layout relies on clean horizontal separation and generous whitespace to maintain an authoritative, editorial feel.
```
