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

# Sauce Labs · Design System

> Editorial typography meets warm, confident engineering.

**Theme:** light · **Industry:** devtools · **Source:** https://saucelabs.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._

Sauce Labs pairs restrained, editorial typography with a warm neutral canvas and softly luminous yellow-green accents. Generous centered hero content gives way to structured product cards, proof points, integration tiles, and enterprise evidence.

## North star

Use an editorial serif headline and warm, low-contrast surfaces, then reserve deep green and yellow-green for clear functional emphasis.

## Overview

The visual identity balances a pale, warm canvas with forest-dark typography and carefully rationed yellow-green light. The hero uses a broad, softly blended yellow-to-ivory field behind a centered serif headline, compact supporting copy, dark pill CTA, and a pixel-textured running animal illustration; this illustrated treatment is expressive rather than a source for the core palette. Alternating off-white and near-white bands create section rhythm without hard colour breaks. P22 Mackinac Pro gives display headlines an editorial, human character, while Atkinson Hyperlegible Next carries navigation, body copy, and card content with functional clarity. Atkinson Hyperlegible Mono appears in small uppercase labels and links. Content shifts between centered statements, three-column outcome cards, stacked audience panels, and integration grids. Fine warm-grey borders and restrained soft shadows separate white cards from the canvas; rounded corners soften dense information. Dark green is reserved for high-contrast controls and product diagrams.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Mist | `#f8f8f8` | `--color-gallery-mist` | surface | Primary near-white canvas for open sections, content bands, and much of the page background. |
| Forest Ink | `#192319` | `--color-forest-ink` | brand | Primary text and inverse dark surface; also anchors dark CTA treatments and the platform diagram. |
| Warm Stone | `#f0f0ec` | `--color-warm-stone` | surface | Alternate section background, visible across the hero, outcome sections, integrations, and brand-story bands. |
| Quiet Sage | `#6a6f6a` | `--color-quiet-sage` | semantic | Muted paragraph text and secondary explanatory copy. |
| Soft Pewter | `#c8c8be` | `--color-soft-pewter` | neutral | Main hairline and card border colour, particularly around white content cards. |
| Sunlit Butter | `#f1e082` | `--color-sunlit-butter` | accent | Yellow highlight in the hero and warm gradient accents that bring focus to selected sections. |
| Paper White | `#fdfdfe` | `--color-paper-white` | surface | Clean card and inset surface against the warmer grey canvas. |
| Pale Graphite | `#d4d5d0` | `--color-pale-graphite` | neutral | Secondary card-edge detail and subtle dividing rules. |
| Moss Link | `#3c483c` | `--color-moss-link` | brand | Small uppercase story-link text and restrained link emphasis. |
| Lemon Sage | `#ebedb8` | `--color-lemon-sage` | accent | Pale green-yellow section surface, used for select proof or highlight bands. |
| Deep Canopy | `#043423` | `--color-deep-canopy` | brand | Occasional dark green heading, text, and link emphasis. |
| Mist Line | `#dbdcdb` | `--color-mist-line` | neutral | Subtle separators and card-border details. |
| Olive Signal | `#6d7344` | `--color-olive-signal` | accent | Olive accent for sparse text or interface details, including small graphic accents. |
| Mature Olive | `#656b52` | `--color-mature-olive` | semantic | Secondary subdued green text, used sparingly for quiet supporting details. |

### Semantic aliases

