# T3.tech Design System

> Utilitarian industrial interfaces built on stark monochrome contrast, sharp geometry, and lightweight typography.

**Source:** https://t3.tech | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
T3.tech operates on a strict, industrial monochrome foundation. The system relies on high-contrast pairings of warm off-white (`#fff5eb`) and deep black (`#0d0a08`). Geometry is entirely sharp with 0px border radii across all components and containers. Typography pairs lightweight Inter (weight 300) for oversized display headings with tracked-out IBM Plex Mono for technical captions, reinforcing a utilitarian, engineering-focused aesthetic.

## Signature DNA
1. **Absolute Sharpness** (0px border radii on all elements, enforcing a brutalist and mechanical precision across the UI)
2. **Lightweight Display Type** (Inter at weight 300 for all headings from 90px down to 24px, creating stark contrast against heavy industrial photography)
3. **Monospace Technical Labeling** (IBM Plex Mono at 12px with 1.2px letter spacing used for captions and microcopy, grounding the brand in an engineering context)

## Family Map
Not applicable (no sub-brands).

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--background--primary` | `#fff5eb` | Primary light background, button text | 88 | 1.0 | `css_variable` |
| `--background--brand` | `#0d0a08` | Primary dark background, text, button bg | 60 | 1.0 | `css_variable` |
| `--_colors---all--neutral--700` | `#524b44` | Secondary text | 8 | 1.0 | `css_variable` |
| `--_colors---all--neutral--500` | `#bab4ad` | Tertiary text, borders, hover states | 1 | 1.0 | `css_variable` |
| `--_colors---all--neutral--800` | `#1f1b16` | Hover states | Not captured | Not captured | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--_colors---all--secondary--blue-300` | `#2565e5` | Accent (decorative) | Not captured | Not captured | `css_variable` |
| `--_colors---all--secondary--blue-600` | `#355698` | Accent (decorative) | Not captured | Not captured | `css_variable` |
| `--_colors---all--secondary--orange-300` | `#ffa958` | Accent (decorative) | Not captured | Not captured | `css_variable` |

### Semantic
Not captured in source.

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter | 300, 400 | Display, heading, body | Inter | OFL |
| IBM Plex Mono | 500 | Caption, technical labels | IBM Plex Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-1` | 90px | 107.904px | -1.7984px | 300 | Hero display | `h1.h1` |
| `display-2` | 56px | 67.2px | -1.12px | 300 | Section headers | `h3.h2.split` |
| `heading-1` | 32px | 38.4px | -0.64px | 300 | Subsection headers | `p.h4.split` |
| `heading-2` | 24px | 28.8px | -0.72px | 300 | Blockquotes | `blockquote.h5` |
| `heading-3` | 20px | 30px | normal | 400 | Small headers | `h2.p-20` |
| `heading-4` | 20px | 24px | -0.6px | 300 | Alternate small headers | `h2.h6` |
| `body-1` | 16px | 24px | normal | 400 | Primary body copy | `section.section.cc-top` |
| `caption-1` | 12px | 12px | 1.2px | 500 | Technical labels | `div.gsap_split_word` |

### Principles
1. Display typography must remain at weight 300 to maintain the editorial signature.
2. Letter spacing tightens significantly at larger sizes (up to -1.7984px at 90px).
3. Monospace type is reserved strictly for uppercase technical labels and captions.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `spacing-128` | 128px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-sharp` | 0px | All buttons, cards, and containers | 147 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All surfaces | Shadow array is empty |

## Components

### Tier 1: Foundational

#### Button Primary (Dark)
**Role:** Primary call to action on light backgrounds.
**Pages observed:** https://t3.tech
**Spec:** Background `#0d0a08` / Text `#fff5eb` / Border `#0d0a08` / Radius 0px / Padding 20px 16px / Typography 12px IBM Plex Mono / Shadow none
**States observed:** Default | Hover (`#1f1b16` background) | Focus: not captured | Active: not captured | Disabled: not captured

#### Button Secondary (Light)
**Role:** Primary call to action on dark backgrounds.
**Pages observed:** https://t3.tech
**Spec:** Background `#fff5eb` / Text `#0d0a08` / Border `#fff5eb` / Radius 0px / Padding 20px 16px / Typography 12px IBM Plex Mono / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 2: Patterns

