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

# ai.work · Design System

> Quietly cinematic, built for real IT work

**Theme:** dark · **Industry:** ai · **Source:** https://www.ai.work/ · **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._

ai.work presents Henry as an AI worker through a dark, restrained interface and a cinematic landscape hero. Generous vertical spacing, calm typography, and embedded product UI carry the story from work examples to platform capabilities.

## North star

Keep the page nearly black and typographically quiet, letting cinematic imagery and real product UI provide the contrast and detail.

## Overview

The visual system is anchored by a near-black canvas (#141414), with warm pale text (#d4d0c9) and quieter gray copy (#878581). Most sections remain flat and dark; subtle gradients soften the edges of the landscape hero and occasional product demonstrations rather than turning the page into a colorful gradient theme. White is reserved for strong text and bright embedded UI panels, while the warmer gray-brown (#2e2d2c) appears as a restrained card surface. NB International Pro provides the site’s light, contemporary voice: large centered headlines are compactly tracked, while body text stays airy and easy to scan. Inter supports interface-like text, with a mono face used for compact labels. The page alternates centered statements, wide product visuals, and restrained feature layouts, using long vertical intervals to make each narrative beat feel deliberate. Product screens and the mountain photograph supply most of the visual richness; the surrounding chrome stays quiet.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#141414` | `--color-midnight-canvas` | brand | Dominant page canvas and section background; also anchors dark image overlays and fades. |
| Warm Parchment | `#d4d0c9` | `--color-warm-parchment` | neutral | Primary muted text and headings, giving the dark interface a warm, softer contrast. |
| Quiet Ash | `#878581` | `--color-quiet-ash` | neutral | Secondary explanatory copy and subdued headings across dark sections. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | High-contrast text and bright embedded product-interface panels. |
| Charcoal Fade | `#1c1b1b` | `--color-charcoal-fade` | surface | Dark gradient stop around imagery and interface demonstrations, not a distinct section band. |
| Silver Gray | `#a4a4a4` | `--color-silver-gray` | neutral | Occasional subdued UI text; supporting neutral rather than a defining brand color. |
| Soft Pewter | `#acabab` | `--color-soft-pewter` | neutral | Low-emphasis text and small interface details. |
| Pale Mist | `#d9d9d9` | `--color-pale-mist` | neutral | Light text or UI detail within product visuals; not a section background. |
| Muted Graphite | `#6c6c6c` | `--color-muted-graphite` | neutral | Low-contrast supporting text in compact interface content. |
| Cinder Surface | `#2e2d2c` | `--color-cinder-surface` | surface | Subtle dark product-card surface, seen in task and workflow mock-ups. |

### Semantic aliases

`--color-canvas` → `#141414` (Midnight Canvas) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#d4d0c9` (Warm Parchment) · `--color-text-subtle` → `#878581` (Quiet Ash)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#141414` | 18.42:1 | AAA |
| `#d4d0c9` | `#141414` | 11.99:1 | AAA |
| `#878581` | `#141414` | 5:1 | AA |

### Gradients

- `linear-gradient(rgba(212, 208, 201, 0) 0%, rgba(212, 208, 201, 0.04) 100%)`
- `linear-gradient(rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.4) 100%)`
- `linear-gradient(rgba(28, 27, 27, 0.4) 25%, rgba(28, 27, 27, 0.9) 73.5921%, rgb(28, 27, 27) 100%)`
- `linear-gradient(270deg, rgba(20, 20, 20, 0) 0%, rgb(20, 20, 20) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| NB International Pro Light | `--font-body` | webfont | 300 | Light-weight body copy and captions across the page. | Inter |
| Inter | `--font-inter` | webfont | 400, 500, 600 | Product UI and interface-like supporting text. | Inter |
| NB International Pro Regular | `--font-display` | webfont | 400 | Display headlines and section headings. | Inter |
| NB International Pro Mono | `--font-mono` | webfont | 400 | Small technical or category labels. | IBM Plex Mono |

- **NB International Pro Light:** Use a light weight and tight negative tracking; keep sentence case and generous line spacing.
- **Inter:** Use regular through semibold weights for legible, compact UI labels and content.
- **NB International Pro Regular:** Regular weight, tightly tracked, sentence case; prominent headings remain clean rather than bold.
- **NB International Pro Mono:** Use compact uppercase labels with neutral tracking and restrained visual emphasis.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1 | -0.02em | — | NB International Pro Regular | Oversized hero headline and major editorial statements. |
| h1 | 32px | 400 | 1.25 | -0.02em | — | NB International Pro Regular | Primary page heading and prominent section titles. |
| h2 | 24px | 400 | 1.33 | -0.02em | — | NB International Pro Regular | Secondary section headings and feature-group titles. |
| h3 | 20px | 400 | 1.2 | -0.02em | — | NB International Pro Regular | Feature, capability, and card headings. |
| body | 16px | 300 | 1.5 | -0.02em | — | NB International Pro Light | Descriptions, supporting explanations, and testimonial copy. |
| caption | 14px | 300 | 1.71 | -0.02em | — | NB International Pro Light | Compact supporting labels and secondary interface text. |
| code | 10px | 400 | 1.2 | 0 | uppercase | NB International Pro Mono | Small uppercase technical or category labels. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 16, 23, 24, 48, 56 px.
- Section rhythm 112px · element gap 10px · card padding 6px · max content width —.

The page uses a broad centered composition, with content and media held in generous margins rather than a dense dashboard grid. A slim top navigation sits above a large framed hero image; subsequent sections alternate centered headlines, horizontally arranged workflow cards, wide product demonstrations, and multi-column capability content. Vertical rhythm is notably spacious, with large gaps between narrative beats and compact groupings inside product UI. Keep alignment deliberate and let each section read as its own chapter; measurements do not establish a fixed maximum content width.

## Shape & elevation

- Radius: card `10px` · media `4px` · link `4px` · xs `3px` · sm `4px` · md `5px` · lg `6px` · xl `8px` · 2xl `10px` · pill `9999px`
- Shadow `hairline` (other): `rgba(20, 21, 26, 0.05) 0px 1px 2px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.16) 0px 2.28853px 2.28853px -2.5px, rgba(0, 0, 0, 0.06) 0px 10px 10px -3.75px`

Most of the site is flat, with section changes conveyed by spacing and tonal shifts rather than visible borders. Cards and interface mock-ups sit slightly above the canvas through subtle dark shadows and rounded surfaces; bright embedded panels create the strongest depth contrast. Use gradients as image fades or overlays, not as a general page background.

## Imagery

The opening uses a full-bleed mountain landscape at dusk, darkened so pale headline text remains legible. Product imagery consists of realistic interface mock-ups and workflow cards, shown against the dark canvas with crisp, bright panels. Later visuals include restrained diagrams and application marks. Keep photographic color concentrated in the hero; avoid introducing unrelated decorative illustration styles.

## Components

### Top navigation

A narrow dark header with the ai.work wordmark on the left and compact Platform, Company, and icon navigation on the right.

### Cinematic hero

Dark-framed landscape backdrop, centered two-line headline, short supporting copy, and floating task/product UI.

### Workflow cards

Dark task examples arranged in a horizontal showcase; card surfaces use #2e2d2c and rounded corners.

### Editorial statement

A centered, large, lightly weighted headline separated from nearby content by substantial vertical space.

### Product demonstration

Wide embedded interface or diagram on the dark canvas, using bright UI details as contrast rather than a new page palette.

### Capability grid

Multi-column platform capabilities with concise headings, explanatory copy, and occasional workflow diagrams or UI panels.

### Measured component styles

- **Link** (“Platform”): transparent background · text #000000 · radius 4px · padding 8px 12px · 400 12px sans-serif
- **Card** (“Reading confluence policy… Identity & ac”): background #2e2d2c · text #000000 · radius 10px · padding 6px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.16) 0px 2

## Do

- Use #141414 as the dominant canvas.
- Set primary copy in warm pale neutrals.
- Keep headlines light, centered, and tightly tracked.
- Give major sections generous vertical separation.
- Use realistic product UI as the main supporting visual.
- Darken photography behind overlaid text.
- Reserve bright white for text and interface panels.

## Don't

- Do not introduce a colorful section palette.
- Do not make the page feel like a dense admin dashboard.
- Do not use heavy bold display typography.
- Do not add prominent borders to every card.
- Do not stretch gradients across unrelated content.
- Do not let hero imagery overpower headline legibility.

## Agent prompt

Build a new ai.work-style page with a near-black #141414 canvas and a quiet, cinematic mood. Use Warm Parchment (#d4d0c9) for primary soft text, Quiet Ash (#878581) for secondary copy, and Clean White (#ffffff) sparingly for high-contrast type or product UI. Use a light, tightly tracked sans-serif for body copy and regular-weight display headings; keep labels compact and technical. Organize content into spacious editorial sections: a restrained navigation, a media-led hero, centered statements, product demonstrations, and concise capability groupings. Use realistic software UI as the main detail, with Cinder Surface (#2e2d2c) cards and subtle shadows. Keep backgrounds flat, use gradients only to shade imagery, and make each section feel calm and deliberate.

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