# Lineto · Design system migration spec

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

> An excellent example of extreme minimalism in design, where typography alone serves as the entire visual identity.

## 1. Identity DNA

The system operates as a digital type specimen book for a modern type foundry, a controlled environment where every typographic decision is the primary architectural element. This is a space built to present the Electa typeface family with clinical precision, functioning less as a website and more as an exhibition of form.

**One-liner:** A clean, monochrome type specimen interface showcasing the Electa typeface family.
**Keywords:** typography · foundry · type design · specimen · minimal
**Analogy:** A digital type specimen book for a modern type foundry

## 2. Color

The color system is a strict monochrome achromatic palette, using only pure black and white with a subtle off-white variant. This restriction ensures the complete visual hierarchy is constructed solely through typographic weight, scale, and negative space.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#FFFDF7` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#E0E0E0` | placeholder |
| `--line` | `rgba(0,0,0,0.12)` | divider |

**Color principle:** strict monochrome achromatic palette

The principle is absolute: color is not a tool for expression but a binary field for maximum typographic contrast.

## 3. Typography

The typographic voice is built on a precise dichotomy: a humanist-sans for navigation and interface elements, and a transitional-serif for the main specimen display. The system establishes a consistent 19px base, treating all body and specimen text with a uniform scale that prioritizes legibility and material presence over decorative hierarchy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 20px | 1.2 | 400 | 0.38px | Type specimen headers and navigation labels |
| body | 19px | 1.2 | 400 | 0.38px | Standard interface text and specimen labels |

**Type rules:**
- Base type size is 19px with 0.38px letter spacing
- Body text lineHeight is 23px
- Navigation and accent text lineHeight is 38px

## 4. Spacing

Spacing is governed by a tight grid built on 2px and 7.6px base units, creating a consistent and deliberate vertical rhythm for the typographic cascade.

- **Base unit:** 4px
- **Scale:** 2 / 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** tight grid with 2px and 7.6px base units

## 5. Surfaces

Surfaces are defined by their complete lack of ornament. Shadows and visible borders are absent, establishing depth through pure tonal contrast between the achromatic palette elements.

- **Radius:** sm 2px · md 19px · lg 19px · pill 999px
- **Borders:** no visible borders, strict monochrome edges

## 6. Layout

The layout skeleton is minimal and fixed: a header with logo and search anchors the top, while a fixed bottom bar contains the primary action. The central space is dedicated to a left-aligned, minimal scrolling body that hosts the massive typographic specimen cascade.

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

**Skeleton:** fixed header with logo and search, minimal scrolling body, fixed bottom action bar

## 7. Motion & Interaction

Motion is restrained and purposeful, used only to confirm interaction. Fades are achieved through slow 1.5-second opacity transitions, while functional layout changes use quick 0.2-second transitions for immediate feedback.

- **Durations:** micro 200ms · small 200ms · medium 1500ms
- **Easing:** `linear`
- **Patterns:**
  - opacity transitions for fades over 1.5s
  - width and visibility transitions for 0.2s

- **Hover:** pointer cursor on buttons and links
- **Click:** smooth transition triggers
- **Transition:** all properties transition over 0.2s linear
- **Keyboard:** text cursor on input fields

## 8. Voice & Don'ts

The editorial voice is minimal, clinical, and professional, matching the system's aesthetic. Headlines are direct and unpunctuated, with CTAs using imperative commands paired with simple icons.

- **Tone:** minimal, clinical, professional
- **Headline style:** direct, no punctuation, lowercase brand name
- **CTA style:** imperative with icons (Read More, See All)
- **Avoid:** excessive whitespace padding / colorful accents / decorative elements

### Don'ts
- ❌ don't use multiple font families — screenshot shows a single sans-serif and a single serif used exclusively
- ❌ don't add gradients or drop shadows — screenshot shows completely flat, matte black and white surfaces
- ❌ don't center the main text block — screenshot shows the specimen cascade strictly left-aligned
- ❌ don't use decorative imagery or photos — screenshot shows pure typography as the only visual element
- ❌ don't use large font sizes for the specimen — screenshot shows uniform 19px text for all body elements
- ❌ don't use rounded corners on the main buttons — screenshot shows fully pill-shaped buttons

The system deliberately forgoes decorative imagery, colorful accents, and variable typography, making the single typeface itself the sole visual and narrative element.

## System Prompt (paste into AI tool)

```
This is a type foundry specimen website for the Electa typeface by Lineto. The design is a minimalist, monochrome interface using only black and white. The primary font category is a humanist-sans for navigation and UI elements, with a transitional-serif used for the main type specimen display. Key colors are strictly #000000 and #FFFFFF, with a subtle off-white #FFFDF7 used in some specimen areas. The layout is left-aligned, fixed at the top and bottom with navigation and action bars. Critical constraints: never use colorful accents, never add decorative imagery, never use drop shadows, and strictly maintain the monochrome achromatic palette. Typography is the sole focus of the interface.
```
