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

# Slab · Design System

> Editorial clarity for shared team knowledge

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

Slab pairs a deep plum hero with refined serif headlines and clean product-interface illustrations. The page transitions into spacious white feature sections, then closes with a migration CTA and a compact multi-column footer.

## North star

Use editorial serif headlines and restrained product imagery against generous space, with the plum hero as the page’s singular dramatic color field.

## Overview

The visual strategy contrasts a saturated deep-plum opening with a bright, quiet product narrative. The hero places a large white Sentinel headline and muted supporting copy beside a crisp interface mockup; a coral primary CTA and blue Google sign-up control provide the strongest functional color signals. After the hero, broad white sections alternate product imagery and concise explanatory copy, keeping each feature easy to scan. Whitney sans-serif handles navigation, body copy, controls, and labels, while Sentinel serif gives major headings an editorial character. Generous vertical gaps separate feature stories, and thin pale borders distinguish the migration panel without introducing heavy card framing. Product screenshots carry most of the visual detail; decorative colored shapes remain secondary. The footer stays restrained, using compact link columns and familiar text-led navigation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas, product mockup surfaces, and reverse text on the hero and primary buttons. |
| Slate Ink | `#455360` | `--color-slate-ink` | semantic | Default dark text and link color, especially across white feature sections and footer links. |
| Deep Plum | `#42022e` | `--color-deep-plum` | brand | Full-width navigation and hero background; also anchors the subtle hero gradient treatment. |
| Google Blue | `#4285f4` | `--color-google-blue` | accent | Google sign-up button, with blue details also visible within product-interface illustrations. |
| Soft Divider | `#e5e5e5` | `--color-soft-divider` | neutral | Fine section and interface borders; keeps transitions and separation understated. |
| Coral Signal | `#ff4143` | `--color-coral-signal` | accent | Primary Get Started action and small brand accents, including the Slab wordmark. |
| Quiet Gray | `#939598` | `--color-quiet-gray` | semantic | Muted supporting text and secondary links where lower emphasis is needed. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#42022e` (Deep Plum) · `--color-text` → `#455360` (Slate Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#939598` (Quiet Gray) · `--color-border` → `#e5e5e5` (Soft Divider) · `--color-accent` → `#ff4143` (Coral Signal) · `--color-accent-2` → `#4285f4` (Google Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#455360` | `#ffffff` | 7.9:1 | AAA |
| `#455360` | `#42022e` | 2.08:1 | fail |
| `#ffffff` | `#42022e` | 16.41:1 | AAA |
| `#939598` | `#ffffff` | 3:1 | AA-large |
| `#939598` | `#42022e` | 5.46:1 | AA |
| `#ff4143` | `#ffffff` | 3.45:1 | AA-large |
| `#ff4143` | `#42022e` | 4.76:1 | AA |

### Gradients

