# Peoplelogic Design System

> A clean, high-contrast workspace where soft-neutral foundations meet high-energy coral punctuation.

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

## TL;DR
Peoplelogic utilizes a sophisticated "Deep Navy and Coral" palette to balance professional authority with modern accessibility. The system is built on a foundation of **Plus Jakarta Sans**, utilizing heavy weights (700) for high-impact headlines and medium weights (500) for sub-navigation. Surfaces are primarily off-white (`#f3f4f7`) or pure white, while primary actions are defined by a vibrant coral (`#fb6c71`) pill-shaped button. The interface relies on generous spacing (32px-40px blocks) and subtle elevation (`rgba(69, 83, 109, 0.1)`) to organize complex data-driven insights into a modular, card-based layout.

## Signature DNA
1. **The Coral Pulse:** Primary CTAs and critical brand moments use `#fb6c71`, providing a high-energy contrast against the deep navy (`#28303e`) text.
2. **Jakarta Display:** Large-scale typography (up to 64px) in Plus Jakarta Sans with tight line-heights (1.12) creates a bold, "tech-forward" editorial feel.
3. **Hyper-Rounded Geometry:** Interactive elements and badges utilize extreme corner radii (200px) to create a friendly, approachable pill aesthetic that softens the data-heavy nature of the product.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.canvas}` | `#f3f4f7` | Page background and section alternating bands | 2 | 1 | `css_variable:--neutral-1` |
| `{colors.white}` | `#ffffff` | Primary card surfaces and button text | 11 | 0.8 | `computed_style` |
| `{colors.navy}` | `#28303e` | Primary headings and body text | 160 | 1 | `css_variable:--neutral-9` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.coral}` | `#fb6c71` | Primary CTA background, key emphasis text | 27 | 1 | `css_variable:--primary-1` |
| `{colors.slate}` | `#45536d` | Secondary text, button labels, and shadows | 50 | 1 | `css_variable:--neutral-8` |
| `{colors.soft-coral}` | `#ff8da0` | Secondary CTA background | 3 | 0.6 | `computed_style` |
| `{colors.mint}` | `#caebf0` | Decorative surface background (decorative_only) | 1 | 1 | `css_variable:--primary-2` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Plus Jakarta Sans | 400, 500, 600, 700 | All headings, body, and UI | Plus Jakarta Sans (Google) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 64px | 72px | normal | 700 | Hero H1 | `h1` |
| `{type.display-lg}` | 48px | 57.6px | normal | 700 | Section Headers | `div.heading-l` |
| `{type.display-md}` | 40px | 48px | normal | 700 | Subsection Headers | `h2.heading-l` |
| `{type.heading-md}` | 36px | 43.2px | normal | 600 | Feature Titles | `h2.heading-m` |
| `{type.heading-sm}` | 22px | 28.6px | normal | 700 | Card Titles | `h2.heading-s` |
| `{type.button-lg}` | 20px | 24px | normal | 600 | Primary CTA Text | `a.button-primary` |
| `{type.body-lg}` | 18px | 25.2px | normal | 400 | Intro Paragraphs | `p.body-l` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Standard Body | `section.section-home-features-hero` |
| `{type.caption}` | 14px | 21px | normal | 600 | Eyebrows / Badges | `div.body-s.eyebrow` |

