# Tttech Design System

> Technical precision meets industrial safety through a high-contrast monochrome foundation punctuated by deep electric blue signals.

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

## TL;DR
Tttech utilizes a "monochrome-plus" strategy where the primary interface is built on a high-contrast foundation of off-white `#f4f4fc` and deep charcoal `#1d1d1d`. The brand's technical authority is established through a signature typography weight of 300 (Light) for all major headings and display text using the Inter family. Saturated color is reserved for critical action moments and brand accents, specifically an electric blue `#211fc8` used for primary CTAs and key iconography. Geometry is characterized by extreme pill-shaped containers (100px radius) for buttons and content tags, contrasted against sharp-edged section containers.

## Signature DNA
1. **Lightweight Technical Display** (Inter weight 300 is used for all primary headings and display copy, creating a precise, engineered aesthetic rather than a bold marketing feel.)
2. **The "Safety Blue" Signal** (Saturated electric blue `#211fc8` is the only non-achromatic color used for functional UI elements like primary buttons and active states.)
3. **Hyper-Rounded Controls** (A 100px border radius is applied to all interactive pills and content tags, creating a soft, approachable layer over a rigid grid.)

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--foundation-canvas` | `#f4f4fc` | Page background, secondary button fills, card surfaces | 35 | 1.0 | Computed Style |
| `--foundation-ink` | `#1d1d1d` | Primary text, heading color, button labels | 32 | 1.0 | `--General-Primary-500-Base` |
| `--foundation-body` | `#212529` | Default body text, secondary headings | 20 | 1.0 | `--bb-primary-text` |
| `#ffffff` | `#ffffff` | Primary button text, clean surface backgrounds | 6 | 1.0 | `--bs-body-bg` |
| `#6c727a` | `#6c727a` | Muted secondary text, metadata | 16 | 1.0 | `--bs-secondary` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--accent-electric` | `#211fc8` | Primary CTA background, active links, brand icons | 12 | 1.0 | Brand Page |
| `--accent-navy` | `#021127` | Deep contrast text (decorative_only) | 12 | 0.8 | Computed Style |
| `--accent-soft-blue` | `#7978de` | De-emphasized brand text (decorative_only) | 4 | 0.6 | Computed Style |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter | 300, 400 | All headings, body, and UI | Inter (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 52px | 63px | normal | 300 | Section headers | `h2.section-header` |
| `{type.heading-lg}` | 28px | 34px | normal | 300 | Card titles | `div.card-title` |
| `{type.button-lg}` | 25px | 34px | normal | 400 | Secondary CTA | `a.btn.btn-secondary` |
| `{type.body-lg}` | 18px | 30px | normal | 400 | Intro paragraphs | `p` |
| `{type.button-md}` | 18px | 18px | normal | 400 | Primary CTA | `a.btn.btn-primary` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Standard content | `section.section` |
| `{type.link}` | 16px | 24px | normal | 300 | Inline links | `a` |

### Principles
1. **Headings never exceed weight 300.** The brand relies on size and contrast rather than thickness for hierarchy.
2. **Body copy is strictly weight 400.** No semi-bold or bold weights were captured in standard prose.
3. **Generous line-height for readability.** Body text maintains a 1.5x to 1.6x ratio (e.g., 18px/30px).

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.sm}` | 12px | 20 |
| `{space.md}` | 16px | 6 |
| `{space.lg}` | 24px | 31 |
| `{space.xl}` | 32px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Main sections, image containers | 82 occurrences |
| `{radius.md}` | 10px | Small UI surfaces | 7 occurrences |
| `{radius.pill}` | 100px | Buttons, category tags, interactive cards | 26 occurrences |

## Elevation
Not captured in source. The system appears flat, using color blocks and borders rather than shadows for depth.

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call-to-action
**Pages observed:** https://tttech.com
**Spec:** Background: `#211fc8` / Text: `#ffffff` / Radius: `100px` / Padding: `16px 32px` / Typography: `18px (400)`
**States observed:** Default | Hover: Not captured | Active: Captured

#### Secondary Button
**Role:** Alternative actions (e.g., "Our Story")
**Pages observed:** https://tttech.com
**Spec:** Background: `#f4f4fc` / Text: `#1d1d1d` / Radius: `100px` / Padding: `16px 32px` / Typography: `25px (400)`
**States observed:** Default | Active: Captured

