# Peoplereign Design System

> Corporate stability meets AI precision through a palette of deep navy and slate gray anchored by geometric Poppins headlines.

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

## TL;DR
Peoplereign utilizes a "monochrome-plus" system where the primary visual weight is carried by a deep navy (`#31375b`) and a neutral slate gray (`#5c6770`). The interface is structured around a clean white canvas (`#ffffff`) with high-contrast typography. Headlines use Poppins in weights ranging from 600 to 900, often featuring tight or negative letter-spacing for a modern, authoritative feel. Interactive elements are primarily defined by the navy accent, while secondary information and body text consistently use the slate gray tone.

## Signature DNA
1. **The Navy Anchor** (`#31375b`): Used for primary navigation, footer backgrounds, and hover states, providing a consistent "dark mode" frame for the light-canvas content.
2. **Geometric Headline Stack**: Poppins headlines at 35px (`weight 600`) and 26px (`weight 900`) create a rigid, professional hierarchy.
3. **Slate Body Neutrality** (`#5c6770`): Unlike standard black or pure gray, the system uses a specific blue-tinted slate for all body copy, checklists, and accordion content to maintain brand harmony.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text, card surfaces | 100 | 1 | `css_variable:--awb-color1` |
| `{color.gray.light}` | `#f1f1f1` | Dividers, unfilled progress bars, social backgrounds | 8 | 1 | `css_variable:--awb-color2` |
| `{color.border}` | `#dcdcdc` | Canvas borders and editor backgrounds | 33 | 1 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.slate}` | `#5c6770` | Primary body text, checklist text, testimonials | 205 | 1 | `css_variable:--body_typography-color` |
| `{color.navy.deep}` | `#31375b` | Header/Footer backgrounds, primary links, hover states | 47 | 1 | `css_variable:--awb-color6` |
| `{color.navy.muted}` | `#505492` | Form focus borders, secondary surface backgrounds | 7 | 1 | `css_variable:--form_focus_border_color` |
| `{color.charcoal}` | `#272d3a` | H1-H5 headings, inactive accordion titles | 6 | 1 | `css_variable:--h1_typography-color` |

### Semantic
| Token | Hex | Role | Source |
|-------|-----|------|--------|
| `{color.success}` | `#08ce86` | Success backgrounds and accents | `css_variable:--success_bg_color` |
| `{color.warning}` | `#fdb946` | Warning backgrounds and accents | `css_variable:--warning_bg_color` |
| `{color.danger}` | `#ff6186` | Error/Danger backgrounds | `css_variable:--danger_bg_color` |
| `{color.info}` | `#4d39e9` | Information accents | `css_variable:--info_bg_color` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Poppins | 400, 600, 700, 900 | Headings, Buttons, Nav | Poppins (Google Fonts) | OFL |
| Karla | 400, 700 | Body, Testimonials | Karla (Google Fonts) | OFL |
| Font Awesome 5 Brands | 400 | Social Icons | N/A | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h2}` | 35px | 43.75px | 0.5px | 600 | Section Headlines | `h2.fusion-title-heading` |
| `{type.h3.bold}` | 26px | 33.8px | -1px | 900 | Emphasis/Subheads | `strong` |
| `{type.h3}` | 26px | 33.8px | -1px | 600 | Responsive Subheads | `h3.fusion-responsive-typography` |
| `{type.h4}` | 20px | 30px | normal | 600 | Card/Group Titles | `h4.fusion-title-heading` |
| `{type.body.lg}` | 18px | 30.6px | normal | 400 | Primary Body | `section#content` |
| `{type.body.bold}` | 18px | 30.6px | normal | 700 | Strong Body | `strong` |
| `{type.button}` | 15px | 17px | normal | 700 | CTA Buttons | `a.fusion-button` |
| `{type.nav}` | 14px | 23.8px | normal | 400 | Menu Items | `li#menu-item` |

### Principles
1. **Negative Tracking on Display**: Subheadings (`26px`) use `-1px` letter spacing to increase visual density.
2. **High Contrast Body**: Body text uses Karla at `18px` with a generous `1.7` line-height ratio for readability.
3. **Weight-Driven Hierarchy**: The system relies on Poppins weight jumps (from 400 to 600/900) rather than color shifts to denote importance.