### Principles
1. **Bold Hierarchy:** Headings never drop below 700 weight for primary display or 600 for secondary section titles.
2. **Tight Display Leading:** Large display type (48px+) uses a tight 1.12x line-height to maintain visual density.
3. **Navy as Black:** Pure black (#000000) is avoided; `#28303e` is the "ink" for all readable content to maintain brand warmth.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 12px | 10 |
| `{space.sm}` | 16px | 18 |
| `{space.md}` | 32px | 18 |
| `{space.lg}` | 40px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sm}` | 6px | Input fields / Small badges | `role: input` |
| `{radius.md}` | 12px | Controls / Secondary cards | `role: control` |
| `{radius.lg}` | 16px | Feature cards / Pricing tiers | `role: card` |
| `{radius.pill}` | 200px | Primary and Secondary Buttons | `role: panel` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(69, 83, 109, 0.1) 0px 4px 32px 0px` | Content cards on light canvas | Pricing & About pages |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call-to-action (Get Started, Learn More)
**Pages observed:** Home, Pricing, About
**Spec:** Background `{colors.coral}` (#fb6c71) / Text `{colors.white}` (#ffffff) / Radius `{radius.pill}` (200px) / Padding 16px 32px / Typography `{type.button-lg}`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Secondary Badge
**Role:** Inline labels and category tags
**Pages observed:** Home, Pricing
**Spec:** Background `rgba(255, 141, 160, 0.14)` / Text `{colors.slate}` (#45536d) / Border 1px `{colors.soft-coral}` (#ff8da0) / Radius `{radius.sm}` (6px) / Padding 0px 12px

### Tier 2: Patterns

#### Pricing Card
**Role:** Displaying service tiers
**Pages observed:** Pricing
**Spec:** Background `{colors.white}` (#ffffff) / Border 0px / Radius `{radius.lg}` (16px) / Shadow `{shadow.card}`

#### Feature Card
**Role:** Modular content blocks for product benefits
**Pages observed:** About
**Spec:** Background transparent / Border 1px transparent / Radius `{radius.md}` (12px) / Shadow `{shadow.card}`

### Tier 3: Surface-specific

#### Global Footer
**Role:** Site navigation and legal
**Pages observed:** Home, Pricing, About
**Spec:** Background `{colors.navy}` (#28303e) / Text `{colors.white}` (#ffffff) / Padding 64px vertical

#### Navigation Bar
**Role:** Primary site header
**Pages observed:** Home, Pricing
**Spec:** Background `{colors.white}` (#ffffff) / Text `{colors.navy}` (#28303e) / Height 80px

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1200px |
| Section Gap | 80px - 120px |
| Column Grid | 12-column desktop |

## Do's
- Use `#fb6c71` exclusively for the primary action on any given screen.
- Set all H1 and H2 headings in **Plus Jakarta Sans** at weight 700.
- Apply `{radius.pill}` (200px) to all interactive buttons to maintain the brand's "soft-tech" feel.
- Use `{colors.canvas}` (#f3f4f7) to separate major vertical sections of the page.
- Maintain a minimum of 32px padding within all card components.

## Don'ts
- **Wrong:** Using `#caebf0` (Mint) for a primary button. **Right:** Use `#fb6c71`. **Reason:** Mint is a decorative surface token only.
- **Wrong:** Using pure black (#000000) for body text. **Right:** Use `#28303e`. **Reason:** The brand uses a navy-based achromatic scale.
- **Wrong:** Applying sharp corners (0px) to cards or buttons. **Right:** Use a minimum of 12px for cards.
- **Wrong:** Mixing serif fonts into the display hierarchy. **Right:** Stay strictly within the Plus Jakarta Sans family.

## Similar brands
- Linear (High-contrast, clean typography)
- Lattice (HR-tech, card-based modularity)
- Gusto (Friendly professional palette)

## Quick start

### CSS Custom Properties
```css
:root {
  --primary-coral: #fb6c71;
  --primary-navy: #28303e;
  --neutral-canvas: #f3f4f7;
  --neutral-slate: #45536d;
  --radius-pill: 200px;
  --shadow-card: 0px 4px 32px 0px rgba(69, 83, 109, 0.1);
  --font-main: 'Plus Jakarta Sans', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-coral: #fb6c71;
  --color-navy: #28303e;
  --color-canvas: #f3f4f7;
  --font-jakarta: "Plus Jakarta Sans";
  --radius-pill: 200px;
  --shadow-card: 0 4px 32px 0 rgba(69, 83, 109, 0.1);
}
```

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