# General Type Studio · Design system migration spec

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

> The site is a prime example of a typography-first design that uses large-scale imagery and text to create a memorable, specimen-like experience.

## 1. Identity DNA

The system operates as a digital specimen sheet, translating the tactile, hands-on craft of a type foundry workshop into a bold, photographic interface. It is an architecture of contrast, where massive typography and full-bleed imagery are the primary structural elements, not decoration.

**One-liner:** A bold, photographic type foundry portfolio that uses macro-imagery and massive display type.
**Keywords:** Type Foundry · Experimental · Playful · Craft
**Analogy:** A digital specimen sheet that feels like a physical, tactile workshop.

## 2. Color

Color is a disciplined tool of contrast, not expression. A strict monochrome palette of pure black and white forces focus onto the photographic content and the inherent form of the type specimens themselves.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#ffffff` | body text |
| `--muted` | `#222222` | placeholder |
| `--line` | `rgba(255,255,255,1.0)` | divider |

**Color principle:** Strict monochrome palette relying on photographic content for color.

The principle is absolute: let the subject matter, not the interface, provide the color.

## 3. Typography

The typographic voice is one of authoritative scale, using geometric sans-serif at monumental sizes for display purposes. This hierarchy is uncomplicated, reserving bold, large forms for hero sections and headlines, with a clean sans-serif maintaining clarity for all supporting UI and body text.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 400 | -1px | Hero Display |
| heading | 43px | 1.22 | 400 | 0px | Section Headline |
| body | 16px | 1.0 | 400 | 0px | Body Text |

**Type rules:**
- Use large, bold display type for hero sections.
- Use sans-serif for all UI and body text.
- Maintain tight leading for display typography.

## 4. Spacing

Spacing follows a strict 4px grid, creating a rhythmic and predictable undercurrent to the otherwise expressive layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Based on 4px increments with generous padding for sections.

## 5. Surfaces

Depth is communicated through flat, graphic contrast rather than simulated dimension. Structural dividers are rendered as thin white borders, providing clean separation without the use of shadows or bevels.

- **Radius:** sm 4px · md 0px · lg 0px · pill 999px
- **Borders:** Thin white borders for structural dividers.

## 6. Layout

The layout skeleton is defined by full-bleed photographic canvases, with text overlaid directly onto the imagery. This approach eliminates traditional containers, making the type itself the primary compositional element against the visual backdrop.

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

**Skeleton:** Full-bleed photographic backgrounds with text overlays.

## 7. Motion & Interaction

Motion is a subtle signal, not a spectacle. Transitions are limited to smooth opacity and background-color changes on interactive elements, preserving the static, impactful presence of the core typography and photography.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Fade-in
  - Color transition on hover

- **Hover:** Smooth color transitions on links and buttons.
- **Click:** Standard cursor interactions.
- **Transition:** Opacity and background-color transitions for interactive elements.
- **Keyboard:** Standard tab navigation.

## 8. Voice & Don'ts

The editorial voice is professional and playful, speaking with the authority of craft. It favors direct, text-based calls to action and large, bold headlines, often set in uppercase for emphasis.

- **Tone:** Authoritative, professional, yet playful.
- **Headline style:** Large, bold, often uppercase.
- **CTA style:** Minimal, text-based.
- **Avoid:** Clutter / Excessive decoration / Serif fonts for UI

### Don'ts
- ❌ don't use serif fonts for UI — screenshot shows geometric sans.
- ❌ don't use a colorful palette — screenshot shows strict monochrome.
- ❌ don't hide content behind complex navigation — screenshot shows clear, direct links.
- ❌ don't use rounded corners on cards — screenshot shows sharp edges.
- ❌ don't use subtle drop shadows — screenshot shows flat, graphic contrast.
- ❌ don't use small, cramped typography — screenshot shows large, expressive type.

The system deliberately avoids clutter, excessive decoration, and any visual element that would compete with the primary specimens.

## System Prompt (paste into AI tool)

```
General Type Studio is a type foundry website characterized by large, expressive typography and full-bleed photographic backgrounds. The design uses a strict monochrome palette of white on black (#000000, #ffffff). Typography is primarily geometric sans-serif, used at massive scales for hero sections. Key characteristics include full-viewport layouts, minimal UI elements, and a focus on the type specimens themselves. Critical donts: avoid serif fonts for UI, avoid colorful palettes, and avoid subtle decorative elements. The overall feel is bold, experimental, and visually driven.
```
