# Workfall Design System

> High-contrast professional services canvas anchored by a high-voltage coral primary and geometric clarity.

**Source:** [https://workfall.com](https://workfall.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Workfall utilizes a high-energy coral primary (`#ff6647`) against a clean white foundation to signal a modern, tech-forward recruitment platform. The system relies on a dual-font strategy: **DM Sans** provides geometric authority for headings, while **Karla** and **ui-sans-serif** handle high-legibility body content. Layouts are structured around generous vertical spacing and soft-cornered cards (8px to 16px radii), punctuated by pill-shaped primary actions. The palette is strictly controlled, using deep purples (`#100420`) for high-impact display text and a range of cool grays for secondary information.

## Signature DNA
1. **Coral Voltage** (The use of `#ff6647` as a singular, high-saturation flood for primary CTAs and critical UI accents across all pages).
2. **Geometric Heading Stack** (DM Sans headings at weights 400-500 paired with tight line heights for a compact, authoritative editorial feel).
3. **Soft-Floating Surfaces** (The combination of 14-16px border radii and subtle multi-stop shadows to lift feature cards off the white canvas).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text, card surfaces | 47 | 1 | `--color-white` |
| `{color.black}` | `#000000` | Primary text, footer backgrounds | 3 | 1 | `--color-black` |
| `{color.gray.medium}` | `#7c7c7c` | Secondary body text, muted labels | 155 | 0.8 | Computed style |
| `{color.gray.dark}` | `#5b5d5e` | Stronger secondary text | 34 | 0.8 | Computed style |
| `{color.canvas.soft}` | `#f5f5f5` | Alternating section backgrounds | 18 | 0.8 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#ff6647` | Primary CTAs, active states, brand accents | 52 | 1 | `--primary` |
| `{color.accent.deep}` | `#100420` | Hero display text, high-contrast headings | 19 | 0.8 | Computed style |
| `{color.primary.tint}` | `#ffe6e1` | Decorative backgrounds, soft highlights | 14 | 0.8 | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| DM Sans | 400, 500 | Display and Headings | DM Sans (Google) | OFL |
| Karla | 500, 600 | Navigation and UI Labels | Karla (Google) | OFL |
| ui-sans-serif | 300, 400, 500 | Body and System UI | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 61px | 72.96px | normal | 400 | Hero Heading | `h1.font-hero-heading` |
| `{type.display.lg}` | 46px | 55.68px | normal | 500 | Section Heading | `h2.font-sub-heading` |
| `{type.heading.md}` | 30px | 36px | normal | 500 | Feature Titles | `p.relative.z-10` |
| `{type.heading.sm}` | 24px | 32px | normal | 500 | Logo/Sub-headings | `div.logo-text.text-xl` |
| `{type.body.lg}` | 18px | 28px | normal | 400 | Intro Paragraphs | `p.text-base` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Standard Body | `header.fixed.top-0` |
| `{type.body.sm}` | 14px | 20px | normal | 400 | Captions/Small UI | `a.flex.items-center` |
| `{type.caption}` | 12px | 16px | normal | 500 | Micro-copy | `p.text-xs` |

### Principles
1. **Heading Compactness:** Display sizes (46px+) maintain a line-height ratio of ~1.2 to keep large type blocks visually cohesive.
2. **UI Weighting:** Navigation and interactive labels (Karla) use weight 500-600 to distinguish them from static body text.
3. **Contrast Priority:** Primary text on white canvas uses `#100420` or `#000000` to ensure maximum readability.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.1}` | 4px | 75 |
| `{space.2}` | 8px | 107 |
| `{space.3}` | 12px | 149 |
| `{space.4}` | 16px | 82 |
| `{space.6}` | 24px | 39 |
| `{space.8}` | 32px | 25 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sm}` | 8px | Primary Buttons, Small Cards | `radius: 8px` |
| `{radius.md}` | 10px | Feature Cards, Dropdowns | `radius: 10px` |
| `{radius.lg}` | 16px | Large Container Cards | `radius: 16px` |
| `{radius.pill}` | 9999px | Tags, Search Bars | `radius: 9999px` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.05) 0px 1px 3px 0px` | Static Cards | 7 occurrences |
| `{shadow.raised}` | `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px` | Hovered Cards | 15 occurrences |
| `{shadow.overlay}` | `rgba(0, 0, 0, 0.1) 0px 20px 25px -5px` | Modals/Dropdowns | 6 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Hire Now, Find Talent)
**Pages observed:** All
**Spec:** Background `{color.primary}` (#ff6647) | Text `{color.white}` (#ffffff) | Radius `{radius.sm}` (8px) | Padding 10px 32px | Typography `{type.body.lg}` (18px/500)
**States observed:** Default | Hover: `#ea580c` (inferred from Tailwind orange-600) | Focus | Active | Disabled: Not captured

