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

# Dimension · Design System

> A quiet dark canvas, illuminated by a living workspace.

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

Dimension pairs a restrained dark interface with a large, atmospheric blue-to-warm product backdrop. Compact navigation and a concise feature list balance an expansive, legible app preview.

## North star

Keep the interface quiet and near-black, letting one expansive, softly colored product preview carry the visual energy.

## Overview

The page uses a near-black canvas as its structural base, while the hero is dominated by a softly blended blue, slate, and warm sand visual field from the product media. White and pale gray carry the main message and interface text; subdued gray is reserved for secondary copy. Blue, muted steel, and clay tones should be treated as imagery-led accents rather than flat, repeated UI fills. Geist gives the large, sentence-case hero headings a clean, composed shape, while DM Sans handles navigation, utility copy, and controls. The desktop composition is split: a narrow information rail sits beside a much larger live-workspace preview. Lists and labels stay compact, leaving the preview room to communicate the product. Rounded pill controls and discreet hairlines soften the dark frame; avoid heavy shadows or decorative surfaces that compete with the app imagery.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Night Canvas | `#0b0b0b` | `--color-night-canvas` | neutral | Near-black page canvas and dark foundation around the hero workspace. |
| Clear White | `#ffffff` | `--color-clear-white` | neutral | Primary headings, navigation labels, interface copy, and the light primary CTA. |
| Soft Chalk | `#ededed` | `--color-soft-chalk` | neutral | Pale brand label and high-contrast text softened slightly from pure white. |
| Graphite Line | `#242424` | `--color-graphite-line` | surface | Subtle media and interface hairlines against the dark canvas. |
| Dusk Blue | `#4867af` | `--color-dusk-blue` | accent | Cool blue in the product backdrop and restrained gradient accents. |
| Slate Mist | `#9cafb8` | `--color-slate-mist` | accent | Muted blue-gray transition within the large atmospheric product imagery. |
| Warm Clay | `#c49577` | `--color-warm-clay` | accent | Warm gradient endpoint in the hero media, not a general-purpose UI fill. |
| Quiet Gray | `#858585` | `--color-quiet-gray` | neutral | Muted supporting text and subdued labels. |
| Silver Text | `#dbdbdb` | `--color-silver-text` | neutral | Secondary interface copy and supporting text visible over the preview. |
| Button Ink | `#161616` | `--color-button-ink` | surface | Dark text on the white primary CTA and restrained dark control surfaces. |
| Mid Gray | `#919191` | `--color-mid-gray` | neutral | Low-emphasis text details; keep it subordinate to primary white copy. |
| Pale Gray | `#c2c2c2` | `--color-pale-gray` | neutral | Soft supporting text within secondary interface content. |
| Alert Red | `#ff0000` | `--color-alert-red` | semantic | Rare isolated alert-like detail; not a defining brand color or broad UI accent. |

### Semantic aliases

