# Workland Design System

> Corporate blue authority meets high-voltage sky gradients and soft-radius elevation.

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

## TL;DR
Workland utilizes a "monochrome-plus" system where a deep slate foundation `#37474f` anchors high-contrast white surfaces. The brand's energy is derived from a vibrant sky-blue primary accent `#55c4ff` and a secondary indigo `#072e99`, often deployed in gradients. Typography is a sophisticated mix of **Open Sans** for authoritative displays and **Zilla Slab** for characterful sub-headings. Components favor soft, approachable geometry with border radii ranging from 10px to 20px, frequently lifted by a signature 16px soft shadow.

## Signature DNA
1. **The Sky Gradient** (Vibrant sky blue `#55c4ff` to soft blue `#90c9e8` used as a high-voltage signal for primary actions and section transitions, visible on Homepage and Pricing).
2. **Soft-Shell Elevation** (Cards and surfaces use a specific `0px 0px 16px` shadow with a 10px radius, creating a "floating" effect against the white canvas).
3. **Slab-Serif Accents** (The use of **Zilla Slab** for mid-tier headings provides a human, "agency-style" contrast to the clean Open Sans display type).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.canvas}` | `#ffffff` | Page background, card surfaces, primary text | 66 | 1 | `computed_style` |
| `{colors.ink-deep}` | `#212934` | Primary headings (H1-H6), post titles | 21 | 1 | `--h1_typography-color` |
| `{colors.ink-body}` | `#37474f` | Default body text, checklist text | 180 | 1 | `--body_typography-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.primary}` | `#55c4ff` | Primary button background, scrollbar | 12 | 1 | `--awb-color4` |
| `{colors.primary-soft}` | `#90c9e8` | Button gradient top, hover states | 3 | 1 | `--button_gradient_top_color` |
| `{colors.indigo}` | `#072e99` | Links, FAQ titles, accordion headers | 9 | 1 | `--link_color` |
| `{colors.surface-dark}` | `#1b2032` | Dark section backgrounds, flip boxes | 3 | 1 | `--flip_boxes_front_bg` |
| `{colors.sky-vivid}` | `#00b0ff` | Secondary button text (decorative_only) | 6 | 1 | `--awb-color5` |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `{colors.success}` | `#08ce86` | Success backgrounds and accents |
| `{colors.error}` | `#ff6186` | Danger/Error backgrounds and accents |
| `{colors.warning}` | `#fdb946` | Warning backgrounds and accents |
| `{colors.info}` | `#4d39e9` | Info backgrounds and accents |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Open Sans | 400, 600, 700 | Display, Headings, Body | N/A (Google Font) | Apache 2.0 |
| Zilla Slab | 400, 700 | Sub-headings, Accents | N/A (Google Font) | OFL |
| Poppins | 600 | Buttons, Sticky Nav | N/A (Google Font) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 44px | 51.04px | normal | 600 | Hero H1 | `h1.fusion-title-heading` |
| `{type.display-lg}` | 40px | 48px | normal | 400 | Section H2 | `h2.fusion-title-heading` |
| `{type.display-md}` | 40px | 48px | normal | 700 | Bold Display | `b` |
| `{type.heading-sm}` | 26px | 46.8px | normal | 400 | Intro Text | `p` |
| `{type.heading-slab}` | 24px | 33.6px | normal | 400 | Sub-section | `h5.fusion-title-heading` |
| `{type.button-lg}` | 20px | 17px | normal | 600 | Nav Buttons | `a#sticky-nav-btn` |
| `{type.button-md}` | 18px | 21px | normal | 600 | Primary CTAs | `a.fusion-button` |
| `{type.body-md}` | 16px | 28.8px | normal | 400 | Default Body | `section#content` |
| `{type.body-sm}` | 14px | 17px | normal | 600 | Small CTAs | `a#home-btn` |

