---
name: Thoughtlab
description: "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."
version: alpha

colors:
  background: "#000000"
  primary: "#ffffff"
  secondary: "#cccccc"
  tertiary: "#fc1c46"
  neutral: "#4c4c4c"
  line: "rgba(204, 204, 204, 0.2)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 91px
    lineHeight: 0.9
    fontWeight: 700
    letterSpacing: "-2px"
  h1:
    fontFamily: grotesque-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2px"
  h2:
    fontFamily: grotesque-sans
    fontSize: 27px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 14.4px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 2px
  md: 4px
  lg: 8px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Category-First Brand + Product Studio

*A high-end brand consultancy that designs market categories and builds the flagship digital products to prove them.*

## Colors

High-contrast monochrome foundation with a single bold red accent.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`#cccccc`)** — uses `ink-soft` token
- **Accent (`#fc1c46`)** — uses `accent` token
- **Muted (`#4c4c4c`)** — uses `muted` token
- **Borders (`rgba(204, 204, 204, 0.2)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Consistent 4px base grid used for padding and margins, with large vertical spacings (e.g., 198px, 288px) for dramatic section breaks.

## Elevation & Depth

- rgb(128, 128, 128) 0px 0px 5px 0px
- Borders: 1px solid rgba(204, 204, 204, 0.2)

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 8px
- `pill`: 9999px

## Components

- **button:** Pill-shaped primary buttons with high-contrast color.
- **card:** Minimalist cards, often borderless or with subtle borders.
- **chip:** N/A
- **input:** N/A
- **hero:** Full-viewport dark hero with massive typography and a central 3D abstract element.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```