# Accurate Design System

> Professional screening anchored in deep navy and high-contrast magenta punctuation.

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

## TL;DR
Accurate utilizes a high-contrast, corporate-professional palette dominated by Navy (#003a70) and Dark Gray (#49587e) on a clean white foundation. The system’s primary "voltage" comes from a vibrant Pink (#ec008c) used exclusively for high-priority calls to action and interactive accents. Typography is strictly Poppins, leveraging heavy 700 weights for headlines to establish authority and 400 weights for legible, spacious body copy. The layout relies on generous vertical spacing (up to 130px) and a mix of sharp-edged sections and soft, large-radius (50px) pill components.

## Signature DNA
1. **The Magenta Punctuation:** Vibrant Pink (#ec008c) is never used for backgrounds or large surfaces; it exists solely as a functional "trigger" color for buttons and directional arrows against navy or white.
2. **Circular Data Anchors:** Large statistical callouts and feature icons are housed in perfect circles or high-radius containers (50px to 100px), contrasting against the otherwise rigid, square-grid sectioning.
3. **Navy Depth:** Deep Navy (#003a70) is used as a full-bleed flood color for high-impact sections (Heros, CTAs), providing a stable, institutional base for white and pink elements.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--color-white` | `#ffffff` | Page background, primary surface, text on dark | 102 | 1 | `computed_style` |
| `--color-navy` | `#003a70` | Primary brand color, hero backgrounds, primary CTAs | 63 | 1 | `--color-navy` |
| `--color-pale-blue-3` | `#f1f7fe` | Subtle section alternating background | 2 | 1 | `--color-pale-blue-3` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--color-dark-gray` | `#49587e` | Primary body text, secondary headings | 142 | 1 | `--color-dark-gray` |
| `--color-pink` | `#ec008c` | Action color, primary buttons, borders | 23 | 1 | `--color-pink` |
| `--color-blue` | `#1849b8` | Interactive text, secondary accents | 17 | 1 | `--color-blue` |
| `--color-dark-pink` | `#d80080` | Button hover/active states | 4 | 1 | `--color-dark-pink` |
| `--color-pale-blue-2` | `#e7f1fe` | Decorative surface (decorative_only) | 1 | 1 | `computed_style` |
| `--color-medium-gray` | `#7687a8` | Muted text (decorative_only) | 1 | 1 | `computed_style` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Poppins | 400, 700 | All headlines, body, and UI | Poppins (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 45px | 55px | normal | 700 | Hero/Main Headings | `h3.acf-element-heading` |
| `{type.h2}` | 35px | 45px | normal | 700 | Section Headings | `h2.accent-position-bottom` |
| `{type.h3}` | 28px | 38px | normal | 700 | Sub-section Headings | `h3.acf-element-heading` |
| `{type.h4}` | 24px | 34px | normal | 700 | Card Titles | `h3.acf-element-heading` |
| `{type.h6}` | 20px | 30px | normal | 700 | Small Labels | `h6.clone-heading` |
| `{type.body.lg}` | 18px | 28px | normal | 400 | Primary Body Copy | `article#post-256` |
| `{type.body}` | 16px | 24px | normal | 400 | Secondary Body | `p` |
| `{type.button}` | 16px | 25px | -0.08px | 700 | CTA Labels | `a.acf-element-button` |

### Principles
1. **Heavyweight Headers:** All structural headings use Poppins 700.
2. **Spacious Leading:** Body text maintains a line-height ratio of ~1.5x (18px/28px) for readability.
3. **Negative Tracking on Actions:** Buttons use a tight -0.08px letter spacing to increase visual density.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 30 |
| `{space.sm}` | 15px | 41 |
| `{space.md}` | 24px | 23 |
| `{space.lg}` | 32px | 10 |
| `{space.xl}` | 44px | 22 |
| `{space.section}` | 130px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers, standard buttons | 165 occurrences |
| `{radius.sm}` | 5px | Content cards, inputs | 35 occurrences |
| `{radius.pill}` | 50px | Primary Rounded Buttons | 47 occurrences |
| `{radius.circle}` | 100px | Feature icons, circular stats | 13 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.15) 0px 0px 10px 0px` | Feature cards on white backgrounds | 33 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Call to Action
**Pages observed:** accurate.com, accurate.com/about
**Spec:** Background: `#ec008c` | Text: `#ffffff` | Radius: `50px` | Padding: `10px 32px` | Font: `16px/700`
**States observed:** Default | Hover: `#d80080` | Focus: not captured

#### Sharp Button
**Role:** Secondary or Navigation Action
**Pages observed:** accurate.com, accurate.com/about
**Spec:** Background: `#003a70` | Text: `#ffffff` | Radius: `0px` | Font: `18px/400`
**States observed:** Default | Hover: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Service and benefit highlights
**Pages observed:** accurate.com
**Spec:** Background: `#ffffff` | Text: `#49587e` | Radius: `5px` | Shadow: `0px 0px 10px rgba(0,0,0,0.15)` | Padding: `49px 34px 44px`
**States observed:** Default | Hover: not captured

#### Statistic Circle
**Role:** Highlighting company scale
**Pages observed:** accurate.com, accurate.com/about
**Spec:** Background: `#1849b8` | Text: `#ffffff` | Radius: `50%` | Border: `0px`
**States observed:** Default

### Tier 3: Surface-specific

#### Navy Hero Section
**Role:** Page entry point
**Pages observed:** accurate.com
**Spec:** Background: `#003a70` | Text: `#ffffff` | Padding: `130px (vertical)`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Vertical Gap | 130px |
| Grid Columns | 12 |

## Do's
- Use `#ec008c` for the primary "Contact Us" or "Get Started" actions.
- Pair Poppins 700 with Poppins 400 for clear hierarchy.
- Use `#003a70` for full-width background floods to create section breaks.
- Maintain a minimum of `130px` vertical padding between major homepage sections.
- Apply `50px` radius to buttons intended to feel "modern" or "friendly."

## Don'ts
- **Wrong:** Using `#1849b8` (Accent Blue) for primary CTA buttons. **Right:** Use `#ec008c`. **Reason:** Blue is used for informational surfaces, not primary triggers.
- **Wrong:** Using `#49587e` as a background color for buttons. **Right:** Use for text only.
- **Wrong:** Applying shadows to buttons. **Right:** Keep buttons flat; reserve shadows for white cards.
- **Wrong:** Mixing font families. **Right:** Use Poppins exclusively.

## Quick start

```css
:root {
  --color-navy: #003a70;
  --color-pink: #ec008c;
  --color-dark-gray: #49587e;
  --color-white: #ffffff;
  --color-pale-blue: #f1f7fe;
  
  --font-main: 'Poppins', sans-serif;
  
  --radius-pill: 50px;
  --shadow-card: 0px 0px 10px rgba(0, 0, 0, 0.15);
}
```

## Known gaps
- Hover states for secondary "Sharp" buttons were not captured in the source evidence.
- Mobile-specific typography scaling (fluid type) was not explicitly declared in tokens, though observed in screenshots.
- Form validation states (Success/Error) were not present in the analyzed pages.