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

# Dock · Design System

> A bright, spacious stage for revenue software

**Theme:** light · **Industry:** saas · **Source:** https://www.dock.us/ · **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._

Dock pairs a vivid blue hero with restrained typography and generous white space to present a complex revenue platform clearly. Product-interface imagery, customer stories, and modular feature sections make the software itself the focus.

## North star

Use a spacious white canvas and crisp dark typography, reserving saturated blue for the hero, key actions, and product emphasis.

## Overview

Dock’s visual strategy uses a clean white canvas as the frame for a confident, saturated blue hero. The hero combines a large white headline and simple prompt interface with a warmly lit customer photograph, creating a direct contrast between brand colour and human imagery. Across the page, dark near-black headings and muted supporting text keep the message readable without competing with the blue accents. Roobert is used throughout: headings are compact and weighty, while body copy stays open and straightforward. The layout alternates centered editorial introductions with broad product screenshots and multi-column proof points. Large gaps between sections give each feature room to register, while repeated interface previews make the product tangible. Cards and buttons use soft rounding; borders and shadows are restrained, so the page feels polished and product-focused rather than decorative.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, white text on blue hero and primary buttons, and clean product-card surfaces. |
| Dock Blue | `#0068f9` | `--color-dock-blue` | brand | Signature hero field and primary CTA fill; also highlights controls and selected product-interface elements. |
| Midnight Ink | `#121722` | `--color-midnight-ink` | neutral | Primary heading and body text, navigation, and dark foreground details. |
| Playbook Violet | `#5a39ff` | `--color-playbook-violet` | accent | Secondary accent, most visibly within product-interface cards and small highlights. |
| Soft Fog | `#f7f7f8` | `--color-soft-fog` | surface | Subtle section and card backgrounds that separate product content from the white canvas. |
| Grid Mist | `#c8cbd1` | `--color-grid-mist` | semantic | Fine dotted media texture and gradient details; a background treatment, not a defining brand colour. |
| Graphite | `#1b1e24` | `--color-graphite` | surface | Inverse card and interface surfaces, with white or light text on top. |
| Signal Orange | `#ff4f00` | `--color-signal-orange` | semantic | Small product-interface or badge details; not a primary page colour. |
| Link Azure | `#1264a3` | `--color-link-azure` | semantic | Occasional small badge or heading detail, including within interface imagery. |
| Slate Text | `#41454e` | `--color-slate-text` | neutral | Muted supporting copy and secondary text. |
| True Black | `#000000` | `--color-true-black` | neutral | Small amounts of black text or media detail; not the primary text colour. |
| Cool Divider | `#ecedee` | `--color-cool-divider` | semantic | Pale borders and separators on cards, buttons, and footer or interface details. |
| Bright Sky | `#4992f7` | `--color-bright-sky` | accent | Minor blue highlight in small interface and badge details. |
| Library Green | `#247547` | `--color-library-green` | semantic | Small status or category badge colour within product-interface content. |
| Muted Amber | `#84611a` | `--color-muted-amber` | semantic | Occasional small status badge inside interface content. |
| Status Green | `#0ba258` | `--color-status-green` | semantic | Minor green badge or product-interface status detail. |
| Warm Hairline | `#d1cdc2` | `--color-warm-hairline` | neutral | Fine card and interface borders, especially around warmer-toned mock-up surfaces. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f8` (Soft Fog) · `--color-surface-2` → `#1b1e24` (Graphite) · `--color-text` → `#121722` (Midnight Ink) · `--color-text-muted` → `#41454e` (Slate Text) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#d1cdc2` (Warm Hairline) · `--color-accent` → `#0068f9` (Dock Blue) · `--color-accent-2` → `#5a39ff` (Playbook Violet) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#121722` | `#ffffff` | 17.93:1 | AAA |
| `#121722` | `#f7f7f8` | 16.74:1 | AAA |
| `#121722` | `#1b1e24` | 1.07:1 | fail |
| `#41454e` | `#ffffff` | 9.61:1 | AAA |
| `#41454e` | `#f7f7f8` | 8.97:1 | AAA |
| `#41454e` | `#1b1e24` | 1.74:1 | fail |
| `#ffffff` | `#f7f7f8` | 1.07:1 | fail |
| `#ffffff` | `#1b1e24` | 16.7:1 | AAA |
| `#0068f9` | `#ffffff` | 4.83:1 | AA |
| `#0068f9` | `#f7f7f8` | 4.51:1 | AA |

### Gradients

