# Whoplusyou Design System

> A clean, geometric canvas anchored by Poppins typography and a high-contrast corporate blue, punctuated by flat character illustrations.

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

## TL;DR
Whoplusyou utilizes a structured, Bootstrap-aligned foundation that prioritizes legibility and professional utility. The system is built on a pure white canvas (`#ffffff`) with a primary typographic anchor in Poppins, ranging from medium-weight headlines to high-line-height body text. The brand's "voltage" is concentrated in a specific corporate blue (`#1b75bc`), used for primary actions and link states, while content is delivered in a soft neutral gray (`#5a5a5a`). Layouts are characterized by generous vertical rhythm and the integration of flat, multi-cultural character illustrations that soften the technical grid.

## Signature DNA
1. **Geometric Typography** (Poppins is used exclusively across all roles, with a specific 500-weight medium for display headers to maintain a friendly but professional posture.)
2. **The Blue Anchor** (The use of `#1b75bc` as the sole functional accent color for CTAs, focus rings, and active indicators creates a singular path for user interaction.)
3. **Flat Illustration Layer** (The interface relies on illustrative storytelling rather than photography, using stylized human figures to represent "communities" and "diversity" on a clean white ground.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| Whoplusyou (Parent) | #1b75bc | Flat character illustration | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.black}` | `#000000` | Headings, emphasis text, shadows | 13 | 1.0 | `--bs-black` |
| `{colors.white}` | `#ffffff` | Page background, button text | 3 | 1.0 | `--bs-body-bg` |
| `{colors.gray}` | `#5a5a5a` | Default body text, secondary labels | 19 | 1.0 | `--bs-body-color` |
| `{colors.surface-soft}` | `#fafafa` | Sidebar background, subtle panels | 1 | 0.8 | `--wpy-sidebar-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | `#1b75bc` | Primary buttons, links, active indicators | 6 | 1.0 | `--bs-primary` |
| `{colors.warm-stone}` | `#544837` | Decorative text / secondary emphasis | 4 | 0.6 | Computed style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{colors.success}` | `#2ecc71` | Valid states |
| `{colors.error}` | `#e74c3c` | Invalid states / errors |
| `{colors.warning}` | `#ffc107` | Warning states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Poppins | 400, 500, 700 | All roles (Display, Body, UI) | Poppins (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-1}` | 36px | 43.2px | normal | 500 | Main page headers | `h1.display-1` |
| `{type.heading-bold}` | 36px | 43.2px | normal | 700 | Section emphasis | `strong` |
| `{type.body-lg}` | 16px | 24px | normal | 400 | Navigation, standard body | `nav.pb-4` |
| `{type.body-footer}` | 16px | 35px | normal | 400 | Footer links (loose) | `a.footer-text` |
| `{type.body-bold}` | 16px | 24px | normal | 700 | Inline emphasis | `strong:nth-of-type(1)` |
| `{type.button}` | 14px | 21px | normal | 400 | CTA labels | `a.btn.btn-primary` |
| `{type.caption}` | 12px | 18px | normal | 400 | Small annotations | Inferred from scale |
| `{type.label-sm}` | 10px | 15px | normal | 500 | Micro-labels | Inferred from scale |

### Principles
1. **Header Restraint:** Display headers use weight 500 (Medium) rather than 700 (Bold) to maintain a modern, open feel.
2. **Vertical Breathing:** Footer links utilize an oversized 35px line-height for extreme touch-target legibility.
3. **Achromatic Content:** 90% of text content is delivered in `#5a5a5a` (Gray) or `#000000` (Black) to ensure the blue accent remains functional.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 6px | 6 |
| `{space.sm}` | 8px | 6 |
| `{space.md}` | 12px | 8 |
| `{space.lg}` | 16px | 12 |
| `{space.xl}` | 24px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Main sections, surfaces | 39 occurrences |
| `{radius.sm}` | 6px | Buttons, form inputs | `a.btn.btn-primary` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.none}` | `none` | Standard surfaces | Default state |
| `{shadow.focus}` | `0 0 0 0.25rem #1b75bc` | Interactive focus | `--bs-focus-ring-color` |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Sign Up / Log In)
**Pages observed:** https://whoplusyou.com
**Spec:** Background `{colors.primary}` (#1b75bc) / Text `{colors.white}` (#ffffff) / Radius 6px / Padding 6px 12px / Typography `{type.button}`
**States observed:** Default | Hover: captured (darker blue) | Focus: captured | Active: captured

#### Ghost Button
**Role:** Secondary navigation actions
**Pages observed:** https://whoplusyou.com
**Spec:** Background transparent / Text `#2f281e` / Border 0px / Radius 6px / Padding 6px 12px
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Navigation Bar
**Role:** Top-level site orientation
**Pages observed:** https://whoplusyou.com
**Spec:** Background `{colors.white}` (#ffffff) / Text `{colors.gray}` (#5a5a5a) / Height: Auto (driven by 16px padding)
**States observed:** Default | Hover: captured

#### Section Header Group
**Role:** Introducing new content blocks
**Pages observed:** https://whoplusyou.com
**Spec:** Typography `{type.display-1}` / Margin-bottom `{space.xl}` (24px)
**States observed:** Static

### Tier 3: Surface-specific

#### Content Surface
**Role:** Subtle background differentiation for feature blocks
**Pages observed:** https://whoplusyou.com
**Spec:** Background `#fafafa` / Text `{colors.gray}` (#5a5a5a) / Border 0px
**States observed:** Static

#### Footer
**Role:** Global site closure
**Pages observed:** https://whoplusyou.com
**Spec:** Background `{colors.white}` (#ffffff) / Text `{colors.gray}` (#5a5a5a) / Border-top 1px solid `#ced4da`
**States observed:** Static

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1320px (Bootstrap Container) |
| Gutter Width | 24px |
| Section Padding | 48px - 80px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Navigation collapses to hamburger menu; text aligns center for hero. |
| Desktop | > 1200px | 12-column grid active; horizontal navigation visible. |

## Imagery & decoration
- **Illustration:** Flat, vector-based human characters with diverse skin tones and modern attire.
- **Iconography:** Simple line-art icons (e.g., magnifying glass, home) used within the mobile app preview.
- **Avoidance:** No heavy drop shadows, no photographic backgrounds, no gradients.

## Do's
- Use Poppins 500 for all primary section headings.
- Apply `#1b75bc` for all interactive elements and focus states.
- Maintain a 24px margin between headers and body paragraphs.
- Use a 6px border radius for all interactive components (buttons, inputs).
- Ensure body text uses `#5a5a5a` for optimal readability against white.

## Don'ts
- **Wrong:** Using `#1b75bc` for large background areas. **Right:** Use it for buttons and links only. **Reason:** To maintain high signal-to-noise ratio for actions.
- **Wrong:** Applying Poppins 700 to body text. **Right:** Use Poppins 400. **Reason:** Weight 700 is reserved for specific emphasis.
- **Wrong:** Introducing sub-brand colors (like Magnet Red) into the parent navigation. **Right:** Keep parent navigation strictly monochrome/blue. **Reason:** Preserves parent brand hierarchy.

## Similar brands
- LinkedIn (Corporate blue, professional networking focus)
- ADP (Clean, utility-first HR tech)
- Workday (Structured grid, emphasis on clarity and white space)

## Quick start

```css
/* CSS Variables */
:root {
  --wpy-primary: #1b75bc;
  --wpy-text-main: #5a5a5a;
  --wpy-heading: #000000;
  --wpy-bg: #ffffff;
  --wpy-radius: 6px;
  --font-family: 'Poppins', sans-serif;
}
```

## Agent prompt examples
- "Create a primary button using #1b75bc background, white Poppins 14px text, and a 6px border radius."
- "Design a section header using Poppins 500 at 36px with a 24px bottom margin."
- "Generate a content card with a #fafafa background and no border or shadow."

## Known gaps
- Hover state hex values for buttons were not explicitly declared in tokens but observed as computed shifts.
- Mobile-specific spacing tokens (e.g., `--bs-gutter-x` overrides) were not fully captured in the single-page analysis.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Main Landing | https://whoplusyou.com | 1440px | 2026-06-06 |
| Mobile View | https://whoplusyou.com | 390px | 2026-06-06 |