# Thoughtlab · Design system migration spec

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

> Worth including as a masterclass in high-end agency branding, demonstrating how extreme typographic scale and a restricted palette can create a powerful, authoritative identity.

## 1. Identity DNA

The design system for Thoughtlab is built on the premise of a category-defining studio, where every visual decision reinforces a position of authority and scale. Its construction is analogous to a flagship building: the structure is defined by a stark, monochrome shell, with a single, precise accent marking the entrance.

**One-liner:** Category-First Brand + Product Studio
**Keywords:** Brand Strategy · Product Studio · Category Design · Flagship Experiences · 26 Years
**Analogy:** A high-end brand consultancy that designs market categories and builds the flagship digital products to prove them.

## 2. Color

The color system is a study in restraint, using a high-contrast monochrome foundation of pure black and white to establish clarity and focus. A single, vibrant red accent is reserved exclusively for primary calls to action, creating a clear and unambiguous hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#cccccc` | secondary text |
| `--muted` | `#4c4c4c` | placeholder |
| `--accent` | `#fc1c46` | single accent |
| `--line` | `rgba(204, 204, 204, 0.2)` | divider |

**Color principle:** High-contrast monochrome foundation with a single bold red accent.

The principle is absolute: color is not decorative, but functional, serving only to direct attention within a controlled field.

## 3. Typography

Typography operates as the primary structural element, employing the grotesque-sans category for all text to maintain a unified, authoritative voice. Display sizes are set with tight negative tracking and massive scale, creating a commanding presence that anchors the composition.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 91px | 0.9 | 700 | -2px | Main hero headline |
| h1 | 72px | 1.0 | 700 | -2px | Section headings |
| h2 | 27px | 1.2 | 400 | -0.5px | Subheadings and navigation |
| body | 14.4px | 1.15 | 400 | 0 | Body text and small UI elements |

**Type rules:**
- Use tight negative tracking on display sizes.
- Maintain high contrast between text and background.
- Strictly adhere to the grotesque-sans category for all text.

## 4. Spacing

Spacing follows a consistent 4px base grid, creating a reliable rhythmic foundation for all internal padding and margins.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid used for padding and margins, with large vertical spacings (e.g., 198px, 288px) for dramatic section breaks.

## 5. Surfaces

Surfaces are defined by their flatness and minimal detail, relying on subtle, low-opacity borders rather than heavy shadows to suggest depth. This approach maintains the integrity of the monochrome palette while providing necessary visual separation.

- **Radius:** sm 2px · md 4px · lg 8px · pill 9999px
- **Shadows:**
  - rgb(128, 128, 128) 0px 0px 5px 0px
- **Borders:** 1px solid rgba(204, 204, 204, 0.2)

## 6. Layout

The layout skeleton is built on full-viewport hero sections, where massive, left-aligned typography establishes the narrative. Large abstract elements, such as the central 3D orb, occupy the center and right, creating a dramatic interplay between text and form.

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

**Skeleton:** Full-width hero sections with text left-aligned and large graphical elements (like the 3D orb) occupying the center/right.

## 7. Motion & Interaction

Motion philosophy is one of precise, purposeful transformation rather than decoration. Smooth opacity and transform transitions govern scroll-based reveals, while more complex elements receive slow, deliberate animations to emphasize their crafted nature.

- **Durations:** micro 220ms · small 400ms · medium 750ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions for scroll-based reveals.
  - Slow width/transform animations for complex elements.

- **Hover:** Subtle opacity changes or cursor transformations.
- **Click:** Immediate feedback via state changes.
- **Transition:** All elements transition on hover/interaction with consistent cubic-bezier easing.
- **Keyboard:** Standard focus management.

## 8. Voice & Don'ts

The editorial voice is authoritative, confident, and premium, with a headline style that is direct and declarative. This tone is mirrored in the minimalist interaction model, which favors immediate feedback and consistent, sophisticated easing.

- **Tone:** Authoritative, confident, and premium.
- **Headline style:** Direct, declarative, and massive.
- **CTA style:** Simple and action-oriented (e.g., 'Contact Us').
- **Avoid:** Playful or casual language. / Small, timid typography. / Overly complex navigation.

### Don'ts
- ❌ Don't use light backgrounds — screenshot shows a strictly dark (black) background.
- ❌ Don't use a diverse color palette — screenshot shows only black, white, grays, and one red accent.
- ❌ Don't use serif fonts — screenshot shows exclusively grotesque-sans typography.
- ❌ Don't use small, thin headlines — screenshot shows massive, bold, tight-tracked display text.
- ❌ Don't use complex borders or shadows — screenshot shows flat surfaces with minimal, subtle borders.
- ❌ Don't use rounded corners extensively — screenshot shows mostly sharp or very slightly rounded edges.

The system deliberately omits playful language, timid typography, and overly complex navigation, opting instead for a disciplined focus on scale and clarity.

## System Prompt (paste into AI tool)

```
This is a high-end brand and product studio website with a premium, dark-mode aesthetic. The design relies on a strict monochrome palette of black (#000000) and white (#ffffff), with grays (#cccccc, #4c4c4c) for depth and a single vibrant red accent (#fc1c46) for CTAs. Typography is entirely grotesque-sans, featuring massive, bold, and tight-tracked headlines paired with clean, minimal body text. Layout is spacious and dramatic, using full-viewport sections and large vertical padding to create a sense of scale and importance. Critical donts: avoid light backgrounds, avoid using a wide color palette, avoid serif fonts, avoid small headline sizes, avoid complex UI patterns, and avoid busy or cluttered compositions. The site communicates authority and category leadership through its minimalist yet impactful visual language.
```