# Voolt Design System

> High-contrast utility meets professional trust, anchored by a signature safety-yellow primary action color and deep navy foundations.

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

## TL;DR
Voolt utilizes a high-contrast "Safety Monochrome" system where a vibrant yellow (`#fcc82c`) acts as the primary interactive catalyst against a clean white (`#ffffff`) and deep navy (`#091a3f`) foundation. Typography is strictly sans-serif, favoring **Inter Tight** for its high-impact display weights (up to 800) and **ui-sans-serif** for functional UI. The system relies on generous vertical spacing (80px sections) and a consistent 6px border radius for interactive elements, creating a look that feels like a modern digital tool for physical-world trades and services.

## Signature DNA
1. **The "Safety Yellow" CTA** (Solid `#fcc82c` backgrounds with `#27272a` text, used exclusively for primary conversion points across all pages).
2. **Inter Tight Display** (Heavyweight 800-weight display type at 80px with tight -1.6px tracking, creating an authoritative, "bold" brand voice).
3. **Navy Foundation** (Deep `#091a3f` surfaces used for footers and high-contrast section breaks to anchor the lighter page content).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary page background, card surfaces | 94 | 1.0 | Computed Style |
| `{color.navy}` | `#091a3f` | Footer background, high-contrast sections | 10 | 0.6 | Computed Style |
| `{color.ink}` | `#000000` | Primary headings and text | 192 | 0.8 | Computed Style |
| `{color.zinc-900}` | `#09090b` | Secondary headings and UI text | 48 | 0.8 | Computed Style |
| `{color.zinc-500}` | `#71717a` | Muted body text and descriptions | 58 | 0.8 | Computed Style |
| `{color.zinc-200}` | `#e4e4e7` | Default borders and dividers | 31 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#fcc82c` | Primary CTA background, active card states | 13 | 0.8 | Computed Style |
| `{color.blue-dark}` | `#0473c2` | Link text, secondary accents, borders | 17 | 0.8 | Computed Style |
| `{color.blue-bright}` | `#058beb` | Accent text and icons | 103 | 0.8 | Computed Style |
| `{color.blue-soft}` | `#0095ff` | Decorative surface backgrounds | 6 | 0.6 | Computed Style |
| `{color.blue-theme}` | `#007aff` | Swiper theme color (decorative_only) | 2 | 1.0 | `--swiper-theme-color` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Inter Tight | 400, 500, 600, 700, 800 | Display, Headings, UI | Inter Tight (Google Fonts) | OFL |
| ui-sans-serif | 400, 600, 700 | Navigation, Body, System UI | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 80px | 96px | -1.6px | 800 | Main Hero H1 | `h1.text-foreground.font-inter-tight` |
| `{type.display-lg}` | 48px | 57.6px | 0.48px | 700 | Section Headers | `h2.font-inter-tight` |
| `{type.heading-md}` | 32px | 40px | normal | 700 | Card/Sub-section heads | `h3.xsm:mb-[24px]` |
| `{type.heading-sm}` | 22px | 29.7px | -0.11px | 600 | Small feature titles | `h3.max-xsm:text-left` |
| `{type.body-lg}` | 18px | 25.2px | normal | 600 | Lead paragraphs | `p.text-[#71717A].font-inter-tight` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default body text | `nav.navbar.fixed` |
| `{type.body-sm}` | 14px | 21px | 0.14px | 400 | Small descriptions | `p.text-[14px].not-italic` |
| `{type.caption}` | 12px | 12px | normal | 600 | Muted labels | `p.font-inter-tight.text-muted-foreground` |

