# Soloprotect Design System

> High-visibility safety utility anchored by a signature "SP Green" signal color and structured, high-contrast information grids.

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

## TL;DR
Soloprotect utilizes a high-contrast, utility-first aesthetic that prioritizes legibility and clear action states. The system is built around a vibrant primary green (`#80bd00`) used for critical CTAs and brand indicators, contrasted against a foundation of cool grays (`#696e72`) and deep charcoals (`#202324`). Layouts rely on generous 10px rounded containers and structured card grids to organize complex safety data and product features. Typography is functional, pairing the geometric clarity of Open Sans for headings with the modern readability of Onest for body content.

## Signature DNA
1. **The SP Green Signal** (Primary brand voltage using `#80bd00` for all high-priority actions and iconography, creating a "safety-vest" visual association across all pages).
2. **Softened Utility Grids** (The use of `{rounded.control}` (10px) on nearly every interactive element—from buttons to form inputs and cards—to balance industrial safety with modern software accessibility).
3. **Achromatic Depth** (Layering multiple grays from `#f9f7f6` surfaces to `#202324` text to create information hierarchy without introducing competing colors).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.ink}` | `#202324` | Primary headings and high-contrast text | 59 | 1 | `css_variable:--neutral--800` |
| `{colors.charcoal}` | `#45494b` | Secondary text and UI labels | 62 | 0.8 | `computed_style` |
| `{colors.slate}` | `#696e72` | Muted body text and foundation icons | 191 | 1 | `css_variable:--neutral--600` |
| `{colors.canvas-green}` | `#e1e6e1` | Subtle brand-tinted section backgrounds | 17 | 1 | `css_variable:--background-color-green` |
| `{colors.canvas-warm}` | `#f4f0ed` | Secondary section backgrounds (About/Pricing) | 13 | 1 | `css_variable:--secondary--color-2` |
| `{colors.surface}` | `#ffffff` | Primary card and input backgrounds | 109 | 0.8 | `computed_style` |
| `{colors.border}` | `#d5dadd` | Default component and card outlines | 13 | 1 | `css_variable:--neutral--300` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.primary}` | `#80bd00` | Primary CTA background, brand accents | 109 | 1 | `css_variable:--sp-green` |
| `{colors.primary-soft}` | `#7fbc04` | Alternative brand green variant | 1 | 1 | `css_variable:--sp-green` |
| `{colors.accent-dark}` | `#0a0f16` | Deep navy/black used for button shadows | 1 | 1 | `css_variable:--accent--primary-1` |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `{colors.error}` | `#dc2b2b` | Alert icons and error states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|------------|
| Open Sans | 300, 400, 500, 600, 700 | Headings, Buttons, Stats | Open Sans (Google) | Apache 2.0 |
| Onest | 400 | Body copy, Accordions | Onest (Google) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-lg}` | 50px | 57.96px | normal | 700 | Hero Stats | `div.callout_stat` |
| `{type.display-md}` | 48px | 55.2px | normal | 700 | Main Page H1 | `h1.sp_h1.animation` |
| `{type.h2}` | 32px | 36.8px | normal | 700 | Section Headings | `h2.sp_h1` |
| `{type.h3}` | 28px | 33.6px | normal | 300 | Sub-section intros | `div.sp_sh.align-center` |
| `{type.body-lg}` | 19px | 28.8px | normal | 300 | Lead paragraphs | `p.sp_body` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Standard body | `header.section_header` |
| `{type.body-sm}` | 14px | 21px | normal | 500 | Small CTAs / Tags | `div.button.small-cta` |
| `{type.label}` | 16px | 24px | normal | 700 | Form Labels | `label` |

### Principles
1. **Bold Weight for Utility.** Stats and primary headings always use weight 700 to ensure visibility.
2. **Light Weight for Narrative.** Lead-in paragraphs and sub-headers use weight 300 to provide visual breathing room.
3. **Tight Line Heights on Headings.** Large display type maintains a ~1.15x line height to keep multi-line titles cohesive.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 33 |
| `{space.sm}` | 12px | 20 |
| `{space.md}` | 16px | 59 |
| `{space.lg}` | 32px | 28 |
| `{space.xl}` | 48px | 17 |
| `{space.section}` | 52px | 13 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{rounded.sharp}` | 0px | Global sections, footer | 271 occurrences |
| `{rounded.input}` | 4px | Form fields (secondary) | 7 occurrences |
| `{rounded.control}` | 10px | Buttons, Cards, Inputs | 117 occurrences |
| `{rounded.panel}` | 24px | Large UI containers | 3 occurrences |
| `{rounded.pill}` | 100px | Specialized badges | 18 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(20, 20, 43, 0.08) 0px 2px 12px 0px` | Feature/Pricing Cards | 12 occurrences |
| `{shadow.floating}` | `rgba(0, 0, 0, 0.2) 0px 2px 5px 0px` | Hovered elements | 5 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary action trigger (e.g., "Book a Demo", "Get a Quote")
**Pages observed:** All
**Spec:** 
- Background: `{colors.primary}` (#80bd00)
- Text: `{colors.surface}` (#ffffff)
- Radius: `{rounded.control}` (10px)
- Padding: 9px 15px
- Typography: `{type.body-md}` (16px / 700)
**States observed:** Default, Hover (uses `#80bd00` with shadow)

