---
title: "Workable design system"
variant: extended
source: https://www.workable.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/workable-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Workable · Design System

> Warm, confident software for people-first work

**Theme:** light · **Industry:** saas · **Source:** https://www.workable.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Workable pairs a warm, restrained canvas with crisp dark-green typography and generous product imagery. Rounded interface cards, varied section backgrounds, and occasional vivid gradients make a long SaaS homepage feel approachable and structured.

## North star

Use warm neutral section bands and deep-green type to let real product interfaces carry the visual story.

## Overview

The visual system balances a warm, paper-like canvas with high-contrast, practical typography. Cream-tinted sections (#f7f5f1 and #fef1e1) alternate with white areas, while deep green (#004038) anchors navigation, links, and key actions. Headings are large, bold Proxima Nova, often centered for section introductions or left-aligned beside product imagery; body copy is smaller, muted, and comfortably spaced. A wide, centered content frame supports varied compositions: split hero, three-column feature cards, and asymmetric product showcases. Product screenshots are the main visual language, framed in soft rounded rectangles and sometimes set against colored or gradient backdrops. Lavender surfaces and the teal-to-lime-to-purple gradient appear as selective highlights, not as the page’s dominant palette. Generous section gaps and consistent card rounding keep the long page calm and scannable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Ink | `#151a21` | `--color-midnight-ink` | brand | Primary heading and body text, plus the inverse background of the open-platform section. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Canvas, navigation, and the default background for cards and content sections. |
| Warm Parchment | `#f7f5f1` | `--color-warm-parchment` | surface | Main hero and broad feature-section band; gives the page its warm paper-like base. |
| Forest Teal | `#004038` | `--color-forest-teal` | brand | Navigation accents, link text, and the deep-green brand tone used throughout the interface. |
| Soft Graphite | `#3d3e45` | `--color-soft-graphite` | neutral | Muted body copy and secondary explanatory text. |
| Apricot Cream | `#fef1e1` | `--color-apricot-cream` | surface | Warm band behind the demanding-business features and selected supporting cards. |
| Electric Aqua | `#00f5dc` | `--color-electric-aqua` | accent | Leading hue in the occasional multicolor gradient, not a dominant text or surface color. |
| Citrus Lime | `#d5ff4d` | `--color-citrus-lime` | accent | Bright midpoint of the gradient treatment, used as a decorative product-image accent. |
| Vivid Lilac | `#c087ff` | `--color-vivid-lilac` | accent | Gradient endpoint and occasional vivid accent within product visuals. |
| Deep Violet | `#1d0953` | `--color-deep-violet` | accent | Dark violet fill on the small announcement-bar CTA. |
| Lavender Mist | `#e5def8` | `--color-lavender-mist` | surface | Soft lavender fill for selected feature cards and product-related panels. |
| Muted Slate | `#6f7073` | `--color-muted-slate` | neutral | Secondary text appearing in supporting copy and interface details. |
| Vanilla Glow | `#fff2d4` | `--color-vanilla-glow` | surface | Pale warm card fill used as a small variation among product feature cards. |
| Periwinkle Haze | `#c6c4f4` | `--color-periwinkle-haze` | accent | Subtle periwinkle highlight on selected cards and product visuals. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Clean White) · `--color-surface` → `#f7f5f1` (Warm Parchment) · `--color-surface-2` → `#fef1e1` (Apricot Cream) · `--color-surface-3` → `#151a21` (Midnight Ink) · `--color-surface-4` → `#e5def8` (Lavender Mist) · `--color-text` → `#151a21` (Midnight Ink) · `--color-text-muted` → `#3d3e45` (Soft Graphite) · `--color-border` → `#004038` (Forest Teal) · `--color-accent` → `#00f5dc` (Electric Aqua) · `--color-accent-2` → `#c087ff` (Vivid Lilac) · `--color-accent-3` → `#c6c4f4` (Periwinkle Haze)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#151a21` | `#ffffff` | 17.48:1 | AAA |
| `#151a21` | `#f7f5f1` | 16.05:1 | AAA |
| `#151a21` | `#fef1e1` | 15.72:1 | AAA |
| `#3d3e45` | `#ffffff` | 10.64:1 | AAA |
| `#3d3e45` | `#f7f5f1` | 9.77:1 | AAA |
| `#3d3e45` | `#fef1e1` | 9.57:1 | AAA |
| `#3d3e45` | `#151a21` | 1.64:1 | fail |
| `#00f5dc` | `#ffffff` | 1.39:1 | fail |
| `#00f5dc` | `#f7f5f1` | 1.28:1 | fail |
| `#00f5dc` | `#fef1e1` | 1.25:1 | fail |