#### Surface Outline
**Role:** Container for content on dark backgrounds.
**Pages observed:** https://t3.tech
**Spec:** Background transparent / Text `#fff5eb` / Border `#fff5eb` 1px / Radius 0px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Technical Caption
**Role:** Eyebrow labels and microcopy.
**Pages observed:** https://t3.tech
**Spec:** Background transparent / Text `#0d0a08` / Border none / Radius 0px / Padding 0px / Typography 12px IBM Plex Mono (weight 500, 1.2px tracking) / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 3: Surface-specific

#### Light Section
**Role:** Standard page canvas.
**Pages observed:** https://t3.tech
**Spec:** Background `#fff5eb` / Text `#0d0a08` / Border none / Radius 0px / Padding 128px / Typography Inter / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Dark Section
**Role:** Inverted page canvas for emphasis.
**Pages observed:** https://t3.tech
**Spec:** Background `#0d0a08` / Text `#fff5eb` / Border none / Radius 0px / Padding 128px / Typography Inter / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

## Layout
| Property | Value |
|---|---|
| Max width | Not captured in source |
| Grid columns | Not captured in source |
| Section padding | 128px |

## Responsive
Not captured in source.

## Imagery & decoration
Photography is full-bleed, high-contrast, and industrial. The brand avoids decorative illustrations, gradients, or soft shadows. Visual interest is generated entirely through stark macro-typography and grid alignment.

## Do's
* Do use exactly 0px border radius for all UI elements.
* Do use Inter at weight 300 for all headings 24px and above.
* Do track out IBM Plex Mono to 1.2px for captions.
* Do maintain high contrast by pairing `#fff5eb` directly with `#0d0a08`.
* Do use generous 128px vertical padding for major sections.

## Don'ts
* **Wrong:** Using `#2565e5` as a primary section background.
  **Right:** Using `#0d0a08` or `#fff5eb` as section backgrounds.
  **Reason:** `#2565e5` is an accent color; the parent brand relies on a strict monochrome foundation.
* **Wrong:** Applying a 4px border radius to buttons.
  **Right:** Applying a 0px border radius to buttons.
  **Reason:** The brand's signature is absolute sharpness; rounded corners dilute the industrial aesthetic.
* **Wrong:** Setting a 56px heading in Inter weight 600.
  **Right:** Setting a 56px heading in Inter weight 300.
  **Reason:** Heavy font weights destroy the editorial contrast required against the heavy photography.

## Similar brands
* Vercel (monochrome foundation, technical typography)
* Linear (sharp geometry, high contrast)
* Stripe (when using their terminal/hardware aesthetic)

## Quick start

**CSS Variables**
```css
:root {
  --background--primary: #fff5eb;
  --background--brand: #0d0a08;
  --_colors---all--neutral--700: #524b44;
  --_colors---all--neutral--500: #bab4ad;
  --_colors---all--neutral--800: #1f1b16;
  
  --font-display: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  
  --radius-sharp: 0px;
}
```

**Tailwind v4 @theme**
```css
@theme {
  --color-bg-primary: #fff5eb;
  --color-bg-brand: #0d0a08;
  --color-neutral-700: #524b44;
  --color-neutral-500: #bab4ad;
  
  --font-display: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  
  --radius-none: 0px;
}
```

## Agent prompt examples
1. "Create a hero section using `--background--primary`. Add a 90px heading in Inter 300 with -1.7984px letter spacing. Include a primary button with 0px radius."
2. "Build a dark feature block using `--background--brand`. Use a 12px IBM Plex Mono eyebrow with 1.2px letter spacing. Ensure all borders are 1px solid `#fff5eb`."
3. "Generate a split layout with an industrial image on the right. On the left, place a 56px heading in Inter 300 and a 16px body text block in Inter 400."

## Known gaps
Hover states for secondary buttons and focus/active states across all interactive elements were not captured in the source data. Grid column structures and specific responsive breakpoints are missing from the parsed evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://t3.tech | Desktop | 2026-06-06T05:01:05.468Z |