# Testbox Design System

> Deep forest greens anchored by vibrant magenta accents, utilizing high-contrast typography and rounded geometric containers to signal infrastructure reliability.

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

## TL;DR
Testbox employs a "monochrome-plus" system where a dense primary green `#062106` acts as the functional black for text, surfaces, and borders. This is punctuated by a high-voltage magenta `#c63add` used for primary conversion actions and "Most Popular" highlights. The typography pairs the geometric **GT Walsheim Pro Medium** for massive display headlines (up to 90px) with **Inter** for functional UI and body copy. Layouts rely on generous 24px to 32px corner radii for cards and panels, creating a soft, approachable shell for technical "GTM Infrastructure" content.

## Signature DNA
1. **Forest Foundation:** The use of `#062106` (Dark Primary) instead of pure black for nearly all high-contrast elements, including hero backgrounds and primary text, creates a distinct brand depth (observed on all pages).
2. **The Magenta Pivot:** A single high-saturation accent `#c63add` is reserved strictly for primary CTAs and "Most Popular" pricing tiers, creating an unmistakable path to conversion (Pricing and Home pages).
3. **Geometric Softness:** Large-scale components use significant rounding (24px, 32px, and 50px) to contrast against the technical, data-driven subject matter (Home and About pages).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--dark-primary` | `#062106` | Primary surface, text, and button backgrounds | 393 | 1.0 | Computed Style |
| `--copy-primary` | `#111111` | Secondary high-contrast text | 115 | 1.0 | Computed Style |
| `--white` | `#ffffff` | Page canvas and inverted text | 274 | 1.0 | Computed Style |
| `--mint-cream` | `#ecf9f2` | Subtle section backgrounds (Pricing) | 1 | 1.0 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--pink` | `#c63add` | Primary CTA background, "Most Popular" tier | 17 | 1.0 | Computed Style |
| `--secondary` | `#5ec8aa` | Decorative borders and secondary surfaces | 17 | 1.0 | Computed Style |
| `--green-mint` | `#e0f2ef` | Background for feature cards | 9 | 1.0 | Computed Style |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `error-border` | `#e53935` | Validation/Error states (decorative_only) | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| GT Walsheim Pro Medium | 500 | Display Headlines | Jost | Proprietary |
| Inter | 300, 400, 500, 600, 700 | UI, Body, Subheadings | Inter (Google) | OFL |
| Archivo | 400 | Secondary Body | Archivo | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-mega` | 90px | 91.8px | -1.8px | 500 | Hero H1 | `h1#w-node-beb09b82...` |
| `display-xl` | 72px | 76px | -1.44px | 500 | Section Subheadings | `h2.home-subheading` |
| `display-lg` | 60px | 62px | -1.44px | 500 | Home Headings | `h2.home-heading` |
| `display-md` | 55px | 60px | -1.44px | 500 | Page Titles | `h2.testbox-title` |
| `heading-price` | 40px | 40px | -0.96px | 700 | Pricing Numbers | `h4.pricing-rate` |
| `heading-sm` | 30px | 36px | -0.3px | 600 | Card Headings | `h3.heading-8` |
| `body-lg` | 24px | 32px | normal | 400 | Intro Paragraphs | `p.left-para` |
| `body-md` | 18px | 24px | normal | 400 | Standard Body | `p.foundation-text` |
| `nav-link` | 16px | 25px | normal | 500 | Navigation | `div.on_hover_nav` |

### Principles
1. **Tight Tracking on Display:** All GT Walsheim headlines use negative letter spacing (-1.44px to -1.8px) to maintain density at large scales.
2. **Inter for Utility:** All interactive elements (buttons, nav, pricing tiers) use Inter to ensure legibility across weights.
3. **Dark Primary as Ink:** Text is rarely pure black; `#062106` is the preferred "ink" color for maximum brand cohesion.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `space-xs` | 4px | 10 |
| `space-sm` | 10px | 104 |
| `space-md` | 20px | 26 |
| `space-lg` | 32px | 14 |
| `section-gap` | 105px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-button` | 12px | Standard Buttons | `Rounded Button` component |
| `radius-card` | 16px | Pricing Cards | `radii` evidence |
| `radius-panel` | 24px | Feature Panels | `radii` evidence |
| `radius-section` | 32px | Large Container Cards | `Card` observed_once |
| `radius-pill` | 999px | Tags / Pill Buttons | `radii` evidence |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `shadow-soft` | `rgba(0, 0, 0, 0.05) 0px 4px 10px 0px` | Hovered Cards | `shadows` evidence |
| `shadow-deep` | `rgba(0, 0, 0, 0.12) 0px 8px 20px 0px` | Modals/Dropdowns | `shadows` evidence |

## Components

### Tier 1: Foundational

#### Magenta CTA
**Role:** Primary conversion action (Book a Demo, Get Started).
**Pages observed:** Home, Pricing, About.
**Spec:** Background `#c63add` / Text `#ffffff` / Radius `12px` / Padding `12px 17px` / Typography `Inter 16px 600`.
**States observed:** Default | Hover: captured | Active: captured.

