# Traceup Design System

> Athletic precision meets technical clarity through deep teal foundations, high-contrast orange actions, and the rhythmic geometry of the Atak typeface.

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

## TL;DR
Traceup utilizes a sophisticated "Sport-Tech" aesthetic defined by a primary palette of deep teal (`#1f616d`) and charcoal grays, punctuated by a high-voltage orange (`#f35c2b`) for primary conversions. The system relies heavily on the **Atak** font family, using tight letter-spacing (up to -1.68px) and a wide range of weights (300-600) to create a hierarchy that feels both editorial and data-driven. Layouts are characterized by large-radius containers (20px to 50px) and a distinctive "Sand" (`#fcf8f4`) and "Teal-10" (`#e7f8f5`) surface system that softens the technical charcoal typography.

## Signature DNA
1. **The Teal-Orange Polarity** (Primary action `#f35c2b` set against deep teal `#1f616d` backgrounds or borders creates an immediate athletic "energy" signal. Observed on homepage and pricing.)
2. **Atak Display Geometry** (The use of Atak at 56px with significant negative tracking `-1.68px` creates a "stamped" technical feel for hero copy and data points. Observed in `div.h1-trace-2`.)
3. **Softened Technical Surfaces** (Large 20px-50px corner radii on containers paired with off-white/sand backgrounds `#fcf8f4` prevent the UI from feeling like a cold dashboard. Observed in feature cards and pricing tiers.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--charcoal-50` | `#393c3c` | Primary text, high emphasis | 37 | 1 | Computed Style |
| `--charcoal-40` | `#5a5c5c` | Secondary body text | 25 | 1 | Computed Style |
| `--charcoal-10` | `#d7d8d8` | Borders, subtle surface backgrounds | 5 | 1 | Computed Style |
| `--sand` | `#fcf8f4` | Warm section backgrounds | 3 | 1 | Computed Style |
| `--white` | `#ffffff` | Card surfaces, button text | 24 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--teal-50` | `#1f616d` | Primary brand color, headings, dark surfaces | 54 | 1 | `--teal-50` |
| `--teal-40` | `#18929a` | Interactive text, secondary borders | 31 | 1 | `--teal-40` |
| `--red` | `#f35c2b` | Primary CTA background, "Start Tracing" | 17 | 1 | `--red` |
| `--teal-20` | `#c0eee8` | Badges, highlight backgrounds | 9 | 1 | `--teal-20` |
| `--yellow` | `#f8fc52` | Decorative highlights (Recap cards) | 1 | 0.4 | `--yellow` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| Success | `#c0eee8` | Used for "Save 30%" badges and positive indicators |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Atak | 300, 400, 500, 600 | Display, Headings, UI | Inter (tight tracking) | Proprietary |
| Geist | 500 | Body secondary | Geist Sans | Open Source |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-lg` | 56px | 56px | -1.68px | 400 | Hero Headlines | `div.h1-trace-2` |
| `display-num` | 56px | 56px | -1.12px | 300 | Large Card Numbers | `div.card-number` |
| `heading-lg` | 39px | 39.2px | -1.176px | 400 | Section Titles | `h2.h2` |
| `heading-md` | 25px | 30.24px | -0.756px | 300 | Sub-section Heads | `h3.h3-2` |
| `heading-sm` | 22px | 22.4px | -0.896px | 500 | Component Titles | `div.configuration-title` |
| `body-lg` | 18px | 25.48px | -0.364px | 400 | Testimonials | `div.testimonial-text` |
| `body-md` | 15px | 20px | normal | 300 | Nav Links | `div.nav-link` |
| `body-sm` | 14px | 14px | -0.28px | 600 | Captions | `div.video-caption-text` |
| `caption` | 11px | 11.2px | -0.224px | 400 | Legal/Details | `div#plan-details` |

### Principles
1. **Aggressive Display Tracking:** Headlines at 56px must use `-1.68px` tracking to maintain the "compact" brand feel.
2. **Weight Contrast:** Pair Atak 300 (Light) for sub-headers with Atak 600 (Bold) for functional labels to create visual rhythm.
3. **Teal for Emphasis:** Use `#1f616d` for key words within charcoal sentences to draw focus without using the "Action Orange."

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `space-xs` | 4px | 3 |
| `space-sm` | 10px | 10 |
| `space-md` | 20px | 15 |
| `space-lg` | 24px | 6 |
| `space-xl` | 50px | 5 |
| `section-gap` | 144px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-input` | 4px | Form fields, small cards | `Card` component |
| `radius-control` | 8px | Secondary buttons/cards | `Card` component |
| `radius-card` | 20px | Default content containers | `Surface` component |
| `radius-panel` | 50px | Large section containers | `Surface` component |
| `radius-pill` | 999px | Primary CTA buttons | `pill` role |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main conversion (Start Tracing, Get Pricing)
**Pages observed:** Homepage, Pricing
**Spec:** Background `#f35c2b` / Text `#ffffff` / Radius `999px` / Typography Atak 500
**States observed:** Default | Hover: Not captured

#### Secondary Button
**Role:** Navigation and ghost actions
**Pages observed:** Homepage
**Spec:** Background `transparent` / Text `#1f616d` / Border `1px solid #1f616d` / Radius `999px`

### Tier 2: Patterns
#### Feature Card
**Role:** Highlighting product capabilities
**Pages observed:** Homepage
**Spec:** Background `#ffffff` / Radius `20px` / Padding `24px` / Typography Atak 400
**States observed:** Default | Hover: Not captured

#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background `#ffffff` / Border `1px solid #dfdfdf` / Radius `20px` / Padding `24px`

### Tier 3: Surface-specific
#### Highlight Badge
**Role:** "Save 30%" or "New" labels
**Pages observed:** Pricing
**Spec:** Background `#c0eee8` / Text `#1f616d` / Radius `4px` / Typography Atak 600 (12.6px)

#### Search Input
**Role:** Team lookup
**Pages observed:** Homepage, Pricing
**Spec:** Background `#ffffff` / Border `1px solid #dfdfdf` / Radius `999px` / Padding `10px 20px`

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px |
| Section Padding | 144px (Vertical) |
| Grid | 12-column desktop |

## Do's
- Use `#f35c2b` exclusively for the primary "Start" or "Buy" action.
- Apply negative tracking (at least -3%) to all Atak headings above 24px.
- Use `#fcf8f4` (Sand) for background sections that contain testimonials or human-centric content.
- Ensure all content cards use at least a `20px` border radius.
- Use `#1f616d` for footer backgrounds to anchor the page.

## Don'ts
- **Wrong:** Using `#18929a` (Teal-40) for a primary CTA button. **Right:** Use `#f35c2b`. **Reason:** Teal is for information/navigation; Orange is for conversion.
- **Wrong:** Setting Atak headlines with `letter-spacing: normal`. **Right:** Use negative tracking. **Reason:** The typeface loses its technical "stamped" identity when tracked loosely.
- Do not use sharp corners (0px radius) for any interactive or container element.

## Quick start
```css
/* CSS Custom Properties */
:root {
  --trace-teal-50: #1f616d;
  --trace-teal-40: #18929a;
  --trace-orange: #f35c2b;
  --trace-charcoal: #393c3c;
  --trace-sand: #fcf8f4;
  --trace-radius-card: 20px;
  --trace-font-main: 'Atak', sans-serif;
}
```

## Known gaps
- Hover and Active states for the primary orange button were not captured in the static trace.
- Mobile-specific navigation transitions were not fully analyzed.
- Shadow tokens were not present in the CSS variable evidence, suggesting a flat or hairline-only elevation system.