## Spacing
**Base unit:** Custom (Multiples of 10 and 20 preferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 28 |
| `{space.sm}` | 20px | 35 |
| `{space.md}` | 40px | 12 |
| `{space.lg}` | 50px | 10 |
| `{space.xl}` | 143px | 23 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Default for all sections and cards | 343 occurrences |
| `{radius.pill}` | 50px | Specific panel elements | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | Standard sections and cards | 100% of components |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (Request Demo)
**Pages observed:** All
**Spec:** Background `#31375b` (hover) / `#ffffff` (default) | Text `#ffffff` | Radius `0px` | Typography `{type.button}`
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Accordion
**Role:** FAQ and content disclosure
**Pages observed:** Pricing
**Spec:** Title Text `#6d77b0` | Content Text `#5c6770` | Divider `#f1f1f1` | Radius `0px`
**States observed:** Inactive: `#272d3a` | Active: captured

#### Checklist
**Role:** Feature lists
**Pages observed:** About, Pricing
**Spec:** Text `#5c6770` | Icon Color `#6d77b0` | Divider `#f1f1f1`
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Navy Section
**Role:** High-impact content bands (Footer, Hero)
**Pages observed:** All
**Spec:** Background `#2c345b` | Text `#ffffff` | Padding `40px 143px`
**States observed:** Default: captured

#### Pricing Card
**Role:** Plan comparison
**Pages observed:** Pricing
**Spec:** Background `#ffffff` | Border `1px #dcdcdc` | Header Text `#272d3a`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | ~1140px (derived from 142.5px margins on 1440px) |
| Section Padding (Vertical) | 40px - 50px |
| Section Padding (Horizontal) | 143px |

## Imagery & decoration
- **Photography**: High-resolution office/team imagery with natural lighting.
- **Iconography**: Font Awesome 5 Brands for social; custom geometric icons for features.
- **Avoid**: Rounded corners on containers, drop shadows, and vibrant gradients.

## Do's
- Use `#5c6770` for all long-form body text to maintain the slate-blue brand tone.
- Apply `0px` border radius to all container elements.
- Set Poppins to `weight 900` for high-emphasis subheads at `26px`.
- Maintain `143px` horizontal padding for standard desktop content sections.
- Use `#f1f1f1` for subtle dividers between list items.

## Don'ts
- **Wrong:** Using `#000000` for body text. **Right:** Use Slate Gray `#5c6770`. **Reason:** Pure black breaks the softened professional palette.
- **Wrong:** Applying shadows to cards. **Right:** Use 1px borders in `#dcdcdc`. **Reason:** The brand identity is strictly flat.
- **Wrong:** Using sub-brand colors (like Vivid Orange `#ff6900`) for parent-level navigation. **Right:** Use Navy `#31375b`. **Reason:** Parent brand authority must remain monochrome/navy.

## Similar brands
- ServiceNow
- Workday
- Zendesk (Legacy)
- SAP

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #31375b;
  --color-body: #5c6770;
  --color-heading: #272d3a;
  --color-surface: #ffffff;
  --color-divider: #f1f1f1;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Karla', sans-serif;
  --radius-base: 0px;
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "brand": {
      "navy": { "value": "#31375b" },
      "slate": { "value": "#5c6770" },
      "charcoal": { "value": "#272d3a" }
    }
  },
  "font": {
    "family": {
      "heading": { "value": "Poppins" },
      "body": { "value": "Karla" }
    }
  }
}
```

## Agent prompt examples
- "Create a feature section with a white background, using Poppins 600 for the title in #272d3a and Karla 400 for the description in #5c6770. Ensure 0px border radius."
- "Generate a footer component with a #31375b background and white text, using 14px Poppins for the navigation links."
- "Design a pricing table with 1px #dcdcdc borders and no shadows, using #6d77b0 for the accent icons."

## Known gaps
- Shadow tokens were not detected in the rendered CSS (system is confirmed flat).
- Specific mobile-only typography scale for H1 was not explicitly captured in the top 8 occurrences.

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