#### Text Input
**Role:** Lead generation and contact forms
**Pages observed:** Pricing
**Spec:** 
- Background: `{colors.surface}` (#ffffff)
- Border: 1px `{colors.primary}` (#80bd00)
- Radius: `{rounded.control}` (10px)
- Padding: 8px 12px
- Text: `{colors.ink}` (#202324)

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product benefits or service details
**Pages observed:** Home, Pricing
**Spec:** 
- Background: `{colors.surface}` (#ffffff) or `{colors.canvas-warm}` (#f4f0ed)
- Radius: `{rounded.control}` (10px)
- Shadow: `{shadow.card}`
- Padding: 32px 16px

### Tier 3: Surface-specific

#### Pricing Card
**Role:** Tiered pricing display
**Pages observed:** Pricing
**Spec:** 
- Background: `#f9f7f6`
- Border: 1px `{colors.border}` (#d5dadd)
- Radius: `{rounded.control}` (10px)
- Padding: 52px 32px

## Layout
| Property | Value |
|---|---|
| Max content width | 1200px |
| Section padding (V) | 48px - 64px |
| Grid gap | 32px |

## Imagery & decoration
- **Product Photography:** High-resolution, isolated device shots with realistic shadows.
- **Iconography:** Circular containers (`{rounded.pill}`) with centered glyphs using brand green or semantic red.
- **Avoids:** Heavy gradients, illustrative "doodles", or sharp-cornered containers.

## Do's
- Use `#80bd00` for all primary conversion points.
- Apply `{rounded.control}` (10px) to all interactive card and button surfaces.
- Maintain high contrast between `{colors.ink}` text and `{colors.surface}` backgrounds.
- Use `{type.display-lg}` (50px) for data-driven statistics.
- Use `{colors.canvas-green}` for full-width section backgrounds to break up content.

## Don'ts
- **Wrong:** Using a generic blue for primary buttons. **Right:** Always use `{colors.primary}` (#80bd00). **Reason:** Brand recognition is tied to the high-visibility green signal.
- **Wrong:** Mixing sharp and rounded corners on cards. **Right:** Stick to 10px radius.
- **Wrong:** Using sub-brand colors (if any existed) for parent-level navigation.
- Do not use weight 700 for long-form body copy; reserve for headings and labels.

## Similar brands
- Motorola Solutions (Safety/Utility focus)
- Verkada (Hardware/Software hybrid aesthetic)
- Hilti (Industrial tool utility)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --sp-green: #80bd00;
  --neutral-800: #202324;
  --neutral-600: #696e72;
  --radius-control: 10px;
  --shadow-card: 0px 2px 12px 0px rgba(20, 20, 43, 0.08);
}
```

## Agent prompt examples
- "Generate a pricing card for Soloprotect using a #f9f7f6 background, 10px border radius, and a primary button in #80bd00."
- "Create a hero section with a 48px Open Sans Bold heading in #202324 and a lead paragraph in 19px Open Sans Light."
- "Design a contact form where inputs have a 1px #80bd00 border and 10px rounded corners."

## Known gaps
- Hover and Active states for tertiary buttons were not fully captured in the automated crawl.
- Mobile-specific navigation transitions (hamburger menu behavior) require manual verification.

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