`--color-canvas` → `#0b0b0b` (Night Canvas) · `--color-text` → `#ffffff` (Clear White) · `--color-text-muted` → `#858585` (Quiet Gray) · `--color-border` → `#242424` (Graphite Line) · `--color-accent` → `#4867af` (Dusk Blue) · `--color-accent-2` → `#c49577` (Warm Clay) · `--color-accent-3` → `#ff0000` (Alert Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0b0b0b` | 19.68:1 | AAA |
| `#858585` | `#0b0b0b` | 5.33:1 | AA |
| `#4867af` | `#0b0b0b` | 3.59:1 | AA-large |

### Gradients

- `linear-gradient(rgb(72, 103, 175), rgb(156, 175, 184), rgb(196, 149, 119))`
- `linear-gradient(rgb(72, 103, 175), rgb(72, 100, 156))`
- `linear-gradient(rgb(238, 238, 238), rgb(238, 238, 238))`
- `linear-gradient(rgb(72, 103, 175), rgba(72, 103, 175, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| DM Sans | `--font-body` | webfont | 400, 700, 500 | Navigation, body copy, feature lists, buttons, captions, and product-interface text. | Inter |
| Geist | `--font-display` | webfont | 400, 500 | Large hero and section headings. | Inter |

- **DM Sans:** Use regular weight for compact copy and medium for controls; sentence case, with no measured tracking.
- **Geist:** Medium-weight, sentence-case headings with tight measured leading and neutral tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.508, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 500 | 1 | 0 | — | Geist | Primary hero headline introducing the AI coworker. |
| h2 | 36px | 500 | 1.11 | 0 | — | Geist | Section-level product or feature headings. |
| h3 | 18px | 700 | 1.11 | 0 | — | DM Sans | Compact feature-group and interface subheadings. |
| body | 14px | 400 | 1.43 | 0 | — | DM Sans | Feature descriptions and explanatory product copy. |
| caption | 12.5px | 400 | 1.5 | 0 | — | DM Sans | Announcement pill and small supporting labels. |
| button | 14px | 500 | 1 | 0 | — | DM Sans | Primary CTA and other concise action controls. |
| nav | 14px | 500 | 1 | 0 | — | DM Sans | Header and floating navigation links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 14, 16, 20, 22, 24, 28, 32, 40 px.
- Section rhythm 64px · element gap 8px · card padding — · max content width —.

At desktop width, the first screen is a full-bleed split composition: a narrower left rail carries brand introduction, headline, benefits, CTA, and feature navigation; the wider right side presents the app preview. Align text to the start and keep supporting lists vertically compact. A floating, centered pill navigation overlays the lower viewport. The measured spacing follows a comfortable rhythm, with distinct larger section separation; avoid adding an unmeasured fixed max-width or rigid column dimensions.

## Shape & elevation

- Radius: button `10px` · media `24px` · nav `9999px` · link `9999px` · xs `10px` · sm `24px` · pill `9999px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `inset` (link): `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The composition is mostly flat, relying on contrast and full-bleed media rather than pronounced shadows. Fine dark dividers structure the preview, while rounded controls and the floating nav sit above the background. Keep layering restrained; the link treatment uses a subtle inset white edge rather than a strong drop shadow.

## Imagery

A large product-interface preview is the primary visual, framed like a desktop workspace with visible content, thin dividers, and a dark edge. Its blue-to-slate-to-clay atmosphere fills the background and provides most of the page's color. Treat it as product media rather than decorative illustration; preserve legibility and keep the surrounding text crisp.

## Components

### Primary CTA

White pill-shaped Get Started button with dark text; measured button styling uses DM Sans at 14px and a compact 8px by 12px padding.

### Announcement pill

Small outlined capsule announcing the wind-down date, with white text and a subtle inset edge treatment.

### Feature rail

Left-side list of product capabilities; active Morning Briefing row uses a dark backing and a narrow blue marker.

### Floating navigation

Low-profile dark translucent pill centered near the viewport bottom, combining brand, links, and a contrasting CTA.

### Workspace preview

Large rounded product-media panel with a dark perimeter, fine dividers, and luminous blue-toned interface content.

### Measured component styles

- **Primary button** (“Get Started”): background #ffffff · text #161616 · border 1px solid #ffffff · radius 9999px · padding 8px 12px · 500 14px DM Sans · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Morning Briefing 01”): background #0b0b0b · text #ffffff · radius 10px · padding 8px · 400 16px DM Sans
- **Link** (“Dimension is winding down on May 20, 202”): transparent background · text #ffffff · radius 9999px · padding 6px 14px · 400 12.5px DM Sans · shadow rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.1) 0px 0px 0px 1
- **Navigation item** (“Dimension”): transparent background · text #ededed · radius 0px · padding 0px · 400 16px DM Sans

## Do

- Anchor the composition on the near-black canvas.
- Use a split hero with a compact information rail and generous product preview.
- Set display headings in Geist and utility text in DM Sans.
- Keep primary copy white and supporting copy muted.
- Reserve blue, slate, and clay for the product-media gradient.
- Use rounded pills for navigation and the primary action.

## Don't

- Do not turn the hero gradient into repeated solid UI cards.
- Do not add strong drop shadows or ornamental elevation.
- Do not overcrowd the workspace preview with extra interface chrome.
- Do not use red as a prominent brand accent.
- Do not center the left-rail headline or feature list.
- Do not introduce unmeasured spacing or color values.

## Agent prompt

Build a new Dimension-style AI product page with a near-black Night Canvas (#0b0b0b) and crisp Clear White (#ffffff) typography. Use Geist for prominent sentence-case headings and DM Sans for navigation, body copy, and controls. Favor a desktop split composition: concise, left-aligned product messaging beside a large, rounded workspace preview. Let the preview carry the atmospheric gradient using Dusk Blue (#4867af), Slate Mist (#9cafb8), and Warm Clay (#c49577); keep these tones tied to media rather than spreading them across UI surfaces. Use Quiet Gray (#858585) for secondary copy, Graphite Line (#242424) for discreet dividers, and a white pill CTA with dark text. Keep layering restrained, spacing comfortable, and the interface legible. Do not invent additional palette values or decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed desktop split: left information and feature rail, expansive workspace preview on the right, floating pill navigation near the bottom. | Feature list navigation, Primary start CTA, Announcement link | Dark canvas, Blue-to-warm media gradient, Rounded preview frame, Floating pill nav |

## Source CSS custom properties (selected)

```css
--univer-tw-ring-color: rgba(147,197,253,.5);
--univer-tw-ring-offset-color: #fff;
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card-foreground: 210 40% 98%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--radius: 0.5rem;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-ring-offset-color: #fff;
--tw-border-opacity: 1;
--tw-ring-color: rgb(147 197 253/0.5);
```

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