### Principles
1. **Heading Hierarchy** uses Open Sans for primary authority and Zilla Slab for secondary "storytelling" headers.
2. **Body Legibility** is maintained with a generous 1.8x line-height (28.8px on 16px base).
3. **Button Typography** is exclusively Poppins 600, providing a geometric, modern feel distinct from the body prose.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.sm}` | 13px | 9 |
| `{space.md}` | 20px | 18 |
| `{space.lg}` | 30px | 9 |
| `{space.xl}` | 40px | 12 |
| `{space.section}` | 68px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers | 240 occurrences |
| `{radius.xs}` | 2px | Form inputs, specific buttons | `a#home-btn` |
| `{radius.md}` | 10px | Standard Cards | `Card` component |
| `{radius.lg}` | 15px | Large Feature Buttons | `Rounded Button` (20px size) |
| `{radius.xl}` | 20px | Primary CTAs | `Rounded Button` (14px size) |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.soft}` | `rgb(175, 175, 175) 0px 0px 16px 0px` | Feature cards, Pricing tiers | Card components |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main site CTAs
**Pages observed:** All
**Spec:** Background `{colors.primary}` (#55c4ff) | Text `{colors.canvas}` (#ffffff) | Radius `{radius.xl}` (20px) | Padding 13px 29px | Typography `{type.body-sm}` (Poppins 600)
**States observed:** Default | Hover: Captured (uses `{colors.primary-soft}`)

#### Rounded Button (Secondary)
**Role:** Ghost or Outline actions
**Pages observed:** All
**Spec:** Background `{colors.canvas}` (#ffffff) | Text `{colors.primary}` (#55c4ff) | Radius `{radius.xl}` (20px) | Border 1px `{colors.primary}`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Solution highlights
**Pages observed:** Homepage, About
**Spec:** Background `{colors.canvas}` (#ffffff) | Radius `{radius.md}` (10px) | Shadow `{shadow.soft}` | Text `{colors.ink-body}` (#37474f)
**States observed:** Default | Hover: Not captured

#### Dark Surface Section
**Role:** High-contrast content blocks
**Pages observed:** Homepage
**Spec:** Background `{colors.surface-dark}` (#1b2032) | Text `{colors.canvas}` (#ffffff) | Padding 177px 30px
**States observed:** Default

### Tier 3: Surface-specific

#### Pricing Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background `{colors.canvas}` (#ffffff) | Radius `{radius.md}` (10px) | Shadow `{shadow.soft}` | Header Text `{colors.indigo}` (#072e99)
**States observed:** Default

#### Sticky Nav Button
**Role:** Persistent conversion
**Pages observed:** All
**Spec:** Background `{colors.primary}` (#55c4ff) | Text `{colors.canvas}` (#ffffff) | Radius `{radius.xl}` (20px) | Typography `{type.button-lg}` (20px)
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1200px (inferred from desktop) |
| Section Padding (Vertical) | 68px - 143px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Nav collapses to hamburger; padding reduces to 30px; buttons stack. |
| Desktop | 1440px | Multi-column grids (3-up for cards). |

## Imagery & decoration
Workland uses high-resolution photography of professional environments with blue-tinted overlays. Decoration includes CSS-driven gradients (Sky Blue to Indigo) and the "Atlas" globe motif.

## Do's
- Use `#37474f` for all long-form body text to ensure WCAG AA contrast.
- Apply `{shadow.soft}` to cards that contain interactive content.
- Use **Zilla Slab** for sub-headings that introduce new service categories.
- Ensure primary CTAs use the `{radius.xl}` (20px) pill shape.
- Maintain a minimum vertical section gap of 68px.

## Don'ts
- **Wrong:** Using `#55c4ff` for body text. **Right:** Use `#37474f`. **Reason:** Contrast and legibility.
- **Wrong:** Labeling `#072e99` (Indigo) as the primary brand color. **Right:** It is an accent/link color; `#55c4ff` is the primary action color.
- **Wrong:** Using sharp corners on cards. **Right:** Use `{radius.md}` (10px).
- Do not use Poppins for body text; it is reserved for buttons and navigation.
- Do not apply shadows to the main dark surface sections (`#1b2032`).

## Similar brands
- LinkedIn (Professional blue/white palette)
- Greenhouse (Recruitment SaaS hierarchy)
- Indeed (Functional, type-heavy layout)

## Quick start

### CSS Custom Properties
```css
:root {
  --workland-primary: #55c4ff;
  --workland-primary-soft: #90c9e8;
  --workland-ink-deep: #212934;
  --workland-ink-body: #37474f;
  --workland-indigo: #072e99;
  --workland-surface-dark: #1b2032;
  --workland-shadow-soft: 0px 0px 16px 0px rgba(175, 175, 175, 1);
  --workland-radius-card: 10px;
  --workland-radius-pill: 20px;
}
```

## Agent prompt examples
- "Create a feature card using Workland's `#ffffff` background, a `10px` border radius, and the `0px 0px 16px` soft shadow. Use `#212934` for the title in Open Sans."
- "Design a primary button with a gradient from `#90c9e8` to `#55c4ff`, white text in Poppins 600, and a `20px` border radius."
- "Generate a dark section layout using `#1b2032` as the background and white text, following Workland's 1.8x line-height rule."

## Known gaps
- Hover states for secondary buttons were not captured in the source.
- Specific mobile breakpoint values (e.g., 768px) were not explicitly declared in tokens; inferred from viewport analysis.
- Detailed icon set provenance was not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-----|----------|--------------|
| Homepage | https://workland.com | 1440px | 2026-06-06 |
| Pricing | https://workland.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://workland.com | 390px | 2026-06-06 |