# Onepage Design System

> High-contrast utility meets Swiss-inspired clarity, anchored by heavy geometric headings and a vibrant electric blue primary action.

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

## TL;DR
Onepage utilizes a high-contrast monochrome foundation (#000000, #ffffff) punctuated by a singular, high-voltage electric blue (#006aff) for primary interactions. The typographic system is built on a "heavy-top" hierarchy, using **Circular** at weights up to 900 for massive, tight-tracked displays and **Inter** for functional body copy. Layouts are defined by generous, soft-radius containers (20px to 32px) and a distinctive use of deep navy (#000326) and amber (#f3a909) for specialized AI-focused sections. The overall feel is one of a modern, "pro" productivity tool that balances density with extreme legibility.

## Signature DNA
1. **The "Ultra-Black" Display** (Circular at weight 900 with -2px tracking on 64px headlines creates a dense, authoritative editorial voice seen on the homepage and about pages).
2. **Electric Blue Punctuation** (The use of #006aff as the exclusive color for "Create your free account" buttons ensures the primary conversion path is never lost against the grayscale UI).
3. **Soft-Shell Containers** (Large-scale radii of 20px and 32px on cards and panels soften the high-contrast typography, creating a friendly "SaaS" aesthetic).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.ink}` | `#000000` | Primary text, heavy headings, dark surfaces | 1186 | 0.8 | Computed Style |
| `{color.canvas}` | `#ffffff` | Page background, card surfaces, button text | 141 | 0.8 | Computed Style |
| `{color.slate}` | `#363644` | Secondary text, UI labels | 270 | 0.8 | Computed Style |
| `{color.muted}` | `#6a6a71` | Tertiary text, descriptions | 203 | 0.8 | Computed Style |
| `{color.surface-neutral}` | `#e3e3e8` | Section backgrounds (Pricing) | 154 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#006aff` | Primary CTA background | 11 | 0.8 | Computed Style |
| `{color.brand-blue}` | `#1949f5` | Brand links, secondary accents | 17 | 0.8 | Computed Style |
| `{color.ai-amber}` | `#f3a909` | Onepage AI branding, special CTAs | 4 | 0.6 | Computed Style |
| `{color.deep-navy}` | `#000326` | Dark mode section backgrounds | 4 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Circular | 500, 600, 700, 800, 900 | Display & Headings | Plus Jakarta Sans | Licensed |
| Inter | 400, 700 | Body & UI Labels | Inter (Google Fonts) | SIL OFL |
| IBM Plex Serif | 400 | Stylized Display (Italicized) | IBM Plex Serif | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-xl}` | 64px | 64px | -2px | 900 | Hero Headlines | `h1.one-ui-title` |
| `{type.display-lg}` | 56px | 61.6px | -1px | 900 | Section Headers | `div` |
| `{type.display-md}` | 40px | 44px | -0.5px | 900 | Sub-section Headers | `div.one-ui-title` |
| `{type.heading-sm}` | 24px | 31.2px | -1px | 800 | Card Titles | `div.one-ui-title` |
| `{type.body-lg}` | 22px | 34.1px | normal | 400 | Lead Paragraphs | `div.one-ui-description` |
| `{type.body-md}` | 18px | 27.9px | normal | 400 | Standard Body | `div.one-ui-description` |
| `{type.button}` | 18px | 19.8px | normal | 700 | Primary CTA Text | `a.one-ui-button` |
| `{type.body-sm}` | 14px | 21.7px | normal | 400 | Small Descriptions | `div` |

### Principles
1. **Tight Display Tracking:** As font size increases, letter spacing decreases significantly (from 0 to -2px) to maintain a "blocky" heading feel.
2. **Weight Contrast:** Headings rarely drop below 700 weight, creating a sharp distinction from the 400-weight body text.
3. **Serif Accents:** `IBM Plex Serif` is used exclusively in italics (`em`) within headings to add a human, editorial touch to technical copy.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 242 |
| `{space.sm}` | 16px | 200 |
| `{space.md}` | 24px | 77 |
| `{space.lg}` | 32px | 69 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.button}` | 6px | Standard Buttons | `Rounded Button` |
| `{radius.card}` | 20px | Feature Cards | `Card` |
| `{radius.panel}` | 32px | Large Content Sections | `Card` |
| `{radius.pill}` | 100px | Secondary/Ghost Buttons | `Rounded Button` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.deep}` | 0px 40px 140px 0px rgba(0,0,0,0.15) | Floating Hero/Pricing Cards | Pricing Page |
| `{shadow.hard}` | 88.88px 88.88px 88.88px 0px rgba(0,0,0,0.5) | Stylized UI Mockups | Homepage |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main conversion action
**Pages observed:** All
**Spec:** Background: `#006aff` | Text: `#ffffff` | Radius: `6px` | Padding: `0px 24px` | Typography: `18px/700`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Secondary Button
**Role:** Alternative actions (e.g., "Try for free")
**Pages observed:** All
**Spec:** Background: `rgba(37, 37, 30, 0.06)` | Text: `#363644` | Radius: `6px` | Padding: `6px 18px` | Typography: `14px/400`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product capabilities
**Pages observed:** Homepage, About
**Spec:** Background: `#f4f3f3` | Radius: `20px` | Padding: `32px` | Text: `#000000`
**States observed:** Default

#### Pricing Card (Elevated)
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` | Border: `1px solid rgba(29, 29, 53, 0.08)` | Radius: `8px` | Shadow: `{shadow.deep}`
**States observed:** Default

### Tier 3: Surface-specific

#### AI Feature Block
**Role:** Specialized AI-tooling sections
**Pages observed:** Homepage
**Spec:** Background: `#000326` | Text: `#ffffff` | Accent: `#f3a909` | Radius: `32px`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Width | 1200px |
| Section Gap | 80px - 120px |
| Column Grid | 12-column desktop |

## Do's
- Use **Circular 900** for all primary page titles.
- Apply **-2px letter spacing** to headlines exceeding 60px.
- Use **#006aff** exclusively for the primary conversion button.
- Pair sans-serif headlines with **IBM Plex Serif Italic** for emphasis words.
- Maintain a **20px radius** on all standard content cards.

## Don'ts
- **Wrong:** Using #1949f5 for primary CTA buttons. **Right:** Use #006aff. **Reason:** #006aff is the validated primary action color; #1949f5 is for links and secondary signals.
- Do not use border radii smaller than 20px for large feature cards.
- Do not use Circular for long-form body text; use Inter 400.
- Never use #f3a909 (AI Amber) for standard UI elements; reserve it for AI-specific features.

## Quick start

```css
/* CSS Variables */
:root {
  --one-blue-primary: #006aff;
  --one-ink: #000000;
  --one-canvas: #ffffff;
  --one-radius-card: 20px;
  --one-font-display: 'Circular', sans-serif;
  --one-font-body: 'Inter', sans-serif;
}
```

## Known gaps
- Hover and Active states for buttons were not captured in the static analysis.
- Mobile-specific navigation transitions were not fully documented.
- Form validation error states (Semantic Red) were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://onepage.io | 1440x900 | 2026-06-06 |
| Pricing | https://onepage.io/pricing | 1440x900 | 2026-06-06 |
| About | https://onepage.io/about | 1440x900 | 2026-06-06 |