# Prokeep Design System

> A high-contrast industrial interface pairing deep slate foundations with energetic terracotta actions and structured Barlow typography.

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

## TL;DR
Prokeep utilizes a "Dark Slate and Terracotta" palette to establish a professional yet high-energy utility aesthetic. The system is anchored by `#132c41` (Dark Alt) for deep backgrounds and primary headings, contrasted against a clean white foundation. Primary actions are consistently rendered in `#da5039` (Terracotta), providing a clear cognitive path for users. Typography relies exclusively on **Barlow** for its industrial, condensed character in headings, while utilizing **Helvetica** as a functional fallback for form-heavy body content. Geometry is characterized by soft-industrial 4px to 8px radii on controls, with more generous 16px radii reserved for content surfaces.

## Signature DNA
1. **Terracotta Utility** (The use of `#da5039` for primary CTAs and critical status markers across all pages creates a high-visibility "action" layer above the industrial base).
2. **Industrial Sans Serif** (Barlow's condensed geometry, specifically at 700 weight for headings like the 56px display hero, reinforces a "built for distributors" durability).
3. **Slate Depth** (The heavy use of `#132c41` for footer surfaces and primary text creates a high-contrast 14.3:1 ratio that ensures legibility in high-utility environments).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--color-white` | `#ffffff` | Page background, button text | 119 | 1 | `css_variable` |
| `--color-gray-100` | `#f2f5f7` | Secondary surface, input backgrounds | 24 | 1 | `computed_style` |
| `--color-gray-300` | `#d1d5db` | Disabled states, decorative borders | 15 | 1 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--color-dark-alt` | `#132c41` | Primary text, footer background | 520 | 1 | `css_variable` |
| `--color-primary` | `#da5039` | Primary CTA background, active tags | 59 | 1 | `css_variable` |
| `--color-info-dark` | `#2a7991` | Secondary actions, info-themed UI | 23 | 1 | `css_variable` |
| `--color-cream` | `#fff4e3` | Accent surface background | 12 | 1 | `css_variable` |
| `--color-primary-light` | `#ff7e69` | News tags, secondary highlights | 8 | 1 | `css_variable` |
| `--color-tag-engine` | `#86d1c3` | Decorative only (About page) | 2 | 0.6 | `computed_style` |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `--color-success` | `#469c6c` | Success indicators |
| `--hsf-default-erroralert__color` | `#e51520` | Error validation text |
| `--color-warning` | `#f4b74e` | Warning states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Barlow | 400, 500, 700 | Heading, Display, UI | Barlow (Google Fonts) | OFL |
| Helvetica | 400 | Body, Form inputs | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.hero}` | 56px | 61.6px | normal | 700 | Hero display | `em`, `h1` |
| `{type.heading.lg}` | 48px | 60px | normal | 700 | Section headers | `h2` |
| `{type.heading.md}` | 36px | 45px | normal | 700 | Sub-sections | `h2` |
| `{type.heading.sm}` | 30px | 37.5px | normal | 700 | Card titles | `h3` |
| `{type.body.lg}` | 20px | 32.04px | normal | 400 | Lead paragraph | `span` |
| `{type.body.md}` | 18px | 32.04px | normal | 400 | Default body | `div.span12` |
| `{type.label.caps}` | 16px | 24px | 0.4px | 700 | Eyebrows | `div.uppercase` |
| `{type.button}` | 18px | 32.04px | normal | 500 | CTA text | `a.btn-primary` |

### Principles
1. **Condensed Authority:** Use Barlow 700 for all primary headings to maintain an industrial, efficient feel.
2. **Vertical Rhythm:** Line heights for body text are generous (approx 1.7x) to ensure legibility in dense information blocks.
3. **Uppercase Eyebrows:** Small labels above headings use 700 weight and 0.4px tracking to differentiate from narrative text.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 45 |
| `{space.sm}` | 12px | 15 |
| `{space.md}` | 20px | 132 |
| `{space.lg}` | 32px | 8 |
| `{space.xl}` | 48px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 454 occurrences |
| `{radius.sm}` | 4px | Buttons, inputs, small cards | 42 occurrences |
| `{radius.md}` | 8px | Feature cards | 38 occurrences |
| `{radius.lg}` | 16px | Large surface containers | 57 occurrences |
| `{radius.full}` | 50px | Pill buttons, circular icons | 28 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | none | Default cards | Pricing page |
| `raised` | 0 10px 15px -3px rgba(0,0,0,0.1) | Hovered feature cards | About page |
| `overlay` | 0 1px 3px 0px rgba(0,0,0,0.1) | Sticky navigation | Home page |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Request a Demo)
**Pages observed:** Home, Pricing, About
**Spec:** Background: `#da5039` | Text: `#ffffff` | Radius: `4px` | Padding: `8px 20px` | Typography: Barlow 500 18px
**States observed:** Default: Captured | Hover: Not captured

