# Playonsports Design System

> High-impact athletic typography anchored by a stark monochrome foundation and a single high-voltage cyan accent.

**Source:** https://playonsports.com | **Captured:** 2026-06-06
**Brand layer:** parent | **Related brands:** None captured

## TL;DR
Playonsports utilizes a high-contrast, "sports-broadcast" aesthetic defined by the heavy, condensed serif **Druk** for display headlines and the versatile sans-serif **Inter** and **Siro** for functional UI. The palette is strictly achromatic (#000000, #ffffff) with a single primary brand color, **Electric Cyan** (#00c9d2), used for high-priority CTAs and interactive accents. Layouts feature aggressive section transitions, including deep black bands with large-scale white type and rounded "pill" geometry for buttons and decorative containers.

## Signature DNA
1. **Condensed Display Impact** (Druk weight 700/900 at sizes up to 120px creates a "stadium scoreboard" feel across all main marketing pages).
2. **Achromatic Power** (Heavy use of #000000 backgrounds with #ffffff text to frame content, as seen in the "Trusted Brands" and footer sections).
3. **Electric Cyan Punctuation** (#00c9d2 serves as the exclusive chromatic signal for conversion points like "Book a Demo" and "Take Me Home").

## Family Map
Not captured in source.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, surface backgrounds, button fills | 147 | 0.8 | Computed Style |
| `{color.white}` | `#ffffff` | Canvas background, inverse text, button fills | 85 | 0.8 | Computed Style |
| `{color.dark-gray}` | `#222222` | Secondary text emphasis | 12 | 0.8 | Computed Style |
| `{color.medium-gray}` | `#494949` | Muted body text | 7 | 0.6 | Computed Style |
| `{color.ink-deep}` | `#111111` | Text gradient background token | — | 1.0 | Declared Token |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#00c9d2` | Primary CTA background, active text accents | 9 | 0.6 | Computed Style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **Druk** | 700, 900 | Display Headlines | Archivo Narrow (Bold) | Commercial |
| **Inter** | 400, 500, 800, 900 | Sub-headings, UI Labels | Inter (Google Fonts) | OFL |
| **Siro** | 400, 700 | Body copy, Primary CTAs | Roboto | Commercial |
| **Inter Tight** | 500 | Alternative Body | Inter Tight (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 120px | 102px | 1px | 700 | Page Hero | `h1` |
| `{type.display.lg}` | 110px | 93.5px | 1px | 700 | Section Headers | `h2` |
| `{type.display.md}` | 80px | 68px | 1px | 700 | Sub-section Headers | `h3` |
| `{type.display.error}` | 80px | 92px | -1px | 900 | 404 Heading | `h1.error-page_heading` |
| `{type.display.sm}` | 60px | 51px | 1px | 700 | Feature Titles | `h4` |
| `{type.heading.md}` | 32px | 44.8px | normal | 400 | Widget Titles | `div.hs_cos_wrapper` |
| `{type.heading.sm}` | 24px | 33.6px | normal | 400 | Intro Paragraphs | `p` |
| `{type.body.lg}` | 18px | 25.2px | normal | 400 | Standard Body | `p` |
| `{type.body.md}` | 16px | 19.6px | normal | 400 | Navigation / Links | `a` |
| `{type.label.sm}` | 16px | 20.8px | 1px | 800 | Uppercase Labels | `h5.hide-mobile` |

### Principles
1. **Headlines are always condensed.** Use Druk for all major headings to maintain the brand's athletic intensity.
2. **High-contrast readability.** Body text on white backgrounds uses #000000 or #222222; body text on black backgrounds must be #ffffff.
3. **Tight display leading.** Display sizes (80px+) use a line-height ratio of approximately 0.85x to keep word blocks compact.

## Spacing
**Base unit:** custom
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xxs}` | 5px | 18 |
| `{space.xs}` | 9px | 9 |
| `{space.sm}` | 15px | 8 |
| `{space.md}` | 18px | 17 |
| `{space.lg}` | 25px | 5 |
| `{space.xl}` | 50px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Default for sections and cards | 242 occurrences |
| `{radius.sm}` | 3px | Standard Rounded Button | Pricing/About pages |
| `{radius.pill}` | 50px | Primary Pill Buttons / Chat | Homepage / Pricing |

## Elevation
Not captured in source. The system is visually flat, relying on color blocking and hairlines rather than shadows.

## Components

### Tier 1: Foundational

#### Primary Pill Button
**Role:** Main call-to-action for user acquisition.
**Pages observed:** Homepage, Pricing.
**Spec:** Background: #000000 / Text: #ffffff / Radius: 50px / Padding: 16px 18px / Font: Siro 18px.
**States observed:** Default | Hover: captured.

#### Cyan Action Button
**Role:** High-visibility conversion or "Book a Demo" action.
**Pages observed:** Pricing, About, 404.
**Spec:** Background: #00c9d2 / Text: #ffffff / Radius: 3px / Padding: 12px 25px / Font: Siro 18px.
**States observed:** Default: captured.

### Tier 2: Patterns

#### Black Surface Section
**Role:** Visual break and brand framing for partner logos or key value props.
**Pages observed:** Pricing, About.
**Spec:** Background: #000000 / Text: #ffffff / Padding: 100px 0px.
**States observed:** Default: captured.

#### White Surface Section
**Role:** Standard content container.
**Pages observed:** Homepage, Pricing, About.
**Spec:** Background: #ffffff / Text: #000000 / Radius: 0px.
**States observed:** Default: captured.

### Tier 3: Surface-specific
Not captured in source.

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | ~1440px |
| Section Vertical Padding | 100px |
| Column Gap | 25px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Headlines scale down; navigation collapses to hamburger; padding reduces to 15-20px. |
| Desktop | 1440px | Full multi-column layouts; display type reaches 120px. |

## Imagery & decoration
- **Photography:** High-energy, candid shots of high school sports (crowds, athletes, coaches).
- **Overlays:** Dark gradients or solid black blocks used to ensure white text legibility over busy images.
- **Icons:** Minimalist social icons (LinkedIn, YouTube) in #00c9d2.

## Do's
- Use **Druk** for all headers above 40px.
- Maintain a **100px vertical gap** between major content sections.
- Use **#00c9d2** exclusively for the most important interactive element on the page.
- Ensure all buttons have at least **18px horizontal padding**.
- Set display text with **1px letter spacing** to improve legibility of condensed forms.

## Don'ts
- **Don't** use #00c9d2 for body text; it fails contrast accessibility on white backgrounds (2.0:1).
- **Don't** apply border-radii to section containers; keep the layout "sharp" (0px).
- **Don't** use sub-brand colors (if discovered) as the primary site-wide CTA color.
- **Don't** use Druk for running body text; it is strictly for display.

## Similar brands
- Nike (Typography/Contrast)
- ESPN (Athletic/Broadcast aesthetic)
- Hudl (Sports-tech monochrome)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #00c9d2;
  --color-black: #000000;
  --color-white: #ffffff;
  --font-display: 'Druk', sans-serif;
  --font-body: 'Siro', 'Inter', sans-serif;
  --radius-pill: 50px;
  --space-section: 100px;
}
```

### Style Dictionary
```json
{
  "color": {
    "brand": { "primary": { "value": "#00c9d2" } },
    "foundation": {
      "black": { "value": "#000000" },
      "white": { "value": "#ffffff" }
    }
  }
}
```

## Agent prompt examples
- "Create a hero section for Playonsports using a background image with a black overlay, a 120px Druk headline in white, and a pill-shaped button with #00c9d2 background."
- "Design a pricing card using a white background, 0px border radius, and 32px Inter headings."

## Known gaps
- Hover and Active states for the Cyan Action Button were not explicitly captured in the CSS evidence.
- Success and Error semantic colors were not found in the analyzed marketing pages.

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