# Testmuai Design System

> A stark, high-contrast monochrome system built on rigid geometry and technical typography.

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

## TL;DR
Testmuai employs a stark, high-contrast monochrome system built entirely on black, white, and grayscale tones. The visual language relies heavily on sharp 0px geometry for structural elements, reserving subtle 6px rounding for specific interactive cards and inputs. Typography is exclusively Manrope, leveraging lighter weights (300/400) for large display text and medium weights for structural hierarchy. The system prioritizes density and clarity over decorative flourishes, avoiding saturated colors entirely in its UI foundation.

## Signature DNA
1. **High-contrast monochrome palette** (The primary action color is pure black `#000000` against white `#ffffff` backgrounds, creating a severe, utilitarian aesthetic. Observed across all core pages.)
2. **Sharp geometry dominance** (639 occurrences of 0px border radius dictate a rigid, grid-like structure, contrasting with sparse 6px rounded cards. Observed on homepage and pricing.)
3. **Light-weight display typography** (Manrope at 300 and 400 weights is used for display sizes 32px–56px with negative letter spacing down to -2px, creating a clean, technical editorial feel. Observed in hero sections.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| None | N/A | N/A | N/A | N/A |

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-foundation-white` | `#ffffff` | button_text, button_bg, text, surface_bg, border | 185 | 1.0 | computed_style |
| `color-foundation-black` | `#000000` | surface_bg, text | 5 | 1.0 | computed_style |
| `color-foundation-gray-900` | `#121212` | text, button_bg, border, button_text, surface_bg | 293 | 0.8 | computed_style |
| `color-foundation-gray-700` | `#333333` | text | 8 | 0.6 | computed_style |
| `color-foundation-gray-600` | `#4a4a4a` | text, button_text | 236 | 0.8 | computed_style |
| `color-foundation-gray-400` | `#b8b7b4` | text | 26 | 0.8 | computed_style |
| `color-foundation-gray-300` | `#d3d2cd` | border | 52 | 0.8 | computed_style |
| `color-foundation-gray-200` | `#d8d8d8` | border | 4 | 0.6 | computed_style |
| `color-foundation-gray-100` | `#e7e6df` | button_bg, surface_bg | 9 | 0.6 | computed_style |
| `color-foundation-gray-50` | `#f5f4f0` | surface_bg, button_bg | 19 | 0.8 | computed_style |
| `color-foundation-blue-50` | `#eff4fc` | surface_bg | 3 | 0.6 | computed_style |

### Accent
Not captured in source.

### Semantic
Not captured in source.

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Manrope | 200, 300, 400, 500, 600 | heading, display, body | Manrope | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `typography-display-xl` | 56px | 64px | -1.28px | 400 | Hero heading | `p.testmuai-herofold-heading.font-normal` |
| `typography-display-lg` | 48px | 58px | -2px | 400 | Section heading | `h2.testmuai-heading-48.font-normal` |
| `typography-display-md` | 44px | 58px | -2px | 500 | Pricing heading | `h2#free-product-price` |
| `typography-heading-xl` | 36px | 44px | normal | 400 | Sub-heading | `p.text-white.text-[36px]` |
| `typography-heading-lg` | 32px | 40px | -0.3px | 300 | List items | `li:nth-of-type(1)` |
| `typography-heading-md` | 28px | 35px | -0.4px | 500 | Description heading | `p.asSeenDescription.font-medium` |
| `typography-heading-sm` | 24px | 32px | normal | 400 | Card titles | `p.text-white.testmuai-description-32` |
| `typography-heading-xs` | 20px | 28px | 1px | 600 | Small titles | `p.text-[20px].leading-[28px]` |
| `typography-body-lg` | 18px | 28px | normal | 400 | Lead body | `p.z-10.text-[#121212]` |
| `typography-body-md` | 16px | 24px | normal | 400 | Default body | `div.wrapper.bg-[#F5F4F0]` |
| `typography-body-sm` | 14px | 22px | normal | 400 | Secondary body | `p.text-[14px].leading-[22px]` |
| `typography-caption` | 12px | 18px | normal | 300 | Small labels | `p.text-[12px].font-light` |

### Principles
- **Negative tracking on display:** Manrope pulls tight (-1.28px to -2px) at sizes 44px and above to create a solid, technical block of text.
- **Light weights for scale:** Display sizes rely on 300 and 400 weights rather than bolding, maintaining an editorial feel.
- **Open tracking on small caps/labels:** Smaller headings (20px) and captions (12px) use positive letter spacing (0.11px to 1px) for legibility.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `spacing-1` | 4px | 44 |
| `spacing-1.5` | 6px | 41 |
| `spacing-2` | 8px | 28 |
| `spacing-2.5` | 10px | 63 |
| `spacing-3` | 12px | 21 |
| `spacing-4` | 16px | 48 |
| `spacing-5` | 20px | 56 |
| `spacing-6` | 24px | 37 |
| `spacing-8` | 32px | 27 |
| `spacing-12` | 48px | 8 |
| `spacing-16` | 64px | 8 |
| `spacing-20` | 80px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-sharp` | 0px | Structural surfaces, standard buttons | 639 occurrences |
| `radius-input` | 6px | Interactive cards, rounded buttons | 23 occurrences |
| `radius-control` | 8px | Secondary controls | 9 occurrences |
| `radius-pill` | 9999px | Badges, pill buttons | 4 occurrences |

## Elevation
Not captured in source.

## Components

### Tier 1: Foundational

#### Button (Standard)
**Role:** Primary and secondary actions favoring sharp geometry.
**Pages observed:** https://testmuai.com, https://testmuai.com/about
**Spec:** Background `#e7e6df` / Text `#4a4a4a` / Border 1px `#d3d2cd` / Radius `0px` / Padding `0px` / Typography `16px` / Shadow `none`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

#### Rounded Button
**Role:** Emphasized actions requiring visual separation from the rigid grid.
**Pages observed:** https://testmuai.com, https://testmuai.com/pricing, https://testmuai.com/about
**Spec:** Background `#ffffff` / Text `#121212` / Border 1px `#ffffff` / Radius `6px` / Padding `10px 20px` / Typography `18px` / Shadow `none`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

#### Pill Button
**Role:** Tertiary actions or toggle controls.
**Pages observed:** https://testmuai.com, https://testmuai.com/pricing
**Spec:** Background `transparent` / Text `#4a4a4a` / Border 1px `rgba(255, 255, 255, 0.24)` / Radius `9999px` / Padding `0px` / Typography `16px` / Shadow `none`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

### Tier 2: Patterns

#### Card
**Role:** Content containment for pricing tiers and features.
**Pages observed:** https://testmuai.com/pricing, https://testmuai.com/about
**Spec:** Background `#ffffff` / Text `#121212` / Border 1px `#d3d2cd` / Radius `6px` / Padding `10px 20px` / Typography `18px` / Shadow `none`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

#### Surface (Outlined)
**Role:** Structural division without background fill.
**Pages observed:** https://testmuai.com, https://testmuai.com/pricing, https://testmuai.com/about
**Spec:** Background `transparent` / Text `#4a4a4a` / Border 1px `#d3d2cd` / Radius `0px` / Padding `0px` / Typography `16px` / Shadow `none`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

### Tier 3: Surface-specific

#### Surface (Filled)
**Role:** Background banding for alternating sections.
**Pages observed:** https://testmuai.com, https://testmuai.com/pricing, https://testmuai.com/about
**Spec:** Background `#f5f4f0` / Text `#4a4a4a` / Border 0px `#eff4fc` / Radius `0px` / Padding `0px` / Typography `16px` / Shadow `none`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

## Layout
Not captured in source.

## Responsive
Not captured in source.

## Imagery & decoration
The brand relies on stark typographic contrast and rigid grid lines. It avoids atmospheric gradients, soft shadows, and saturated color accents in the core UI, leaning entirely on the tension between pure black, white, and sharp 0px borders.

## Do's
- Do use pure black (`#000000`) or near-black (`#121212`) for primary text to maintain severe contrast.
- Do apply negative letter spacing to Manrope at sizes 32px and above.
- Do default to 0px border radius for structural elements and standard buttons.
- Do use 1px borders (`#d3d2cd`) to define hierarchy instead of drop shadows.
- Do pair 300/400 weight display text with 500/600 weight small caps for contrast.

## Don't
- **Wrong:** Using a saturated blue or purple as a primary button background.
  **Right:** Using `#000000` or `#ffffff` for primary buttons.
  **Reason:** The parent brand is strictly monochrome; saturated colors are reserved for sub-brand identities or specific product marks.
- **Wrong:** Applying soft drop shadows to cards.
  **Right:** Using a 1px solid border (`#d3d2cd`) with no shadow.
  **Reason:** The system relies on flat, graphic borders rather than simulated depth.
- **Wrong:** Bolding display headlines (e.g., 48px at 700 weight).
  **Right:** Using Manrope at 400 weight for 48px headlines.
  **Reason:** Heavy weights at large sizes destroy the technical, editorial feel of the brand.

## Similar brands
- Vercel (monochrome foundation, sharp geometry, technical typography)
- Linear (high contrast, dark/light modes, strict grid)
- Stripe (in its more technical, developer-facing documentation surfaces)

## Quick start

**CSS Variables:**
```css
:root {
  --color-foundation-white: #ffffff;
  --color-foundation-black: #000000;
  --color-foundation-gray-900: #121212;
  --color-foundation-gray-600: #4a4a4a;
  --color-foundation-gray-300: #d3d2cd;
  --color-foundation-gray-50: #f5f4f0;
  
  --font-manrope: 'Manrope', sans-serif;
  
  --radius-sharp: 0px;
  --radius-input: 6px;
  --radius-pill: 9999px;
}
```

## Agent prompt examples
1. "Create a pricing card using the Testmuai system. Use a white background, 6px border radius, and a 1px #d3d2cd border. The title should be Manrope 24px at 400 weight, and the CTA should be a sharp 0px button with a #e7e6df background."
2. "Build a hero section with a #f5f4f0 background. The main headline must be Manrope 56px, weight 400, with -1.28px letter spacing. Include two buttons: one pure black rounded button (6px) and one transparent pill button (9999px) with a white border."
3. "Design a feature list. Use Manrope 18px weight 400 for the body text in #121212. Separate each item with a 1px #d3d2cd sharp (0px) divider."

## Known gaps
Elevation (shadows), responsive breakpoints, and semantic colors (success/error) were not captured in the source evidence. Hover and focus states for interactive components are also missing.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://testmuai.com | Desktop | 2026-06-06T05:01:08.297Z |
| Pricing | https://testmuai.com/pricing | Desktop | 2026-06-06T05:01:08.297Z |
| About | https://testmuai.com/about | Desktop | 2026-06-06T05:01:08.297Z |