### Principles
1. **Tight Display Tracking:** Large display headers (80px) use negative tracking (-1.6px) to maintain visual density.
2. **Semi-bold Body:** Interactive elements like tabs and primary links use 600 weight at 16px for clarity.
3. **Muted Secondary Text:** Body descriptions consistently use `#71717a` to create clear hierarchy against black headers.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 14 |
| `{space.sm}` | 12px | 10 |
| `{space.md}` | 16px | 16 |
| `{space.lg}` | 24px | 10 |
| `{space.xl}` | 32px | 21 |
| `{space.section}` | 80px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sm}` | 6px | Buttons, Inputs, Cards | `radius: 6px` on Rounded Button |
| `{radius.md}` | 12px | Feature Cards | `radius: 12px` on observed Cards |
| `{radius.lg}` | 16px | Large Panels | `radius: 16px` on Surface |
| `{radius.xl}` | 24px | Pricing/FAQ Containers | `radius: 24px` on pricing cards |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.soft}` | `rgba(0, 0, 0, 0.05) 0px 1px 3px 0px` (multi-layered) | Floating UI elements | Shadows array (2 occurrences) |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and secondary conversion actions.
**Pages observed:** voolt.com, voolt.com/pricing
**Spec:** Background `{color.primary}` (#fcc82c) / Text `{color.foundation}` (#27272a) / Radius 6px / Padding 8px 20px / Typography 14px 500.
**States observed:** Default: captured | Hover: not captured.

#### Text Input
**Role:** Form fields and newsletter signups.
**Pages observed:** voolt.com, voolt.com/pricing
**Spec:** Background `#ffffff` / Text `#000000` / Border 1px `#e4e4e7` / Radius 6px / Padding 8px 12px.
**States observed:** Default: captured | Focus: not captured.

### Tier 2: Patterns
#### Navigation
**Role:** Global header navigation.
**Pages observed:** voolt.com, voolt.com/pricing
**Spec:** Background `#ffffff` / Text `#000000` / Border 0px / Typography 16px 400.
**States observed:** Default: captured | Active: captured (600 weight).

#### Footer
**Role:** Global site map and legal.
**Pages observed:** voolt.com, voolt.com/pricing
**Spec:** Background `{color.navy}` (#091a3f) / Text `#ffffff` / Typography 16px.
**States observed:** Default: captured.

### Tier 3: Surface-specific
#### Pricing Card
**Role:** Product tier selection.
**Pages observed:** voolt.com/pricing
**Spec:** Background `#ffffff` or `#091a3f` / Border 1px `#e4e4e7` / Radius 24px / Padding 32px.
**States observed:** Default: captured.

#### Feature Card
**Role:** Benefit and service highlights.
**Pages observed:** voolt.com, voolt.com/pricing
**Spec:** Background `{color.primary}` (#fcc82c) / Radius 6px / Padding 16px 29px.
**States observed:** Default: captured.

## Layout
| Property | Value |
|----------|-------|
| Page max-width | ~1280px |
| Section Padding (Vertical) | 80px |
| Grid Gutter | 24px |

## Do's
- Use `#fcc82c` for the main "Get Started" primary action.
- Set main headlines in **Inter Tight** at 800 weight for maximum impact.
- Maintain an 80px vertical gap between major content sections.
- Use a 6px border radius for all standard buttons and inputs.
- Apply `#71717a` to body text to ensure readability without competing with headers.

## Don'ts
- **Wrong:** Using `#058beb` (Accent Blue) for primary conversion buttons. 
  **Right:** Use `#fcc82c` (Safety Yellow). 
  **Reason:** Yellow is the high-voltage conversion signal; blue is for secondary information/links.
- Do not use sharp (0px) corners on interactive components.
- Avoid using Inter Tight at weights below 400 for body copy.
- Do not place dark text on the Navy (`#091a3f`) footer background.

## Similar brands
- Caterpillar (CAT)
- DeWalt
- Angi
- Thumbtack

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #fcc82c;
  --color-navy: #091a3f;
  --color-ink: #000000;
  --color-zinc-500: #71717a;
  --radius-sm: 6px;
  --font-display: 'Inter Tight', sans-serif;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Voolt's safety yellow #fcc82c, dark zinc text #27272a, and a 6px border radius."
- "Create a section header using Inter Tight 800 at 80px with -1.6px letter spacing."
- "Design a feature card with a white background, 1px #e4e4e7 border, and 12px border radius."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific typography scaling for the 80px display type was not fully detailed in the provided tokens.
- Specific transition durations for interactive elements were not captured.

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