- `radial-gradient(circle, rgb(200, 203, 209) 1px, rgba(0, 0, 0, 0) 1.3px)`
- `radial-gradient(1746.7px 232.34px at 1109px 127.66px, rgb(255, 254, 251) 0%, rgba(255, 254, 251, 0) 100%)`
- `radial-gradient(906.3px 196px at 624px 186.5px, rgb(252, 251, 247) 0%, rgb(201, 200, 197) 50%, rgb(150, 149, 147) 100%)`
- `linear-gradient(rgb(0, 0, 0), rgb(79, 50, 223))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Roobert | `--font-body` | webfont | 500, 400, 600, 700, 300 | Primary site typeface across hero, headings, body copy, navigation, buttons, and labels. | Inter |
| Inter | `--font-inter` | webfont | 500, 400 | Minor supporting interface or fallback text. | Inter |
| Arial | `--font-arial` | system | 400, 700 | System fallback and occasional embedded interface text. | Arial |
| ui-sans-serif | `--font-ui-sans-serif` | system | 400 | Generic system fallback for small interface details. | Inter |

- **Roobert:** Use clean sans-serif forms; headings are firm and compact, body copy regular, and controls medium weight.
- **Inter:** Keep usage secondary to Roobert; use straightforward sans-serif styling.
- **Arial:** Use only as a fallback; preserve neutral sans-serif rendering.
- **ui-sans-serif:** Keep at regular weight and avoid introducing a visibly different display style.

### Type scale — Golden Ratio (ratio ≈ 1.587, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 600 | 1.06 | -0.004em | — | Roobert | Oversized hero headline and key high-impact promotional text. |
| h1 | 29px | 500 | 1.15 | -0.025em | — | Roobert | Primary page and section headings. |
| h2 | 22.5px | 400 | 1.4 | -0.025em | — | Roobert | Feature section titles and supporting subheads. |
| body | 18px | 400 | 1.45 | 0 | — | Roobert | Feature descriptions, explanatory copy, and testimonials. |
| caption | 12px | 500 | 1.42 | 0 | — | Roobert | Eyebrows, interface labels, and small supporting annotations. |
| button | 16px | 500 | 1.2 | 0 | — | Roobert | Primary and secondary action labels. |
| nav | 16px | 500 | 1.2 | 0 | — | Roobert | Header navigation and account links. |
| link | 16px | 500 | 1.2 | 0 | — | Roobert | Inline and feature-related navigation actions. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 24 px.
- Section rhythm 132px · element gap 8px · card padding — · max content width —.

The page uses a broad centered content area with a compact top navigation and a large, rounded hero panel. The hero divides into a blue text-and-interaction side and a photographic side. Below, centered section introductions alternate with wide product screenshots, proof points, and multi-column feature or testimonial cards. The measured section rhythm is spacious, with ample vertical separation and low visual density. Keep content aligned to clear shared edges, but use centered headings where the page shifts into an editorial feature introduction.

## Shape & elevation

- Radius: button `10px` · input `4px` · card `7px` · media `50%` · badge `5px` · nav `9999px` · link `28px` · xs `2px` · sm `3px` · md `4px` · lg `5px` · xl `6px` · 2xl `7px` · pill `9999px`
- Shadow `inset` (text, other): `rgba(18, 23, 34, 0.15) 0px 0px 0px 0.5px inset`
- Shadow `inset-2` (other): `rgba(18, 23, 34, 0.1) 0px 0px 0px 0.5px inset`
- Shadow `inset-3` (text, other, button): `rgba(0, 0, 0, 0.08) 0px 0.5px 1px 0px, rgba(18, 23, 34, 0.1) 0px -1px 0px 0px inset, rgba(18, 23, 34, 0.15) 0px 0px 0px 0.5px inset`
- Shadow `sm` (card): `rgba(18, 23, 34, 0.16) 0px 0px 0px 0.5px, rgba(18, 23, 34, 0.08) 0px 2px 6px 0px`
- Shadow `hairline` (text): `rgba(18, 23, 34, 0.15) 0px 0px 0px 0.5px`
- Shadow `inset-4` (other): `rgba(18, 23, 34, 0.09) 0px 0px 0px 0.5px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

Most sections are flat and separated by white space rather than heavy shadows. Product previews and cards use subtle hairline outlines and restrained soft shadows to lift them from pale backgrounds. Buttons have modest depth, while the rounded hero and media frames provide the strongest containment. Avoid dramatic layered effects.

## Imagery

The hero pairs a warm, natural-light photograph of a person working with product content against the blue brand panel. Product screenshots recur throughout the page in broad, light-framed media areas, showing real interface detail rather than abstract illustration. Customer stories use portrait photography and video-style play controls. Keep media crisp, contained, and lightly rounded; let warm photography contrast with cool interface blues.