#### Text Input
**Role:** Form data entry
**Pages observed:** Pricing
**Spec:** Background: `#f2f5f7` | Border: 1px `#f2f5f7` | Radius: `2px` | Padding: `8px` | Typography: 18px
**States observed:** Default: Captured | Focus: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product benefits
**Pages observed:** Home, About
**Spec:** Background: `#ffffff` | Radius: `16px` | Border: 0px | Shadow: `none` (default)
**States observed:** Default: Captured | Hover: `raised` shadow

#### Pricing Tier Card
**Role:** Displaying plan options
**Pages observed:** Pricing
**Spec:** Background: `#fcfdfe` | Radius: `4px` | Border: 1px `#d1d5db` | Padding: `32px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Footer
**Role:** Global site navigation and contact
**Pages observed:** Home, Pricing, About
**Spec:** Background: `#132c41` | Text: `#ffffff` | Typography: Barlow 400 14px
**States observed:** Default: Captured

#### FAQ Accordion
**Role:** Information disclosure
**Pages observed:** Home, Pricing
**Spec:** Border-bottom: 1px `#d1d5db` | Typography (Question): Barlow 400 25px
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max content width | 1200px |
| Section padding | 80px (vertical) |
| Grid columns | 12 |

## Imagery & decoration
- **Photography:** Features real people in industrial/warehouse environments (distributor settings).
- **Iconography:** Simple, thin-stroke icons in `#132c41` or `#da5039`.
- **Avoid:** High-gloss gradients, 3D illustrations, or abstract tech-vaporware imagery.

## Do's
- Use `#da5039` for the primary "Request a Demo" action.
- Set all main headings in Barlow 700.
- Apply a 16px border radius to large white surface cards.
- Use `#132c41` for dark section backgrounds to maintain brand contrast.
- Ensure 20px padding (`{space.md}`) between related UI elements.

## Don'ts
- **Wrong:** Using a generic blue for primary buttons. **Right:** Use Terracotta `#da5039`. **Reason:** Brand identity and high-visibility action path.
- **Wrong:** Setting body copy in Barlow. **Right:** Use Helvetica or a standard sans-serif for long-form text. **Reason:** Legibility and rendering performance in forms.
- **Wrong:** Using sharp 0px corners for buttons. **Right:** Use 4px radius. **Reason:** Consistency with the "soft-industrial" component language.
- Do not use `#e51520` (Error Red) for anything other than validation alerts.
- Do not mix multiple shadow styles on a single page.

## Similar brands
- Fastenal (Industrial utility)
- Grainger (Distribution-focused hierarchy)
- Caterpillar (Heavy-duty industrial typography)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #da5039;
  --color-dark-alt: #132c41;
  --color-gray-100: #f2f5f7;
  --font-heading: 'Barlow', sans-serif;
  --radius-card: 16px;
  --radius-control: 4px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #da5039;
  --color-slate-900: #132c41;
  --font-barlow: "Barlow";
  --shadow-raised: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
```

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Mobile-specific navigation transitions (hamburger menu behavior) were not sampled.
- Dark mode variants were not observed; the system appears strictly light-mode with dark-accented sections.

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