`--color-canvas` → `#f8f8f8` (Gallery Mist) · `--color-surface` → `#f0f0ec` (Warm Stone) · `--color-surface-2` → `#fdfdfe` (Paper White) · `--color-surface-3` → `#192319` (Forest Ink) · `--color-surface-4` → `#ebedb8` (Lemon Sage) · `--color-text` → `#192319` (Forest Ink) · `--color-text-muted` → `#6a6f6a` (Quiet Sage) · `--color-border` → `#c8c8be` (Soft Pewter) · `--color-accent` → `#f1e082` (Sunlit Butter) · `--color-accent-2` → `#6d7344` (Olive Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#192319` | `#f8f8f8` | 15.26:1 | AAA |
| `#192319` | `#f0f0ec` | 14.18:1 | AAA |
| `#192319` | `#fdfdfe` | 15.94:1 | AAA |
| `#6a6f6a` | `#f8f8f8` | 4.83:1 | AA |
| `#6a6f6a` | `#f0f0ec` | 4.49:1 | AA-large |
| `#6a6f6a` | `#fdfdfe` | 5.04:1 | AA |
| `#6a6f6a` | `#192319` | 3.16:1 | AA-large |
| `#f1e082` | `#f8f8f8` | 1.26:1 | fail |
| `#f1e082` | `#f0f0ec` | 1.17:1 | fail |
| `#f1e082` | `#fdfdfe` | 1.31:1 | fail |

### Gradients

- `linear-gradient(rgba(240, 240, 236, 0), rgb(241, 224, 130) 47%, rgba(240, 240, 236, 0) 101%)`
- `linear-gradient(rgb(240, 240, 236), rgb(248, 248, 248))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Atkinson Hyperlegible Next | `--font-body` | webfont | 400, 600, 500 | Body, navigation, labels, and functional headings | Atkinson Hyperlegible |
| Atkinson Hyperlegible Mono | `--font-mono` | webfont | 500, 400 | Compact uppercase eyebrow labels and story links | IBM Plex Mono |
| P22 Mackinac Pro | `--font-display` | webfont | 400, 700 | Display headlines and prominent editorial statements | Cormorant Garamond |

- **Atkinson Hyperlegible Next:** Mostly regular weight, with selective medium or semibold emphasis; body copy is open and readable.
- **Atkinson Hyperlegible Mono:** Small monospaced uppercase labels with lightly expanded tracking.
- **P22 Mackinac Pro:** Regular-weight serif with tight negative tracking and close leading for large centered statements.

### Type scale — Perfect Fourth (ratio ≈ 1.312, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 70px | 400 | 0.95 | -0.04em | — | P22 Mackinac Pro | Oversized editorial hero or section statement. |
| h1 | 50px | 400 | 0.95 | -0.04em | — | P22 Mackinac Pro | Primary hero headline. |
| h2 | 36px | 400 | 1.1 | -0.04em | — | P22 Mackinac Pro | Major section titles and centered platform statements. |
| h3 | 32px | 400 | 1.1 | 0.005em | — | Atkinson Hyperlegible Next | Feature-card and outcome headings. |
| h4 | 24px | 400 | 1.1 | -0.02em | — | Atkinson Hyperlegible Next | Smaller card titles and audience-panel headings. |
| body | 18px | 400 | 1.4 | 0.017em | — | Atkinson Hyperlegible Next | Main paragraphs, product descriptions, and explanatory copy. |
| caption | 16.5px | 400 | 1.4 | 0.017em | — | Atkinson Hyperlegible Next | Supporting notes, compact card copy, and secondary details. |
| code | 12.5px | 500 | 1.6 | 0.02em | uppercase | Atkinson Hyperlegible Mono | Small uppercase eyebrow labels and technical-style metadata. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 6, 8, 10, 12, 16, 20, 24, 26, 30, 32, 40, 44, 60, 80, 100 px.
- Section rhythm 60px · element gap 20px · card padding — · max content width 1372px.

Use a centered content system capped at the measured 1372px maximum width, with a comfortable density and broad section pauses. The hero is centered and spacious; later bands alternate full-width warm stone and near-white backgrounds. Arrange outcome cards in three columns, audience outcomes as stacked wide panels, and integrations as a categorized grid. Maintain clear alignment within each section: centered for statements and proof, left-aligned for detailed content. The measured spacing scale is generous, with a 60px section gap and 20px element gap as recurring anchors.

## Shape & elevation

- Radius: card `13px` · xs `13px` · sm `32px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.14) 0px 2px 44px 0px`
- Shadow `lg-2` (card): `rgba(0, 0, 0, 0.18) 0px 8px 36px 0px`
- Shadow `lg-3` (card): `rgba(0, 0, 0, 0.18) 0px 7.34px 33.0101px 0px`
- Shadow `lg-4` (section): `rgba(0, 0, 0, 0.1) 0px 8px 40px 0px`
- Shadow `lg-5` (section): `rgba(0, 0, 0, 0.1) 0px 4px 4px 0px, rgba(0, 0, 0, 0.1) 0px 8px 40px 0px`

The page mixes flat colour bands with raised white cards. Fine warm-grey borders define card edges, while selected cards and proof panels use broad, soft shadows rather than hard outlines. Rounded card corners soften dense grids. Keep the hero and open content mostly flat; reserve stronger layering for outcome cards, video, and featured proof.

## Imagery

Imagery is primarily product illustration and interface evidence rather than conventional photography. The hero’s pixelated running-animal graphic is dark green with pink and yellow-green details over a luminous yellow field; treat those extra hues as illustration-specific, not core UI colours. A blue AURA video thumbnail supplies a distinct media moment. Product cards use small visual previews, while the platform diagram is a dark, polished product graphic.

## Components

### Announcement bar

Slim bright green strip above navigation with centered offer text, compact CTA link, and a close affordance.

### Pill navigation

White rounded horizontal navigation surface with logo, compact uppercase menu links, login, and a dark demo CTA.

### Hero block

Centered mono eyebrow, tightly set serif headline, explanatory copy, paired pill CTAs, and large pixel-textured illustration over a yellow-to-ivory glow.

### Outcome cards

Three white cards on warm stone, with compact category labels, readable headings, explanatory text, oversized percentage proof, and fine supporting bullets.

### Audience panels

Wide stacked cards pairing audience-specific serif titles and copy with concise outcome lists and small text links.

### Use-case card grid

Three-column set of numbered product cards with short descriptions, small outcome statements, and dark pill links.

### Integration matrix

Categorized grid of restrained logo tiles, organized by tool or pipeline type on a warm neutral section.

### Platform diagram

Dark rounded product panel with a centered title and a multi-stage release-assurance workflow illustration.

### Measured component styles

- **Link** (“READ THE STORY”): transparent background · text #3c483c · radius 0px · padding 0px 0px 6px 0px · 500 12.496px Atkinson Hyperlegible Mono · uppercase
- **Card** (“Web”): background #f8f8f8 · text #333333 · border 1px solid #c8c8be · radius 13px · padding 0px · 400 14px Arial

## Do

- Use Mackinac-style serif headlines for major statements.
- Keep body copy functional, legible, and neutrally coloured.
- Alternate warm stone and near-white section bands.
- Use yellow-green gradients as restrained focal lighting.
- Make dark green CTAs compact, rounded, and high contrast.
- Separate information with fine warm-grey borders and soft shadows.

## Don't

- Do not turn the page into a dark theme.
- Do not use the illustration’s incidental colours as global UI colours.
- Do not crowd the hero with dense navigation or copy.
- Do not apply heavy shadows to every section.
- Do not replace the editorial serif with a generic geometric display face.
- Do not make card grids visually loud or highly saturated.

## Agent prompt

Build a new Sauce Labs-style page with a warm editorial SaaS aesthetic. Use Gallery Mist (#f8f8f8) and Warm Stone (#f0f0ec) as alternating section surfaces, Forest Ink (#192319) for primary type and dark CTAs, and Quiet Sage (#6a6f6a) for supporting copy. Add Sunlit Butter (#f1e082) and Lemon Sage (#ebedb8) sparingly for luminous emphasis. Set major headlines in an editorial serif similar to P22 Mackinac Pro; use Atkinson Hyperlegible-style sans for body and navigation, with compact mono uppercase labels. Keep the hero centered and spacious, then organize proof into calm card grids, audience panels, and categorized integration tiles. Use fine borders, rounded cards, and selective soft shadows. Make product visuals illustrative and polished, not decorative noise.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero with a wide warm gradient field, headline, paired CTAs, and large illustration. | Primary free-trial CTA, Secondary demo CTA | Mono eyebrow, Serif headline, Pixel-style hero art, Yellow glow |
| 2 | logo-cloud | Tight, full-width row of customer logos on the warm hero background. | Enterprise trust proof | Small uppercase label, Monochrome logo row |
| 3 | video | Near-white band with one large centered video thumbnail. | Play-to-learn overview | Rounded media card, Visible play control, Blue thumbnail art |
| 4 | feature-grid | Centered section heading followed by three outcome cards in a row. | Scan measurable benefits, Compare outcome categories | White raised cards, Large percentage metrics, Compact category labels |
| 5 | stats | Near-white section with a left-aligned statement and vertically stacked wide audience panels. | Browse by engineering role, Follow outcome links | Editorial section heading, Audience cards, Outcome lists |
| 6 | feature-grid | Warm stone three-column use-case card grid, aligned from the left. | Scan use cases, Open learn-more paths | Numbered cards, Small outcome label, Dark pill links |
| 7 | feature-grid | Continues the three-column card grid on the same warm neutral band. | Compare capabilities, Explore individual topics | Numbered cards, Compact descriptions, Dark pill links |
| 8 | feature-grid | Final short row of cards, followed by a transition into customer proof. | Learn about error analysis, Explore Sauce Labs | Numbered feature card, Compact brand card |
| 9 | other | Open near-white transition area with minimal content and visual breathing room. | Reset visual rhythm | Sparse neutral canvas |
| 10 | testimonials | Near-white three-column proof row with customer marks, results, and links. | Review customer outcomes, Open case studies | Logo-led columns, Compact story links, Fine dividers |
| 11 | how-it-works | Centered platform statement and CTA above a wide dark, rounded workflow diagram. | Understand lifecycle coverage, Book a demo | Centered serif heading, Dark product panel, Three-stage workflow graphic |
| 12 | other | Open near-white interval with a large centered green-toned illustrative motif. | Bridge between proof sections | Pixelated green illustration, Minimal surrounding UI |
| 13 | stats | Warm stone three-column proof band with centered heading and metrics. | Scan ROI and payback, Open full study | Pale green-yellow panel, Large metrics, Underlined text link |
| 14 | integrations | Centered heading above categorized, multi-column logo tiles. | Find compatible tools, Scan by integration category | Compact logo grid, Category labels, Rounded tile borders |
| 15 | other | Centered brand statement above a three-column statistics row on warm stone. | Understand company credibility | Centered serif heading, Large green metrics, Subtle column separators |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(0,0,0,0);
--osano-button-border-color: #ffffff;
--osano-button-background-color: #0a140a;
--osano-button-foreground-color: #ffffff;
--osano-dialog-background-color: #ffffff;
--osano-dialog-foreground-color: #000000;
--osano-info-dialog-overlay-color: rgba(0,0,0,0.45);
--osano-link-color: #0a140a;
--osano-toggle-off-track-color: #6d7344;
--osano-toggle-off-thumb-color: #FFFFFF;
--osano-toggle-on-track-color: #6d7344;
--osano-toggle-on-thumb-color: #FFFFFF;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-pill-background-color: #EBE0FE;
--osano-pill-foreground-color: #3E1A7F;
--osano-button-close-color: #000000;
--osano-button-accept-background-color: #0a140a;
--osano-button-accept-border-color: #ffffff;
--osano-button-accept-foreground-color: #ffffff;
--osano-button-deny-background-color: #0a140a;
--osano-button-deny-border-color: #ffffff;
--osano-button-deny-foreground-color: #ffffff;
--osano-button-reject-all-background-color: #0a140a;
--osano-button-reject-all-background-color-hover: #1e281e;
--osano-button-reject-all-border-color: #ffffff;
--osano-button-reject-all-foreground-color: #ffffff;
--osano-button-manage-background-color: #0a140a;
--osano-button-manage-border-color: #ffffff;
--osano-button-manage-foreground-color: #ffffff;
--osano-info-dialog-link-color: #0a140a;
--osano-info-dialog-button-close-color: #000000;
--osano-info-dialog-toggle-off-track-color: #6d7344;
--osano-info-dialog-toggle-off-thumb-color: #FFFFFF;
--osano-info-dialog-toggle-on-track-color: #6d7344;
--osano-info-dialog-toggle-on-thumb-color: #FFFFFF;
--osano-info-dialog-button-background-color: #0a140a;
--osano-info-dialog-button-border-color: #ffffff;
```

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