## Components

### Primary CTA

Use Dock Blue (#0068f9) with white text, a pill-like rounded silhouette, medium-weight Roobert, and a subtle shadow.

### Hero panel

A large blue field with a white display headline and prompt-style product interaction, paired side-by-side with warm customer photography.

### Header navigation

Compact horizontal navigation on white, with dark labels, a restrained logo, and a blue primary action on the right.

### Feature introduction

Centered eyebrow, bold dark heading, short supporting copy, and a low-key exploration link.

### Product preview

Wide, light product screenshot in a pale or white media area, with restrained borders and soft elevation.

### Proof-point row

Customer marks and concise numeric outcomes in a clean horizontal arrangement, with ample whitespace.

### Testimonial card

Portrait or video thumbnail, short customer quote, and compact attribution arranged in a tidy multi-column grid.

### Measured component styles

- **Primary button** (“Start for free”): background #0068f9 · text #ffffff · radius 100px · padding 0px 16px · 500 16px Roobert · shadow rgba(0, 0, 0, 0.25) 0px 0.5px 1px 0px, rgba(11, 68, 147, 0.22) 0px -1px 0px 0px 
- **Secondary button** (“Run every deal like your best rep Create”): background #ffffff · text #000000 · radius 28px · padding 40px · 400 16px Roobert
- **Link** (“+25% win rate”): transparent background · text #000000 · border 1px solid · radius 28px · padding 0px · 400 16px Roobert
- **Input**: transparent background · text #121722 · radius 4px · padding 8px 12px 7px 10px · 400 16px Roobert
- **Card** (“Dock — Acme. Sales Room dock.us/workspac”): background #ffffff · text #000000 · radius 12px · padding 0px · 400 16px Roobert · shadow rgba(18, 23, 34, 0.16) 0px 0px 0px 0.5px, rgba(18, 23, 34, 0.08) 0px 2px 6px 0px
- **Badge** (“Add content”): background #0068f9 · text #ffffff · radius 6px · padding 7px 12px 9px 12px · 500 12px Roobert
- **Navigation item** (“Product Pricing Customers Resources”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Roobert

## Do

- Keep the page canvas white and uncluttered.
- Use Dock Blue for primary actions and major brand emphasis.
- Set headings in dark Roobert with compact, confident line breaks.
- Give feature sections generous vertical breathing room.
- Show realistic product interfaces in broad, pale media frames.
- Use warm human photography to balance the cool product palette.

## Don't

- Do not spread blue across every section background.
- Do not add decorative gradients as a dominant brand treatment.
- Do not make cards heavily shadowed or visually dense.
- Do not crowd the centered feature introductions with extra controls.
- Do not use tiny, low-contrast supporting copy.
- Do not treat colors inside interface mockups as core brand colours.

## Agent prompt

Build a new Dock-style SaaS page with a clean white canvas and a restrained, spacious rhythm. Use Midnight Ink (#121722) for headings and primary text, Slate Text (#41454e) for secondary copy, and Dock Blue (#0068f9) for the main CTA and selected product emphasis. Keep Roobert-like sans-serif typography, with bold compact section headings and regular, readable body copy. Start with a broad split hero: blue content panel, white headline, simple product interaction, and warm human photography. Follow with centered feature introductions, wide product screenshots, proof points, and customer testimonials. Use Soft Fog (#f7f7f8) for subtle surface contrast, light borders, modest rounding, and restrained shadows. Prioritize real-looking product UI and generous whitespace over decoration.

## Source CSS custom properties (selected)

```css
--_anchor---background--accent-strong: #0068f9;
--_anchor---background--light-subtle: #f7f7f8;
--_anchor---text-color--dark-strong: #121722;
--_anchor---text-color--light-strong: white;
--_anchor---background--light-strong: white;
--_anchor---background--dark-strong: #1d1d1d;
--_anchor---text-color--light-subtle: #a5a5a5;
--_anchor---colors--base-700: #1d1d1d;
--_anchor---colors--blue-400: #0068f9;
--_anchor---colors--base-400: #d2d2d2;
--_anchor---colors--base-100: white;
--_anchor---colors--base-300: #efefef;
--_anchor---background--dark-subtle: #2d2d2d;
--_anchor---colors--base-200: #f7f7f8;
--_anchor---colors--blue-100: #d5ecff;
--_anchor---colors--base-600: #2d2d2d;
--_anchor---colors--base-500: #a5a5a5;
--_anchor---colors--blue-700: #121722;
--_anchor---text-color--dark-subtle: #d2d2d2;
```

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