#### Outline Button
**Role:** Secondary actions (Join Us, Browse Articles)
**Pages observed:** All
**Spec:** Background transparent | Text `{color.primary}` (#ff6647) | Border 1px solid `{color.primary}` | Radius `{radius.sm}` (8px) | Padding 10px 32px
**States observed:** Default | Hover | Focus | Active | Disabled: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying services or value props
**Pages observed:** Home, About
**Spec:** Background `{color.canvas.soft}` (#f5f5f5) | Text `{color.gray.dark}` (#5b5d5e) | Radius `{radius.lg}` (16px) | Padding 32px | Shadow: None
**States observed:** Default | Hover | Focus | Active | Disabled: Not captured

#### Navigation Bar
**Role:** Global header
**Pages observed:** All
**Spec:** Background `{color.white}` (#ffffff) | Text `{color.accent.deep}` (#100420) | Height 64px | Border-bottom 1px solid `{color.canvas.soft}`
**States observed:** Default | Sticky | Active: `{color.primary}`

### Tier 3: Surface-specific

#### Pricing Card
**Role:** Tier selection
**Pages observed:** Pricing
**Spec:** Background `{color.white}` (#ffffff) | Border 1px solid `#e5e7eb` | Radius `{radius.sm}` (8px) | Shadow `{shadow.raised}`
**States observed:** Default | Featured: Border `{color.primary}`

## Layout
| Property | Value |
|------|-------|
| Max-width | 1280px |
| Section Padding | 80px (vertical) |
| Grid Columns | 12 |
| Gutter | 24px |

## Do's
- Use `#ff6647` for the primary action on every page to maintain brand scent.
- Pair DM Sans headings with Karla navigation for a consistent geometric feel.
- Apply `{radius.lg}` (16px) to large informational cards to soften the technical aesthetic.
- Maintain a minimum of 80px vertical spacing between major sections.
- Use `#7c7c7c` for secondary body text to reduce visual noise.

## Don'ts
- **Wrong:** Using a generic blue for links. **Right:** Use `#ff6647`. **Reason:** Blue is not part of the Workfall primary palette.
- **Wrong:** Sharp corners on buttons. **Right:** Use `{radius.sm}` (8px). **Reason:** The brand identity relies on soft-geometric shapes.
- **Wrong:** Overusing `#100420` for long-form body text. **Right:** Use `#000000` or `#5b5d5e`. **Reason:** The deep purple is reserved for high-impact display.
- Do not use shadows on flat section backgrounds; reserve them for floating cards.
- Do not mix heading weights within the same section; stick to weight 500 for consistency.

## Quick start

### CSS Custom Properties
```css
:root {
  --primary: #ff6647;
  --accent-deep: #100420;
  --white: #ffffff;
  --gray-medium: #7c7c7c;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --font-heading: 'DM Sans', sans-serif;
  --font-body: 'Karla', sans-serif;
}
```

### Tailwind v4 @theme
```css
@theme {
  --color-primary: #ff6647;
  --color-accent-deep: #100420;
  --font-heading: "DM Sans";
  --font-body: "Karla";
  --radius-card: 16px;
  --shadow-raised: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
```

## Agent prompt examples
- "Generate a hero section with a `#100420` heading in DM Sans, a `#7c7c7c` subtext in Karla, and a primary pill button using `#ff6647`."
- "Create a 3-column feature grid using cards with a 16px border radius, white background, and the `{shadow.subtle}` elevation."
- "Design a navigation bar with a white background, `#100420` text links in Karla (weight 500), and a coral `#ff6647` CTA button."

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