---
title: "ThoughtLab design system"
variant: extended
source: https://www.thoughtlab.com/
captured_at: 2026-10-12
theme: dark
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/thoughtlab-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# ThoughtLab · Design System

> A stark stage for category-defining ideas.

**Theme:** dark · **Industry:** agency · **Source:** https://www.thoughtlab.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

ThoughtLab’s homepage pairs a near-black canvas and oversized editorial headlines with a vivid, iridescent 3D centerpiece. Restrained navigation and a single hot-pink contact button keep the focus on the studio’s category-first proposition.

## North star

Keep the interface nearly monochrome and let one oversized message overlap a singular, vivid hero visual.

## Overview

The page uses #000000 as an uninterrupted canvas, giving the hero room to feel cinematic rather than sectioned into conventional panels. Large uppercase display text sits left of center, with the iridescent organic 3D form layered across it; the image adds blue, violet, and warm edge colors, but these belong to the artwork rather than the measured brand palette. #cccccc carries the main headline and supporting copy, while #ffffff is reserved for smaller navigation and button text. The bright #fc1c46 Contact Us pill is the key interface accent and a compact counterpoint to the otherwise monochrome page. Sui provides a consistent typographic voice: tightly tracked, heavy display lettering contrasts with modest, regular-weight supporting text. The header spreads the logo, studio descriptor, CTA, and menu across the top. Broad areas of empty black space, a centered scroll cue, and minimal visible dividers preserve focus on the headline and hero artwork.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Stage Black | `#000000` | `--color-stage-black` | surface | Full-page canvas and uninterrupted hero backdrop. |
| Soft Silver | `#cccccc` | `--color-soft-silver` | neutral | Primary headline, supporting copy, studio descriptor, and project link text. |
| Signal Pink | `#fc1c46` | `--color-signal-pink` | accent | The Contact Us button and small logo mark provide concentrated brand color. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Small navigation and Contact Us button lettering against dark backgrounds. |

### Semantic aliases

`--color-canvas` → `#000000` (Stage Black) · `--color-text` → `#cccccc` (Soft Silver) · `--color-text-muted` → `#ffffff` (Clean White) · `--color-accent` → `#fc1c46` (Signal Pink) · `--color-on-accent` → `#ffffff` (Clean White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#cccccc` | `#000000` | 13.08:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#fc1c46` | `#000000` | 5.39:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| sui | `--font-body` | webfont | 400, 700, 500 | Display headline, navigation, body copy, links, and button labels. | Inter |

- **sui:** Use bold uppercase display lettering with -0.02em tracking; keep supporting copy and navigation regular-weight and restrained.

### Type scale — Custom (ratio ≈ 1.866, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 91px | 700 | 0.92 | -0.02em | uppercase | sui | Oversized uppercase hero statement, bold and tightly tracked. |
| h1 | 27px | 400 | 1.15 | 0 | — | sui | Primary supporting hero sentence beneath the headline. |
| h2 | 18px | 400 | 1.15 | 0 | — | sui | Secondary section headings and supporting statements. |
| body | 14px | 400 | 1.15 | 0 | uppercase | sui | Compact uppercase labels and small supporting text. |
| button | 14px | 500 | 2.14 | 0 | — | sui | Contact Us CTA label. |
| nav | 18px | 400 | 1.15 | 0 | — | sui | Studio descriptor and header navigation text. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 4, 9, 22, 30, 43 px.
- Section rhythm 216px · element gap — · card padding — · max content width 1188px.

A spacious, single-column hero sits within a page canvas measured at a maximum width of 1188px. The header aligns the logo left, studio descriptor near the center, and CTA plus menu to the right. In the hero, left-aligned headline and explanatory copy occupy the left portion while the large 3D form overlaps them from the right. The section uses generous measured rhythm, with a small scroll cue centered near the bottom. Keep the composition sparse; there are no visible card grids or section bands in the supplied page view.

## Shape & elevation

- Radius: button `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.75s cubic-bezier(0.19, 1, 0.22, 1)` on interactive elements.

The measured interface is essentially flat: no shadows, card surfaces, or border system are recorded. Use the black canvas as the main depth field and create layering through the overlap between typography and the 3D artwork. The Contact Us button is a solid accent pill, not a raised control.

## Imagery

A single large, soft-edged 3D form dominates the hero, framed against black and layered over the headline. Its dark interior and luminous blue, violet, and warm rim create the page’s strongest visual contrast. Treat those hues as artwork rather than additional interface colors. Keep the image oversized and atmospheric; the supplied view shows no photography or illustration grid.

## Components

### Header

Place the logo and mark at left, the 18px regular studio descriptor across the middle, then the Contact Us pill and compact menu control at right.

### Hero headline

Set the main message in 91px bold uppercase Sui, with 0.92 line height and -0.02em tracking; align it left and let the artwork cross its right edge.

### Supporting copy

Use regular Sui text beneath the headline, in a restrained two-line block that remains readable against the black canvas.

### Contact Us button

Use #fc1c46 fill, #ffffff 14px medium text, a fully rounded 9999px radius, and measured horizontal padding of 30px.

### Hero artwork

Layer one oversized, dark 3D form with an iridescent rim behind and across the headline; its color is image content, not interface palette.

### Scroll cue

Center a small, muted scroll instruction low in the hero without enclosing it in a badge or panel.

### Measured component styles

- **Primary button** (“Contact Us”): background #fc1c46 · text #ffffff · radius 9999px · padding 0px 30px · 500 14px sui
- **Link** (“WANDER JAUNT Website & Video Innovative ”): transparent background · text #cccccc · radius 0px · padding 0px · 400 14.4px sui
- **Navigation item** (“Category-First Brand + Product Studio / ”): transparent background · text #cccccc · radius 0px · padding 0px · 400 18px sui

## Do

- Use #000000 as the dominant page canvas.
- Keep the header compact and spread its elements horizontally.
- Give the hero headline a bold uppercase editorial treatment.
- Layer the hero artwork across the headline.
- Reserve #fc1c46 for a focused primary action.
- Preserve generous empty space around the hero.
- Keep supporting text light and visually secondary.

## Don't

- Do not introduce colored section bands or card grids.
- Do not use the artwork’s iridescent hues as interface accents.
- Do not add decorative borders or shadows.
- Do not make the header compete with the hero message.
- Do not set every text element in the display style.
- Do not surround the scroll cue with a container.

## Agent prompt

Build a new ThoughtLab-style studio page on a #000000 Stage Black canvas. Use Sui, or a close sans-serif substitute, throughout. Create a bold uppercase hero headline with tight tracking and a regular-weight supporting statement; keep the text left aligned and let one oversized, atmospheric 3D visual overlap it. Treat the visual’s blue, violet, or warm iridescence as artwork only. Use #cccccc Soft Silver for primary copy, #ffffff Clean White for compact navigation and button lettering, and reserve #fc1c46 Signal Pink for one pill-shaped primary CTA. Arrange a restrained header with branding, studio descriptor, CTA, and menu. Maintain generous measured spacing, minimal chrome, flat surfaces, and a centered, unobtrusive scroll cue. Avoid panels, shadows, and extra interface colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-screen dark hero with a distributed header, left-aligned oversized copy, overlapping 3D artwork, and a centered scroll cue. | brand navigation, primary contact CTA, scroll cue | black canvas, oversized uppercase type, iridescent 3D overlap, pink pill button |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/thoughtlab-com