### Tier 2: Patterns

#### Content Tag
**Role:** Filtering and categorization (e.g., "Safety & Cybersecurity")
**Pages observed:** https://tttech.com
**Spec:** Background: `#f4f4fc` / Text: `#1d1d1d` / Radius: `100px` / Padding: `12px 24px` / Typography: `16px (400)`
**States observed:** Default | Active: Captured

#### Industry Card
**Role:** Navigation to market segments
**Pages observed:** https://tttech.com
**Spec:** Background: `#f4f4fc` / Text: `#1d1d1d` / Radius: `0px` (sharp container) / Padding: `24px` / Icon color: `#211fc8`
**States observed:** Default | Active: Captured

### Tier 3: Surface-specific

#### Newsletter Band
**Role:** Footer-adjacent conversion
**Pages observed:** https://tttech.com
**Spec:** Background: `#211fc8` / Text: `#ffffff` / Radius: `0px` / Padding: `32px`
**States observed:** Default | Active: Captured

#### Navigation Bar
**Role:** Global site header
**Pages observed:** https://tttech.com
**Spec:** Background: `transparent` (over hero) | `#ffffff` (scrolled) / Text: `#ffffff` / Height: `~80px`
**States observed:** Default | Active: Captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1320px |
| Section Padding | 80px - 120px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; padding reduced to 16px; font sizes scale down. |
| Desktop | 1440px | Full horizontal menu; multi-column industry grids (6-up). |

## Imagery & decoration
Tttech uses high-quality industrial photography often featuring blue-tinted overlays or technical environments (clean rooms, aerospace). Decorative elements include thin line-art icons in `#211fc8` and large-scale typography used as a background element.

## Do's
- Use Inter weight 300 for all headlines to maintain the "engineered" look.
- Apply `#211fc8` only to functional, interactive elements.
- Use the 100px "pill" radius for all buttons and tags.
- Maintain the `#f4f4fc` off-white background to reduce screen glare compared to pure white.
- Keep section containers sharp (0px radius) to anchor the layout.

## Don'ts
- **Wrong:** Using `#0d6efd` (standard Bootstrap blue) for buttons. **Right:** Use `#211fc8`. **Reason:** The brand uses a specific saturated electric blue, not the default framework color.
- **Wrong:** Using Bold (700) weights for headings. **Right:** Use Light (300). **Reason:** Weight 300 is the signature DNA of the Tttech parent brand.
- **Wrong:** Applying rounded corners to main section backgrounds. **Right:** Keep them sharp (0px). **Reason:** The system contrasts pill-shaped controls against a rigid, sharp-edged grid.

## Similar brands
- Siemens (Industrial precision)
- ABB (Technical authority)
- Northrop Grumman (Aerospace/Defense aesthetic)

## Quick start

```css
/* CSS Variables */
:root {
  --tt-color-primary: #211fc8;
  --tt-color-ink: #1d1d1d;
  --tt-color-canvas: #f4f4fc;
  --tt-font-family: 'Inter', sans-serif;
  --tt-weight-display: 300;
  --tt-radius-pill: 100px;
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-brand-blue: #211fc8;
  --color-brand-dark: #1d1d1d;
  --color-brand-bg: #f4f4fc;
  --font-inter: "Inter";
  --radius-pill: 100px;
}
```

## Agent prompt examples
- "Create a hero section with a Light (300 weight) Inter heading and two pill-shaped buttons: one in electric blue (#211fc8) and one in off-white (#f4f4fc)."
- "Design a 3-column grid of cards using a 100px border radius for the tags inside them and a sharp 0px radius for the card containers."
- "Generate a navigation bar with a transparent background and white text, using Inter weight 400 for the links."

## Known gaps
- Hover states for buttons were not explicitly captured in the static evidence.
- Transition timings for the sticky navigation were not captured.
- Specific shadow tokens were not found; the system appears to rely on flat color blocks.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://tttech.com | 1440x900 | 2026-06-06 |
| Mobile Homepage | https://tttech.com | 390x844 | 2026-06-06 |