- `linear-gradient(90deg, rgb(66, 2, 46), rgba(0, 0, 0, 0))`
- `linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(66, 2, 46))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| whitney | `--font-body` | webfont | 400, 600, 500, 700 | Navigation, body copy, buttons, links, captions, and eyebrow labels. | Inter |
| sentinel | `--font-display` | webfont | 400 | Primary hero headline and major feature-section headings. | Lora |
| Roboto | `--font-roboto` | webfont | 500 | Minor embedded interface or third-party control text. | Roboto |

- **whitney:** Use a clean sans-serif voice; common weights span regular through bold. Eyebrows and captions are uppercase, semibold, and widely tracked.
- **sentinel:** Use a restrained editorial serif at regular weight; prominent headlines have tight tracking and open, readable line spacing.
- **Roboto:** Measured in a small share; keep confined to embedded UI details rather than the site’s main typographic voice.

### Type scale — Augmented Fourth (ratio ≈ 1.384, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 53px | 400 | 1.14 | -0.019em | — | sentinel | Hero statement, set as a prominent white editorial headline. |
| h2 | 42px | 400 | 1.24 | 0 | — | sentinel | Major feature headings throughout the white product-story sections. |
| h3 | 24px | 400 | 1.5 | 0 | — | whitney | Supporting feature titles and smaller content headings. |
| body | 20px | 400 | 1.6 | 0 | — | whitney | Hero description and explanatory product copy. |
| caption | 12px | 600 | 1.67 | 0.167em | uppercase | whitney | Compact supporting labels and fine-print notes. |
| button | 18px | 600 | 1.33 | 0 | — | whitney | Primary CTA labels and sign-up action text. |
| link | 20px | 400 | 1.6 | 0 | — | whitney | Navigation, inline actions, and footer links. |
| eyebrow | 12px | 600 | 1.67 | 0.167em | uppercase | whitney | Short uppercase labels above feature content. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 1, 5, 8, 12, 16, 20, 24, 32, 40, 64, 100, 110 px.
- Section rhythm 110px · element gap 100px · card padding — · max content width 1200px.

Use a centered content frame capped at the measured 1200px maximum width. The hero is a spacious two-column composition: headline and sign-up form at left, oversized product UI at right, with a customer-logo row near its base. Below, stack broad feature stories that alternate image and copy placement rather than enclosing content in cards. Preserve the measured 110-unit section rhythm and generous element spacing. Keep the migration CTA in its own pale band, followed by a dense but orderly five-column footer.

## Shape & elevation

- Radius: button `6px` · input `6px` · xs `6px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0.1) 0px 0px 0px 1px`
- Motion: standard transition `0.2s ease` on interactive elements.

Favor flat surfaces and generous whitespace over raised cards. Use thin light-gray rules to separate major bands and subtle framing around embedded interface mockups. The hero’s overlapping UI illustration and decorative forms provide depth; avoid pronounced drop shadows or stacked card treatments.

## Imagery

Use polished product-interface screenshots and mockups as the main imagery, not lifestyle photography. Frame them large enough to reveal recognizable navigation, search, and document patterns, with bright surfaces against the plum hero or white feature canvas. Add restrained colored organic shapes behind selected mockups as supporting decoration; keep illustrations and UI details subordinate to the message.

## Components

### Top navigation

A dark-plum full-width bar with the coral Slab wordmark, compact text links, and a right-aligned Log In action with an arrow.

### Hero sign-up form

Left-aligned headline and supporting copy followed by a blue Google sign-up control, a ruled “or” separator, and an email field paired with a coral Get Started button.

### Customer logo row

A horizontal strip of customer marks near the bottom of the plum hero; treat logos as light-colored assets against the dark field.

### Product feature story

A spacious white feature section pairing an interface mockup with a serif heading, short sans-serif explanation, and small eyebrow label; alternate image and copy sides.

### Migration CTA

A pale, lightly separated panel with a centered Switching? heading, reassurance copy, migration-service logos, and a coral Get Started action.

### Multi-column footer

A white footer organized into five compact link columns, ending with the coral Slab mark and understated legal links.

### Measured component styles

- **Primary button** (“Get Started”): background #ff4143 · text #ffffff · radius 6px · padding 16px 24px · 600 18px whitney
- **Secondary button** (“Sign up with Google”): background #4285f4 · text #ffffff · border 1px solid #4285f4 · radius 2px · padding 0px · 400 20px whitney
- **Link** (“Careers”): transparent background · text #455360 · radius 0px · padding 0px · 400 20px whitney
- **Input**: background #ffffff · text #000000 · radius 6px · padding 0px 12px · 400 18px whitney

## Do

- Anchor the opening viewport in Deep Plum (#42022e).
- Use Sentinel-style serif headlines and Whitney-style sans-serif utility text.
- Make the product interface the main visual proof point.
- Reserve Coral Signal (#ff4143) for primary actions and small brand details.
- Alternate image and copy placement in the white feature stories.
- Keep section transitions light, spacious, and clearly ordered.

## Don't

- Do not turn every feature into a bordered or elevated card.
- Do not use bright accents as large background fields.
- Do not replace the product UI with lifestyle photography.
- Do not crowd the hero form or navigation with extra controls.
- Do not use heavy shadows or dense decorative gradients.
- Do not flatten all headings into a generic sans-serif style.

## Agent prompt

Build a new Slab-style productivity page with a dramatic Deep Plum (#42022e) opening and a crisp transition to open white content. Use a Sentinel-like editorial serif for large headings and Whitney-like sans-serif text for navigation, explanations, and controls. Keep the centered content frame within the measured 1200px maximum width and use generous section spacing. Pair concise feature copy with large, legible product-interface mockups, alternating their sides as the story progresses. Use Coral Signal (#ff4143) for the main action and Google Blue (#4285f4) only for a Google sign-up option; use Slate Ink (#455360) for standard text. Favor flat surfaces, delicate Soft Divider (#e5e5e5) rules, and restrained illustration accents. Finish with a distinct CTA band and a tidy multi-column footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Full-width plum navigation bar with a compact left-aligned link group and right-side login action. | Direct product navigation, Account entry | Coral wordmark, Light text links, Arrow login cue |
| 2 | hero | Two-column dark hero: message and sign-up form at left, large product UI mockup at right; customer logos below. | Google sign-up, Email sign-up, Free-user reassurance | Plum canvas, Coral primary CTA, Blue Google action, Product UI illustration |
| 3 | feature-split | Long white feature sequence with alternating image and copy columns and substantial vertical separation. | Progressive feature explanation, Visual product proof | Alternating mockup alignment, Serif feature headlines, Small eyebrow labels |
| 4 | cta | Pale, full-width standalone band with centered heading, migration diagram, and CTA. | Switching reassurance, Migration invitation | Subtle border separation, Centered copy, Coral CTA |
| 5 | footer | White footer with five compact link columns, brand mark, and small legal links. | Grouped destination links, Legal navigation | Multi-column link lists, Small coral logo, Muted legal text |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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