#### Dark Surface
**Role:** High-impact section backgrounds (Hero, Footer).
**Pages observed:** Home, Pricing, About.
**Spec:** Background `#062106` / Text `#ffffff` / Border `0px` / Radius `0px`.
**States observed:** Default: captured.

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific product capabilities.
**Pages observed:** Home.
**Spec:** Background `#ffffff` / Text `#062106` / Border `2px solid #062106` / Radius `12px` / Padding `24px`.
**States observed:** Default: captured.

#### Pricing Tier
**Role:** Plan selection on pricing page.
**Pages observed:** Pricing.
**Spec:** Background `#ffffff` / Border `1px solid #e5e7eb` / Radius `16px` / Shadow `shadow-soft`.
**States observed:** Default | Featured (Magenta Border): captured.

### Tier 3: Surface-specific

#### Testimonial Card
**Role:** Social proof blocks.
**Pages observed:** Home.
**Spec:** Background `#ffffff` / Text `#111111` / Border `2px solid #062106` / Radius `24px` / Padding `16px`.
**States observed:** Default: captured.

#### FAQ Accordion
**Role:** Information disclosure.
**Pages observed:** Home.
**Spec:** Background `transparent` / Text `#062106` / Border-bottom `1px solid #062106` / Typography `Inter 22px 600`.
**States observed:** Default | Open: captured.

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Padding | 105px (Vertical) |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Desktop | 1440px | 3-column grids, 90px display type |
| Mobile | 390px | 1-column stack, display type scales to ~48px |

## Imagery & decoration
Testbox uses technical line-art (circuitry motifs) in `#5ec8aa` and `#c63add` to visualize "infrastructure." It avoids stock photography of people, preferring product-centric video and abstract geometric shapes.

## Do's
- Use `#062106` for all primary text to maintain brand depth.
- Apply `-1.44px` letter spacing to any headline over 50px.
- Use `12px` radius for all interactive buttons.
- Reserve `#c63add` strictly for the most important action on the page.
- Use `32px` radius for large content-holding containers.

## Don'ts
- **Wrong:** Using pure black `#000000` for body text. **Right:** Use `#062106`. **Reason:** Pure black flattens the forest-green brand palette.
- **Wrong:** Using magenta for secondary or "Cancel" buttons. **Right:** Use transparent or outlined styles. **Reason:** Magenta is the high-voltage conversion signal.
- **Wrong:** Mixing GT Walsheim and Inter in the same sentence. **Right:** GT Walsheim for headers, Inter for prose.

## Similar brands
- Vercel (monochrome depth)
- Linear (geometric precision)
- Old Wealthsimple (typography-first layout)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --testbox-dark-primary: #062106;
  --testbox-magenta: #c63add;
  --testbox-secondary: #5ec8aa;
  --testbox-white: #ffffff;
  --radius-card: 16px;
  --radius-panel: 24px;
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-primary: #062106;
  --color-accent: #c63add;
  --font-display: "GT Walsheim Pro", sans-serif;
  --font-sans: "Inter", sans-serif;
  --radius-xl: 24px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Testbox Magenta #c63add with 12px rounding and Inter SemiBold 16px text."
- "Create a feature card with a 2px border in #062106, 12px corner radius, and a GT Walsheim headline at 30px."
- "Design a hero section with a #062106 background and a 90px GT Walsheim headline with -1.8px letter spacing."

## Known gaps
- Hover states for secondary navigation items were not explicitly captured in the token set.
- Mobile-specific typography scale for mid-range headings (h3-h4) is partially inferred.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://testbox.com | 1440px | 2026-06-06 |
| Pricing | https://testbox.com/pricing | 1440px | 2026-06-06 |
| About | https://testbox.com/about | 1440px | 2026-06-06 |