# Yardstik Design System

> High-contrast cyber-industrialism: electric cyan pulses against deep obsidian voids, anchored by the condensed urgency of Bebas Neue.

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

## TL;DR
Yardstik employs a "dark mode by default" aesthetic that leans heavily into high-voltage accents. The system is built on a foundation of absolute black (#000000) and deep navy (#00071a), which provides a high-contrast stage for the primary brand color, Electric Cyan (#00f4ff). Typography is a dual-threat system: **Bebas Neue** provides a loud, condensed display voice for heroes and section headers, while **Inter** handles high-legibility body and UI tasks. Visual depth is achieved not through traditional shadows, but through "glow" effects—cyan and mint (#36ffb8) outer shadows that simulate light emission from cards and buttons.

## Signature DNA
1. **The Cyan Pulse** (#00f4ff used as a background, border, and glow effect across all primary CTAs and feature containers to signal "active" technology).
2. **Condensed Urgency** (Bebas Neue set in all-caps for display headers, creating a vertical, high-impact rhythm that contrasts with the horizontal expansiveness of the dark canvas).
3. **Luminescent Elevation** (Replacing standard drop shadows with colored glows like `rgb(0, 244, 255) 0px 2px 18px 0px` to create a "floating screen" effect).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.void}` | `#000000` | Primary section background | 2 | 1 | Computed style |
| `{color.deep-navy}` | `#00071a` | Secondary surface, banner backgrounds | 34 | 1 | `--cmplz_banner_background_color` |
| `{color.ink-light}` | `#f2fffb` | Primary body text, button text on dark | 252 | 1 | `--gcid-body-color` |
| `{color.white}` | `#ffffff` | Headings, high-emphasis text | 101 | 1 | `--gcid-heading-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#00f4ff` | Primary CTA, links, active borders | 54 | 1 | `--gcid-primary-color` |
| `{color.secondary}` | `#36ffb8` | Success accents, secondary borders | 7 | 1 | `--gcid-secondary-color` |
| `{color.accent-purple}` | `#6b39ff` | Decorative only; cookie banner actions | 1 | 1 | `--cmplz_button_accept_background_color` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Bebas Neue | 400, 500 | Display, Hero Headings | Bebas Neue (Google Fonts) | OFL |
| Inter | 400, 600, 700 | Body, UI, Sub-headings | Inter (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-xl}` | 136px | 115.6px | normal | 500 | Hero H2 | `h2` |
| `{type.display-lg}` | 61px | 54.9px | normal | 500 | Section Header | `h2.et_pb_module_header` |
| `{type.heading-md}` | 31px | 37.6px | normal | 600 | Sub-section H3 | `h3` |
| `{type.heading-sm}` | 22px | 26.9px | normal | 600 | Card Titles | `h5` |
| `{type.button}` | 20px | 26px | normal | 600 | CTA Labels | `a.et_pb_button` |
| `{type.body-lg}` | 18px | 30.6px | normal | 400 | Intro Paragraphs | `header.et-l--header` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Standard Body | `p` |
| `{type.body-sm}` | 14px | 21px | normal | 400 | Footer/Small text | `p` |

### Principles
1. **Display is All-Caps.** Bebas Neue is exclusively used in uppercase for structural headers.
2. **High Contrast Text.** White (#ffffff) or Mint-White (#f2fffb) text is used on dark backgrounds to maintain a minimum 15:1 contrast ratio.
3. **Tight Display Leading.** Large headers use a line-height of ~0.85x to 1.1x the font size to maintain the condensed "block" feel.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 33 |
| `{space.sm}` | 16px | 6 |
| `{space.md}` | 32px | 27 |
| `{space.lg}` | 64px | 10 |
| `{space.xl}` | 96px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers, primary hero blocks | 356 occurrences |
| `{radius.card}` | 15px | Feature cards, pricing tiers | Pricing page cards |
| `{radius.pill}` | 30px | Buttons, interactive surfaces | Rounded Button component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{glow.cyan}` | `0px 2px 18px 0px #00f4ff` | Primary CTA hover, active cards | Rounded Button (Primary) |
| `{glow.mint}` | `0px 7px 10px -6px #36ffb8` | Secondary feature cards | Surface component |
| `{shadow.deep}` | `0px 2px 18px 0px rgba(0,0,0,0.3)` | Standard card lift | Rounded Button (Primary) |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main site CTAs (Get Started, Fight Back)
**Pages observed:** Home, Pricing
**Spec:** Background: #00f4ff | Text: #00071a | Border: 2px #00f4ff | Radius: 30px | Padding: 8px 28px | Typography: Inter 20px Bold | Shadow: #0000004d 0px 2px 18px
**States observed:** Default | Hover: Captured (Cyan Glow)

#### Rounded Button (Ghost)
**Role:** Secondary actions (Learn More, Connect API)
**Pages observed:** Home, Pricing
**Spec:** Background: rgba(9, 33, 49, 0.8) | Text: #f2fffb | Border: 2px #00f4ff | Radius: 30px | Padding: 8px 28px | Typography: Inter 20px Bold
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific product value props
**Pages observed:** Home, Pricing
**Spec:** Background: #00f4ff | Text: #00071a | Border: 0px | Radius: 30px | Padding: 14px 24px | Typography: Inter 16px
**States observed:** Default

#### Dark Surface Section
**Role:** Standard page layout block
**Pages observed:** Home, Pricing
**Spec:** Background: #00071a | Text: #f2fffb | Border: 0px | Radius: 0px | Padding: 96px 0px 64px
**States observed:** Default

### Tier 3: Surface-specific

#### Pricing Card
**Role:** Tiers on pricing page
**Pages observed:** Pricing
**Spec:** Background: #00071a | Text: #f2fffb | Border: 1px #d9d9d9 | Radius: 15px | Padding: 20px
**States observed:** Default

#### Product Explorer Row
**Role:** Horizontal product list with icons
**Pages observed:** Home
**Spec:** Background: transparent | Text: #ffffff | Border: 2px #36ffb8 | Radius: 15px | Padding: 0px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px |
| Section Padding | 96px (Vertical) |
| Grid Gutter | 32px |

## Do's
- Use **Bebas Neue** in all-caps for any header larger than 32px.
- Apply the **Cyan Glow** shadow to primary buttons to indicate interactivity.
- Maintain the **#000000** background for hero sections to maximize the "pulse" effect of cyan text.
- Use **#36ffb8** (Mint) as a secondary accent for success states or checkmarks.
- Ensure all body text uses **Inter** at 16px or 18px for legibility on dark surfaces.

## Don'ts
- **Wrong:** Using #6b39ff (Purple) as a primary brand color. **Right:** Use #00f4ff. **Reason:** Purple is reserved for third-party cookie consent modules and is not part of the core brand DNA.
- **Wrong:** Setting Bebas Neue in sentence case. **Right:** Always use Uppercase. **Reason:** The font's impact is derived from its architectural, block-like appearance.
- **Wrong:** Using standard grey drop shadows. **Right:** Use colored glows (#00f4ff). **Reason:** The brand uses a "light-emissive" model rather than a "physical-shadow" model.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-void: #000000;
  --color-primary: #00f4ff;
  --color-secondary: #36ffb8;
  --color-text: #f2fffb;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Inter', sans-serif;
  --glow-primary: 0px 2px 18px 0px rgba(0, 244, 255, 1);
}
```

## Known gaps
- Hover states for secondary "Ghost" buttons were not captured in the static evidence.
- Mobile-specific typography scaling for the 136px display size was not fully documented in the pipeline.
- The specific transition timing for the glow effects was not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://yardstik.com | 1440px | 2026-06-06 |
| Pricing | https://yardstik.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://yardstik.com | 390px | 2026-06-06 |