# Studiolathe · Design system migration spec

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

> This site exemplifies extreme design restraint and rational grid systems, serving as a perfect reference for minimalist, typography-driven agency portfolios.

## 1. Identity DNA

The system operates like a clean studio ledger, where categorized inventory is recorded with disciplined precision. Its identity is rational and architectural, defined by extreme restraint and a grid-based structure.

**One-liner:** A disciplined, grid-based portfolio directory with surgical restraint.
**Keywords:** minimal · rational · disciplined · architectural
**Analogy:** A clean studio ledger with categorized inventory

## 2. Color

The palette is a high-contrast monochrome over a warm neutral ground, establishing a refined and airy field. This extreme restraint ensures content remains the sole focus, devoid of decorative color.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F6F4F2` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#999999` | placeholder |
| `--line` | `rgba(218, 218, 218, 1)` | divider |

**Color principle:** High-contrast monochrome over a warm neutral ground

The principle is surgical, using only what is necessary to separate figure from ground.

## 3. Typography

Typography employs a consistently light-weight system sans-serif, creating a voice that is direct and unadorned. The scale is used functionally for navigation and list headings, reinforcing the rational hierarchy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 16.88px | 1.3 | 300 | -0.04px | Navigation and list headings |

## 4. Spacing

Rhythm is established through consistent vertical spacing between list items, creating a steady, predictable cadence for scanning.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** consistent vertical spacing between list items

## 5. Surfaces

Surfaces are flat, with a 1px solid border as the sole means of delineation. There are no shadows or elevation, maintaining the strict two-dimensional grid.

- **Radius:** sm 5px · md 5px · lg 5px · pill 999px
- **Borders:** 1px solid

## 6. Layout

The skeleton is a disciplined, left-aligned directory. Project names anchor the left margin while categorized tags align to the right, all anchored by a three-column footer.

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

**Skeleton:** Left-aligned text list with right-aligned tags and 3-column footer

## 7. Motion & Interaction

Motion philosophy is one of subtlety, using complex cubic-bezier timing functions for state transitions rather than obvious animations. Durations are brief and purposeful, applied with surgical restraint.

- **Durations:** micro 100ms · small 350ms · medium 500ms
- **Easing:** `cubic-bezier(0.77, 0, 0.18, 1)`

- **Hover:** Cursor changes to pointer for clickable list items and tags
- **Click:** Standard browser interaction
- **Transition:** Complex cubic-bezier transitions on state changes
- **Keyboard:** Standard focus management

## 8. Voice & Don'ts

The editorial voice is professional, understated, and direct, matching the visual tone of the system. Headlines are unadorned, and calls-to-action are minimal tags.

- **Tone:** Professional, understated, and direct
- **Headline style:** Direct and unadorned
- **CTA style:** Minimal tags with uppercase text
- **Avoid:** decorative elements / promotional language / visual clutter

### Don'ts
- ❌ Don't use decorative elements — screenshot shows pure text and outlined tags.
- ❌ Don't use bright accent colors — screenshot shows only black, white, and neutral grays.
- ❌ Don't use heavy shadows — screenshot shows flat surfaces with no elevation.
- ❌ Don't use bold or heavy font weights — screenshot shows consistently light typography.
- ❌ Don't use complex card layouts — screenshot shows a simple, flat list structure.
- ❌ Don't use large hero images — screenshot shows a purely textual interface.

The system deliberately omits decorative elements, bright accents, and complex layouts to preserve its rational, directory-like purity.

## System Prompt (paste into AI tool)

```
Studio Lathe is a minimalist design and development agency portfolio presented as a curated directory. The design is defined by extreme restraint, featuring a warm neutral background (#F6F4F2) and pure black text (#000000). Typography is light-weight system sans-serif, creating a refined, airy aesthetic. The layout is strictly grid-based with a simple list of projects and outlined uppercase tags. Critical design rules: maintain extreme minimalism, avoid any visual decoration, keep typography light, and preserve the rigid, rational structure of the directory layout.
```