### Gradients

- `linear-gradient(90deg, rgb(0, 245, 220), rgb(213, 255, 77) 48.5%, rgb(192, 135, 255))`
- `linear-gradient(to right, rgb(247, 245, 241), rgba(0, 0, 0, 0))`
- `linear-gradient(to left, rgb(247, 245, 241), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| proxima-nova | `--font-body` | webfont | 400, 700, 500 | All observed page typography, from display headings and body copy to navigation, links, and buttons. | Lato |

- **proxima-nova:** Use bold weights for prominent headings and links, medium navigation, and regular body copy; generally sentence case with neutral tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 700 | 1.22 | 0 | — | proxima-nova | Oversized lead headings that introduce major page propositions. |
| h1 | 56px | 700 | 1.14 | 0 | — | proxima-nova | Hero headline and primary page-level heading. |
| h2 | 32px | 700 | 1.13 | 0 | — | proxima-nova | Section titles and prominent feature-card headings. |
| h3 | 24px | 400 | 1.5 | 0 | — | proxima-nova | Supporting feature headings and secondary product explanations. |
| body | 18px | 400 | 1.56 | 0 | — | proxima-nova | Introductory descriptions and feature-card body copy. |
| caption | 16px | 700 | 1 | 0 | — | proxima-nova | Compact labels and short, emphasized supporting text. |
| button | 12px | 700 | 1.67 | 0 | — | proxima-nova | Small announcement CTA label. |
| nav | 16px | 500 | 1 | 0 | — | proxima-nova | Primary navigation links and menu labels. |
| link | 16px | 700 | 1 | 0 | — | proxima-nova | Bold text links, including trial and product-detail actions. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 8, 16, 24, 32, 40, 64 px.
- Section rhythm 64px · element gap 40px · card padding 32px · max content width 1208px.

A centered content frame capped at the measured 1208px maximum width uses a spacious, modular rhythm. The opening hero is a two-column composition with left-aligned copy and a large product image; later sections alternate centered introductions, three-column cards, and asymmetric image-and-copy layouts. Broad background bands distinguish product chapters without heavy dividers. The measured spacing scale is based on 8px, with 64px section gaps and generous card interiors. Keep content airy and scannable across the long page.

## Shape & elevation

- Radius: button `16px` · card `16px` · media `16px` · nav `8px` · link `8px` · xs `8px` · sm `16px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease-out` on interactive elements.

The measured system reports no shadows, so favor flat surfaces and clear background contrasts. Cards use rounded corners, usually against alternating section bands, with no heavy outlines. Product images and interface mockups create depth through layered screens and colored backdrops rather than drop shadows.

## Imagery

Product UI screenshots and interface mockups dominate rather than lifestyle photography. Frame them as large rounded panels, often paired with soft gradient or muted-color backdrops; smaller interface details provide evidence of product functionality. Keep screenshots crisp and legible, with visual decoration contained inside the product imagery rather than spreading gradients across the page.

## Components

### Primary navigation

White horizontal header with Workable branding, dark-green and ink navigation, and trial or demo actions; menu labels use the measured 16px nav style.

### Announcement strip

Narrow pale strip above navigation with a release message, small product mark, compact deep-violet CTA, and close control.

### Hero split

Warm parchment section with a bold left-aligned headline, eyebrow, body copy, two text-led actions, and a large rounded product-interface visual.

### Feature card

Rounded 16px card with 32px measured padding, ink heading and copy, and white or lavender-mist background.

### Product showcase

Large screenshot panel paired with smaller interface cards or feature copy; soft gradient backdrops are confined to the media.

### Section introduction

Centered eyebrow, bold section heading, and concise muted description, with ample breathing room above the following content.

### Primary action

Deep-green brand-colored action in the visible header and hero, paired with a simple text link for the secondary action.

### Measured component styles

- **Primary button** (“Check it out”): background #1d0953 · text #ffffff · radius 8px · padding 0px 16px · 700 12px proxima-nova
- **Secondary button** (“See Workable Agent in action”): background #efefef · text #000000 · radius 8px · padding 0px · 700 20px proxima-nova
- **Link** (“Start a free trial”): transparent background · text #004038 · radius 8px · padding 0px · 700 16px proxima-nova
- **Card** (“Post to 200+ job boards Reach millions o”): background #ffffff · text #151a21 · radius 16px · padding 32px · 400 20px proxima-nova
- **Navigation item** (“Products AI Industries Customers Resourc”): transparent background · text #151a21 · radius 0px · padding 0px · 400 20px proxima-nova

## Do

- Use Warm Parchment (#f7f5f1) as the main warm section canvas.
- Set headings in bold Proxima Nova or a close sans-serif substitute.
- Reserve Forest Teal (#004038) for brand links and key navigational emphasis.
- Let product screenshots be the primary imagery.
- Alternate white and warm-tinted section bands to organize content.
- Use rounded cards with generous measured padding and clear text hierarchy.

## Don't

- Do not make gradients the dominant page background.
- Do not add shadows absent from the measured visual system.
- Do not use saturated accents for long text or large page-wide areas.
- Do not compress the spacious section rhythm into dense rows.
- Do not replace product UI imagery with unrelated stock photography.
- Do not introduce unmeasured colors, radii, or spacing values.

## Agent prompt

Build a new Workable-style SaaS page using a warm, spacious product-led system. Use Warm Parchment (#f7f5f1) and Clean White (#ffffff) for alternating section canvases, Midnight Ink (#151a21) for strong typography, and Forest Teal (#004038) for brand links and actions. Use Proxima Nova, or Lato as a free substitute, with bold oversized headings and readable regular-weight body copy. Center content within the measured 1208px maximum width and follow the measured 8px-based spacing scale. Mix split hero layouts, centered section introductions, three-column feature cards, and asymmetric product showcases. Use rounded cards with measured 16px corners and 32px padding. Favor crisp product-interface imagery; confine Electric Aqua (#00f5dc), Citrus Lime (#d5ff4d), and Vivid Lilac (#c087ff) to occasional media gradients. Keep surfaces flat, avoid shadows, and preserve generous whitespace.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Warm-background split hero with left-aligned copy and a large product visual on the right. | Primary and secondary actions, Product-led introduction | Eyebrow label, Bold headline, Rounded product image |
| 2 | logo-cloud | Single horizontal band of customer marks beneath the hero content. | Social proof | Customer logos, Muted presentation |
| 3 | how-it-works | Centered introduction and explanatory copy above a compact action. | Product explanation, Watch or explore action | Centered heading, Eyebrow, Outlined action |
| 4 | feature-grid | Three-column feature layout combining lavender cards and large recruiting-interface visuals. | Sequential capability explanation, Product proof | Rounded cards, Interface mockups, Metrics strip |
| 5 | product-showcase | Centered section introduction followed by a wide product image and adjacent feature content. | Platform overview, Capability discovery | Large product screenshot, Warm section band |
| 6 | feature-grid | Long, dense three-column card system interspersed with wide interface imagery. | Feature discovery, Progressive product detail | White and tinted cards, Image panels, Arrow links |
| 7 | feature-split | Centered section heading and summary on a subtly warm background. | Cross-sell to HR workflows | Centered introduction, Soft background band |
| 8 | feature-grid | Multi-column HR feature cards with alternating text and wide product-interface images. | Feature discovery, Lifecycle overview | Rounded cards, Interface imagery, Lavender callout |
| 9 | integrations | Dark two-column section with a centered introduction and product illustration beside white cards. | Developer exploration, Integration options | Inverse background, Product visual, Light information cards |
| 10 | feature-grid | Centered introduction followed by an asymmetric grid of product visuals and colored feature cards. | Trust building, Capability discovery | Apricot section band, Dashboard imagery, Colored cards |
| 11 | cta | Closing white section with a concise final message and prominent next steps. | Trial conversion, Demo request | Closing headline, Paired actions |

## Source CSS custom properties (selected)

```css
--font-size-2xs: 1.2rem;
--font-size-xs: 1.6rem;
--font-size-sm: 1.8rem;
--font-size-md: 2rem;
--font-size-lg: 2.4rem;
--font-size-xl: 3.2rem;
--font-size-2xl: 4rem;
--font-size-3xl: 5.6rem;
--font-size-4xl: 7.2rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/workable-com