# Workhub Design System

> High-contrast compliance canvas utilizing vibrant orange accents against a clean, geometric Poppins-driven layout.

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

## TL;DR
Workhub is a high-utility compliance platform that balances professional density with high-energy brand accents. The system is anchored by **Poppins**, a geometric sans-serif used across all hierarchy levels from 55px display headers to 12px captions. The primary brand voltage is delivered via a saturated orange (`#f05123`), used exclusively for primary actions and critical highlights. Surfaces are predominantly white (`#ffffff`) or a very light cool gray (`#f8f8fc`), with depth created through large, soft shadows (`rgba(12, 0, 46, 0.1)`) rather than heavy borders.

## Signature DNA
1. **The Saturated Primary Action** (Vibrant orange `#f05123` pills against white backgrounds, creating immediate focal points on every page.)
2. **Soft-Depth Card Geometry** (15px rounded corners paired with aggressive 30px-40px blur shadows, giving the UI a floating, layered feel.)
3. **Geometric Type Hierarchy** (Strict adherence to Poppins with a preference for 600 weight in headers and 300/400 weight for high-density body copy.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| White | `#ffffff` | Page background, button text, card surface | 76 | 1.0 | `--white` |
| Light Gray | `#f8f8fc` | Secondary section backgrounds, pricing cards | 68 | 1.0 | `--light` |
| Dark Ink | `#212322` | Primary text, footer backgrounds, borders | 72 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| Workhub Orange | `#f05123` | Primary CTAs, active links, brand highlights | 126 | 0.8 | Computed Style |
| Muted Slate | `#6a6a7e` | Secondary text, icons, button outlines | 317 | 0.8 | Computed Style |
| Deep Navy | `#222d39` | Emphasis text in pricing tiers | 33 | 0.8 | Computed Style |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| Success | `#28a745` | Confirmation states (token: `--green`) |
| Error | `#dc3545` | Validation errors (token: `--red`) |
| Warning | `#ffc107` | Cautionary alerts (token: `--yellow`) |

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

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `display-mega` | 55px | 66px | normal | 600 | Hero display | `h5` |
| `display-lg` | 50px | 64px | normal | 600 | Page titles | `h1.banner_title` |
| `display-price` | 50px | 40px | normal | 700 | Pricing numbers | `div.price.f_700` |
| `heading-lg` | 36px | 28px | normal | 600 | Statistics/Counters | `span.counter.one` |
| `heading-md` | 28px | 33.6px | normal | 500 | Section headers | `h2.text-center` |
| `heading-sm` | 20px | 24px | normal | 600 | Card titles | `h3` |
| `body-lg` | 18px | 26px | normal | 500 | Large links/Subheads | `span.btn.btn-link` |
| `body-md` | 16px | 28px | normal | 400 | Default body text | `p` |
| `body-sm` | 15px | 28px | normal | 400 | Secondary content | `section.banner_area` |
| `caption` | 12px | 28px | normal | 500 | Small icons/labels | `i.no-cc` |

### Principles
1. **Header Weight Consistency:** Display and section headers almost exclusively use weight 600.
2. **Line Height Generosity:** Body text maintains a 1.75x ratio (16px/28px) for readability in dense compliance contexts.
3. **Orange Emphasis:** Inline text emphasis uses `#f05123` to draw attention to keywords within paragraphs.

## Spacing
**Base unit:** 8px (inferred)
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `space-xs` | 8px | 79 |
| `space-sm` | 16px | 43 |
| `space-md` | 32px | 46 |
| `space-lg` | 60px | 8 |
| `space-xl` | 120px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-none` | 0px | Section containers | 496 occurrences |
| `radius-sm` | 4px | Form inputs | Observed on pricing page |
| `radius-md` | 15px | Standard cards | `radius: 15px` |
| `radius-pill` | 45px | CTA Buttons | `radius: 45px` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | none | Default surfaces | Pricing table |
| `elevated` | `rgba(12, 0, 46, 0.1) 0px 30px 40px 0px` | Feature cards | Main homepage grid |
| `floating` | `rgba(38, 59, 94, 0.1) 0px 20px 40px 0px` | Hover states / Icons | Feature icons |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary site actions
**Pages observed:** All
**Spec:** Background `#f05123` | Text `#ffffff` | Radius `45px` | Padding `14px 32px` | Font `16px/500`
**States observed:** Default, Hover (not captured)

#### Ghost Button
**Role:** Secondary actions / Pricing links
**Pages observed:** All
**Spec:** Background `transparent` | Text `#f05123` | Border `1px solid #f05123` | Radius `45px` | Padding `0px 36px`
**States observed:** Default

### Tier 2: Patterns
#### Feature Card
**Role:** Displaying platform capabilities
**Pages observed:** https://workhub.com
**Spec:** Background `#ffffff` | Text `#6a6a7e` | Radius `15px` | Padding `32px` | Shadow `rgba(12, 0, 46, 0.1) 0px 30px 40px 0px`
**States observed:** Default

#### Pricing Tier Card
**Role:** Subscription plan selection
**Pages observed:** https://workhub.com/pricing
**Spec:** Background `#ffffff` | Text `#6a6a7e` | Border `1px solid #6a6a7e` (observed as 0px in some instances) | Radius `15px` | Padding `50px 50px 40px`
**States observed:** Default

### Tier 3: Surface-specific
#### Statistics Bubble
**Role:** Social proof data points
**Pages observed:** https://workhub.com
**Spec:** Background `#ffffff` | Text `#6a6a7e` | Radius `50%` | Shadow `rgba(38, 59, 94, 0.1) 0px 20px 40px 0px`
**States observed:** Default

#### Pricing Comparison Row
**Role:** Detailed feature breakdown
**Pages observed:** https://workhub.com/pricing
**Spec:** Background `#f8f8fc` | Text `#6a6a7e` | Padding `15px 0px` | Font `15px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1170px (standard container) |
| Section Padding | 120px (vertical) |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero text aligns center; Cards stack 1-up. |
| Desktop | 1440px | 3-column feature grids; Horizontal navigation visible. |

## Imagery & decoration
Workhub uses **isometric 3D illustrations** of software interfaces to demonstrate product value. Decorative elements include **dashed connector lines** between statistics bubbles and **circular icons** with soft shadows. It avoids photography of people, preferring abstract software visualizations.

## Do's
- Use `#f05123` for the primary "Sign Up" or "Get Started" buttons.
- Apply `15px` border radius to all content-containing cards.
- Use `Poppins` weight 600 for all section headings.
- Maintain a minimum of `120px` vertical spacing between major homepage sections.
- Use `rgba(12, 0, 46, 0.1) 0px 30px 40px 0px` for cards on white backgrounds.

## Don'ts
- **Wrong:** Using `#007bff` (token `--primary`) for buttons. **Right:** Use `#f05123`. **Reason:** While `--primary` is defined in the CSS, the brand identity is strictly orange.
- Don't use sharp corners (0px) for buttons; always use the `45px` pill shape.
- Don't use dark backgrounds for content cards; stick to `#ffffff` or `#f8f8fc`.
- Don't use weights below 300 for Poppins body text.
- Don't apply heavy borders ( >1px) to cards when a shadow can define the boundary.

## Similar brands
- Gusto
- Zenefits
- Vanta
- Drata

## Quick start

```css
/* CSS Variables */
:root {
  --workhub-orange: #f05123;
  --workhub-ink: #212322;
  --workhub-slate: #6a6a7e;
  --workhub-bg-light: #f8f8fc;
  --font-main: 'Poppins', sans-serif;
  --radius-card: 15px;
  --radius-pill: 45px;
  --shadow-soft: 0px 30px 40px 0px rgba(12, 0, 46, 0.1);
}
```

## Agent prompt examples
- "Generate a primary CTA button using Workhub Orange #f05123, Poppins 16px weight 500, and a 45px border radius."
- "Create a feature card with a white background, 15px border radius, and the signature Workhub shadow: rgba(12, 0, 46, 0.1) 0px 30px 40px 0px."
- "Design a section header using Poppins 28px weight 500 in Dark Ink #212322, centered with 32px bottom margin."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific font size transitions for the 55px display type were not recorded.
- The specific transition timing for the homepage carousel was not captured.

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