# Studiothomas · Design system migration spec

> Source: https://studiothomas.co.uk  ·  Curated by OpenDesign  ·  en

> Excellent example of typography-driven minimalism with a bold, confident signature.

## 1. Identity DNA

The system is a gallery of bold work with a loud signature color. It operates as a minimalist design studio site where massive geometric sans-serif typography acts as the primary structure, supported by a strict palette of off-white, black, and a single vibrant orange accent.

**One-liner:** Minimalist design studio site relying on massive typography and a single vibrant orange accent.
**Keywords:** design studio · bold · minimalist · premium · confident
**Analogy:** A gallery of bold work with a loud signature color.

## 2. Color

The palette is a strict, high-contrast monochrome base of off-white and black, activated by a single vibrant orange focal point. This configuration creates immediate hierarchy and a memorable signature.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#EBE9E3` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#767676` | placeholder |
| `--accent` | `#FF4F00` | single accent |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High contrast monochrome base with a single vibrant orange focal point.

The principle is restraint: the orange accent is deployed with deliberate sparingness to command attention against the stark backdrop.

## 3. Typography

The type voice is confident and unadorned, built entirely on the declared Moderat typeface family. A heavy reliance on font weight 400 for both display and body creates a unified, editorial starkness.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 1.15 | 400 | -1px | Hero headline |
| h1 | 86px | 1.2 | 400 | -0.5px | Section titles |
| h2 | 40px | 1.2 | 400 | 0 | Subheads |
| body | 16px | 1.6 | 400 | 0.165px | Body text |

**Type rules:**
- Use the declared Moderat typeface family.
- Maintain a heavy reliance on font weight 400 for display and body.
- Keep letter-spacing tight for large headlines.

## 4. Spacing

The rhythm is set by generous whitespace, with explicit padding blocks of 40px and 100px establishing generous breathing room between content zones.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 40 / 64 / 100 px
- **Rhythm:** Generous whitespace with explicit padding blocks (40px, 100px).

## 5. Surfaces

Depth is conveyed through absence; surfaces are defined by sharp, 1px black lines used sparingly for dividers rather than by shadow or bevel. The design maintains a flat, graphic integrity.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Sharp, 1px black lines used sparingly for dividers.

## 6. Layout

The skeleton is a sequence of full-width, edge-to-edge blocks, beginning with a massive solid color hero. This structure frames project imagery and centered typography with uncompromising horizontality.

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

**Skeleton:** Full-width hero block followed by edge-to-edge project imagery.

## 7. Motion & Interaction

Motion is functional and restrained, philosophy is one of subtle transformation. It relies on color and opacity transitions for interactive feedback and transform-based effects for cursor or hover states, avoiding decorative flourish.

- **Durations:** micro 150ms · small 300ms · medium 750ms
- **Easing:** `cubic-bezier(0.55, 0.055, 0.675, 0.19)`
- **Patterns:**
  - Color and opacity transitions on interactive elements.
  - Transform-based cursor or hover effects.

- **Hover:** Color transitions using ease-in-out.
- **Click:** Subtle linear opacity shifts.
- **Transition:** All properties generally transition on interactive elements.
- **Keyboard:** Standard browser focus outlines.

## 8. Voice & Don'ts

The editorial voice is confident, minimal, and professional, communicated through massive, lowercase or sentence-case geometric sans headlines. Calls-to-action are subtle text links, letting the work and typography speak.

- **Tone:** Confident, minimal, professional.
- **Headline style:** Massive, lowercase or sentence-case geometric sans.
- **CTA style:** Subtle text links.
- **Avoid:** Clutter / Decorative gradients / Rounded corners

### Don'ts
- ❌ Don't use multiple accent colors — the screenshot shows a strict orange accent (#FF4F00).
- ❌ Don't use serif fonts — the screenshot shows a geometric sans-serif (Moderat).
- ❌ Don't add shadows or rounded corners to main blocks — the screenshot shows sharp edges.
- ❌ Don't use bold font weights for headlines — the screenshot shows font weight 400.
- ❌ Don't add decorative icons or graphics — the screenshot shows typography-only design.
- ❌ Don't use wide letter-spacing for headlines — the screenshot shows tight negative tracking.

They deliberately do not use clutter, decorative gradients, rounded corners, serif fonts, or bold headline weights.

## System Prompt (paste into AI tool)

```
This is a minimalist design agency site featuring massive geometric sans-serif typography and a strict color palette of off-white (#EBE9E3), black (#000000), and a vibrant orange (#FF4F00). The layout uses generous whitespace and full-width blocks to showcase work. For any new pages, ensure large typography remains the hero, maintain the specific orange accent sparingly, and never use serif fonts, rounded corners on layout blocks, or bold font weights for headlines.
```