# Checkpointid Design System

> Technical utility meets corporate safety through ultra-light Work Sans headlines and high-contrast blue-on-white information architecture.

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

## TL;DR
Checkpointid utilizes a high-contrast monochrome foundation of `#ffffff` and `#555555` punctuated by deep corporate blues (`#007ac6`, `#044d66`). The typographic signature is the extreme use of **Work Sans at weight 200** for primary H2 headlines, creating a technical, airy feel that balances the heavy information density. Layouts rely on a strict 93px vertical section rhythm and sharp-edged containers (`0px` radius). Brand accents like the orange primary button (`#ff6900` from tokens) provide the only high-chroma functional triggers in an otherwise restrained, achromatic environment.

## Signature DNA
1. **The Ultra-Light Display** (Work Sans at weight 200 for 36px H2 headlines creates a sophisticated, "thin-ink" technical aesthetic that distinguishes it from standard bold SaaS headers.)
2. **Sharp-Edge Architecture** (A universal `0px` border radius on all containers and sections reinforces a precise, "no-frills" security-first identity.)
3. **Deep Blue Information Bands** (Full-width `#007ac6` sections provide high-contrast grounding for white iconography and display text, used to separate product benefits from white-canvas narrative.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary canvas, text on dark bands | 24 | 1.0 | `--wp--preset--color--white` |
| `{color.gray.medium}` | `#555555` | Primary body text, secondary headings | 59 | 0.8 | Computed Style |
| `{color.black}` | `#000000` | Footer text, high-emphasis text | 2 | 1.0 | `--wp--preset--color--black` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.blue.primary}` | `#007ac6` | Section backgrounds, borders, link text | 6 | 0.6 | Computed Style |
| `{color.blue.dark}` | `#044d66` | Primary display text, button text | 7 | 0.6 | Computed Style |
| `{color.orange.vivid}` | `#ff6900` | Primary CTA background (observed in screenshot) | 1 | 0.9 | `--wp--preset--color--luminous-vivid-orange` |
| `{color.green.lime}` | `#a9cf38` | Secondary CTA background (observed in screenshot) | 1 | 0.9 | Computed Style (Visual) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Work Sans | 200, 300, 400, 500, 600, 700 | All UI, Headings, Body | Work Sans (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h2}` | 36px | 44px | normal | 200 | Section Headlines | `h2` |
| `{type.h2.bold}` | 36px | 44px | normal | 700 | Emphasized Headlines | `strong` |
| `{type.icon.label}` | 32px | 51.2px | normal | 300 | Icon group titles | `span.icon` |
| `{type.h3}` | 28px | 44.8px | normal | 400 | Subsection headers | `span` |
| `{type.title.box}` | 18px | 28.8px | normal | 400 | Feature card titles | `p.box-title` |
| `{type.label}` | 17px | 27.2px | normal | 500 | Form labels, small UI | `span.label` |
| `{type.body}` | 16px | 25.6px | normal | 300 | Primary narrative text | `section.features` |
| `{type.body.strong}` | 16px | 25.6px | normal | 700 | Inline emphasis | `strong` |
| `{type.button.sm}` | 13px | 16px | 1px | 700 | Compact CTA links | `a.btn.new-mri-btn` |

### Principles
1. **Weight Contrast:** Headlines jump between 200 (ultra-light) and 700 (bold) to create hierarchy without changing font size.
2. **Generous Leading:** Body text maintains a 1.6x line-height ratio (16px/25.6px) for high legibility in dense feature lists.
3. **Tracking for Action:** Small buttons (13px) use 1px letter spacing to maintain legibility in all-caps or bold states.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 19 |
| `{space.sm}` | 15px | 3 |
| `{space.md}` | 30px | 3 |
| `{space.lg}` | 45px | 3 |
| `{space.section}` | 93px | 14 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | All buttons, cards, and sections | 91 occurrences |

## Elevation
Not captured in source. The system is flat, using color blocks and borders rather than shadows for depth.

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Request Demo)
**Pages observed:** https://checkpointid.com
**Spec:** Background: `#ff6900` | Text: `#ffffff` | Radius: `0px` | Typography: `{type.button.sm}`
**States observed:** Default | Hover: Not captured

#### Outline Button
**Role:** Secondary action (Watch Video)
**Pages observed:** https://checkpointid.com
**Spec:** Background: `transparent` | Text: `#044d66` | Border: 1px `#044d66` | Radius: `0px`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying platform benefits
**Pages observed:** https://checkpointid.com
**Spec:** Background: `transparent` | Title: `{type.title.box}` | Body: `{type.body}` | Icon Color: `#ffffff` (on blue) or `#007ac6` (on white)
**States observed:** Default

#### Tabbed Content Switcher
**Role:** Switching between ID Verification types
**Pages observed:** https://checkpointid.com
**Spec:** Active Border-Top: 4px `#007ac6` | Text: `{type.label}` | Background: `#ffffff`
**States observed:** Active | Default

### Tier 3: Surface-specific

#### Contact Form
**Role:** Lead generation
**Pages observed:** https://checkpointid.com
**Spec:** Input Border: 1px `#abb8c3` | Label: `{type.label}` | Submit Button: `{color.orange.vivid}`
**States observed:** Default

#### Global Footer
**Role:** Navigation and legal
**Pages observed:** https://checkpointid.com
**Spec:** Background: `#f2f2f2` (Visual) | Text: `#000000` | Heading: `{type.button.sm}` (Uppercase)
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1140px |
| Section Padding (Vertical) | 93px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Feature cards stack vertically; H2 font size reduces. |

## Do's
- Use **Work Sans 200** for all primary section headers (`h2`).
- Maintain the **93px vertical rhythm** between major content sections.
- Use **sharp 0px corners** for every interactive and container element.
- Apply `#007ac6` for full-width background bands to highlight key value propositions.
- Ensure all body text uses a weight of **300** for a lighter, modern feel.

## Don'ts
- **Wrong:** Using `#0693e3` (Vivid Cyan Blue) for primary buttons.
- **Right:** Use `#ff6900` (Luminous Vivid Orange).
- **Reason:** The cyan blue is a WordPress preset token; the orange is the brand's functional action color.
- Do not use border-radii or rounded corners on any component.
- Do not use bold weights (700) for primary headlines unless specifically emphasizing a single word.
- Do not use drop shadows to create depth; use background color shifts instead.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --checkpoint-primary: #555555;
  --checkpoint-accent-blue: #007ac6;
  --checkpoint-accent-orange: #ff6900;
  --checkpoint-text-dark: #044d66;
  --checkpoint-white: #ffffff;
  --font-main: 'Work Sans', sans-serif;
  --radius-none: 0px;
  --spacing-section: 93px;
}
```

## Agent prompt examples
- "Create a hero section with a Work Sans weight 200 headline at 36px, a `#ff6900` primary button with 0px radius, and an outline button with a `#044d66` border."
- "Design a feature grid using 18px Work Sans 400 titles and 16px weight 300 body text, ensuring all containers have 0px border radius."
- "Generate a full-width section with a `#007ac6` background and white text, using 93px of vertical padding."

## Known gaps
- Hover and active states for buttons were not captured in the static evidence.
- Specific hex code for the light gray footer background was not in the token list (estimated from visual).
- Mobile-specific typography scale (px values) was not explicitly declared in the provided JSON.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://checkpointid.com | 1440px / 390px | 2026-06-06T05:03:51Z |