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

# Capacities · Design System

> A calm, sunlit canvas for connected thinking

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

Capacities pairs a restrained editorial layout with a warm ivory glow to introduce its connected-knowledge app. Product UI, a human-centered video, proof points, and compact cards guide visitors from the core idea to a free-start CTA.

## North star

Keep the page mostly white and quietly structured, using warm yellow only as a soft cue around clear, centered product messaging.

## Overview

The page is built on a white canvas with recurring warm off-white section bands, giving a long landing page a gentle, legible rhythm. Near-black headings carry the strongest contrast; muted warm-gray body copy stays secondary, while pale yellow appears as a restrained highlight in the hero glow, announcement strip, badges, and selected card details. Typography is system sans, with a bold, tightly tracked centered hero headline and readable, generously leaved supporting text. The layout favors centered introductions, broad two-column feature areas, and card grids within a measured content width. Product interface fragments orbit the hero message, then give way to a framed testimonial video, comparison diagrams, press marks, statistics, and user quotes. Cards are mostly white with subtle hairlines and light shadows rather than heavy fills. Repeated section breathing room and modest rounded corners keep the experience calm and product-focused.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas and elevated card fill across the hero, features, proof, and closing CTA. |
| Warm Graphite | `#5c5959` | `--color-warm-graphite` | neutral | Muted body copy, navigation labels, and secondary text on light backgrounds. |
| Soft Marigold | `#fde68a` | `--color-soft-marigold` | accent | Pale yellow accent recorded in sparse text and button details; not a dominant page color. |
| Apricot Tint | `#fed7aa` | `--color-apricot-tint` | semantic | Subtle badge tint in measured UI details, not a defining section background. |
| Linen Line | `#f5f4f3` | `--color-linen-line` | neutral | Fine card and component borders, step-label fills, and light footer details. |
| Soft Ink | `#1a1a1d` | `--color-soft-ink` | brand | Primary headings, high-emphasis copy, and dark footer or inverse surfaces. |
| Ash Taupe | `#a7a2a1` | `--color-ash-taupe` | neutral | Faint supporting copy and subdued footer, badge, or heading text. |
| Stone Hairline | `#ecebea` | `--color-stone-hairline` | neutral | Stronger card outlines and delicate link or footer dividers. |
| Vanilla Glow | `#fef2c4` | `--color-vanilla-glow` | accent | Warm gradient and faint highlighted surfaces behind selected elements. |
| Clay Signal | `#cc5d23` | `--color-clay-signal` | semantic | Tiny badge or illustrative detail only; not part of the dominant brand treatment. |
| Butter Accent | `#fddf91` | `--color-butter-accent` | accent | Measured accent for select card details and soft yellow gradient highlights. |
| Cream Haze | `#fffae8` | `--color-cream-haze` | surface | Very light warm tint in small badges, buttons, and decorative details. |
| Pale Custard | `#fef6d6` | `--color-pale-custard` | surface | Faint supporting warm tone within subtle background gradients and illustrations. |
| Misted Stone | `#e4e3e2` | `--color-misted-stone` | neutral | Secondary outlines and subdued badge or card details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#1a1a1d` (Soft Ink) · `--color-text` → `#1a1a1d` (Soft Ink) · `--color-text-muted` → `#5c5959` (Warm Graphite) · `--color-text-subtle` → `#a7a2a1` (Ash Taupe) · `--color-border` → `#f5f4f3` (Linen Line) · `--color-accent` → `#fddf91` (Butter Accent)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1a1d` | `#ffffff` | 17.36:1 | AAA |
| `#5c5959` | `#ffffff` | 6.93:1 | AA |
| `#5c5959` | `#1a1a1d` | 2.5:1 | fail |
| `#a7a2a1` | `#ffffff` | 2.52:1 | fail |
| `#a7a2a1` | `#1a1a1d` | 6.88:1 | AA |
| `#fddf91` | `#ffffff` | 1.3:1 | fail |
| `#fddf91` | `#1a1a1d` | 13.35:1 | AAA |

### Gradients

- `radial-gradient(100% 70% at 50% 0%, oklch(0.9243 0.1151 95.76 / 0.5) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(oklch(0.9676 0.0016 67.02) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(oklch(1 0.0001 263.28), oklch(1 0.0001 263.28)), linear-gradient(135deg, oklch(0.9243 0.1151 95.76 / 0.5), oklch(0.8369 0.1643 84.43 / 0.5))`
- `radial-gradient(80% 100% at 50% 110%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, oklch(0.9243 0.1151 95.76 / 0.08) 60%, oklch(0.9243 0.1151 95.76 / 0.2) 80%, oklch(0.9243 0.1151 95.76 / 0.35) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ui-sans-serif | `--font-body` | system | 400, 600, 500, 700, 800 | Primary system type for headings, body, navigation, buttons, and links. | Inter |
| JetBrains Mono | `--font-mono` | webfont | 400, 500 | Small code-style text and technical labels. | Source Code Pro |
| Inter | `--font-inter` | webfont | 700, 500 | Limited bold display or embedded interface text. | Inter |

- **ui-sans-serif:** Use a clean sans; bold centered hero headline has tight negative tracking, while body copy is regular and open.
- **JetBrains Mono:** Restrained monospace use; keep labels compact and regular-weight.
- **Inter:** Minor measured share; use selectively rather than as a competing page-wide typeface.

### Type scale — Perfect Fifth (ratio ≈ 1.549, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 700 | 1.25 | -0.025em | — | ui-sans-serif | Main centered hero headline and major page title. |
| h2 | 20px | 400 | 1.63 | 0 | — | ui-sans-serif | Section introductions and prominent supporting statements. |
| body | 15px | 400 | 1.63 | 0 | — | ui-sans-serif | Feature explanations, testimonials, and general descriptive copy. |
| caption | 14px | 400 | 1.43 | 0 | — | ui-sans-serif | Small metadata, attribution, and card support text. |
| button | 16px | 400 | 1.5 | 0 | — | ui-sans-serif | Primary and secondary CTA labels. |
| nav | 14px | 500 | 1.43 | 0 | — | ui-sans-serif | Header navigation and compact menu labels. |
| link | 16px | 400 | 1.5 | 0 | — | ui-sans-serif | Text links and secondary navigation actions. |
| code | 12px | 400 | 1.33 | 0 | — | JetBrains Mono | Small technical or code-like labels where present. |

## Spacing & layout

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

The measured page content max width is 1216px, with a spacious overall density and a 128px section rhythm. Center section headings and short introductions; use two-column compositions for hero and explanatory content, three-column grids for testimonials or steps, and a multi-column footer. Keep cards aligned within their sections and preserve generous breathing room between content groups. Alternate white canvas with soft off-white bands to mark transitions without heavy separators.

## Shape & elevation

- Radius: button `8px` · card `16px` · badge `9999px` · nav `8px` · link `8px` · xs `6px` · sm `8px` · md `12px` · lg `16px` · xl `20px` · 2xl `24px` · pill `9999px`
- Shadow `hairline` (card, other, link): `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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px`
- Shadow `sm` (other, card, 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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px, rgba(0, 0, 0, 0.03) 0px 1px`
- Shadow `hairline-2` (badge): `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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `md` (card): `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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 4px 12px 0px, rgba(0, 0, 0, 0.04) 0px 2p`
- Shadow `inset` (link, nav): `oklch(0.9163 0.0017 67.07) 0px 0px 0px 1px inset`
- Shadow `xl` (card): `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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 4px 6px -1px, rgba(0, 0, 0, 0.12) 0px 20`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Favor flat white cards with fine neutral outlines, then use only restrained low-opacity shadows to lift key cards and the hero video. The page's depth comes mainly from alternating section bands and layered product visuals, not dark panels or dramatic drop shadows. Use rounded corners consistently but keep borders quiet.

## Imagery

The hero uses light product-interface fragments and floating note-like cards around its centered message; these are pale and low contrast so they support rather than obscure the headline. A rounded rectangular video frame introduces a person using the product. Additional visuals include simple file-versus-object diagrams, app-like UI panels, small category icons, and press logos. Keep product imagery clean, softly lit, and grounded in white space.

## Components

### Primary CTA

Dark charcoal fill with #f5f4f3 label, 8px radius, and compact padding; use for Start Free and Get Started actions.

### Secondary text CTA

White or transparent surface with dark text and a subtle inset or #ecebea outline; keep visually lighter than the primary action.

### Feature card

White card with a #ecebea hairline, 16px radius, and measured 28px internal padding; concise heading and supporting copy.

### Step badge

Small pill with #f5f4f3 fill, #e4e3e2 border, and dark compact label.

### Announcement strip

A thin pale-yellow horizontal band beneath the navigation, with centered offer copy, small icon, and a close affordance.

### Proof card

Minimal testimonial or metric treatment using muted attribution, light borders, and generous white space instead of strong color blocks.

### Measured component styles

- **Primary button** (“Start Free”): background #454447 · text #f5f4f3 · radius 8px · padding 8px 12px · 400 16px ui-sans-serif
- **Secondary button** (“Researchers”): transparent background · text #a7a2a1 · border 1px solid #f5f4f3 · radius 3.35544e+07px · padding 8px 14px · 500 14px ui-sans-serif
- **Link** (“Discover Product”): transparent background · text #454447 · radius 8px · padding 8px 12px · 400 16px ui-sans-serif · shadow oklch(0.9163 0.0017 67.07) 0px 0px 0px 1px inset
- **Card** (“Notes everywhere. Ideas nowhere. Meeting”): background #ffffff · text #454447 · border 1px solid #ecebea · radius 16px · padding 28px · 400 16px ui-sans-serif · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“Sarah”): transparent background · text #5c5959 · border 1px solid #f5f4f3 · radius 6px · padding 2px 6px · 500 9px ui-sans-serif · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Capacities Product Resources Download Pr”): transparent background · text #454447 · radius 0px · padding 0px · 400 16px ui-sans-serif

## Do

- Use white as the main canvas.
- Alternate in the measured warm off-white bands.
- Keep hero messaging centered and high contrast.
- Use pale yellow as a subtle highlight, not a large saturated block.
- Build feature cards with fine borders and restrained shadows.
- Leave generous space between major sections.

## Don't

- Do not introduce saturated brand colors absent from the palette.
- Do not make every section a card or boxed panel.
- Do not use dense, edge-to-edge text blocks.
- Do not let decorative product mockups compete with the headline.
- Do not use heavy shadows or thick borders.
- Do not invent colors, dimensions, or spacing values beyond the measurements.

## Agent prompt

Build a new Capacities-style SaaS page with a calm, product-led editorial feel. Use Gallery White (#ffffff) as the main canvas, alternating measured warm off-white section bands, and Soft Ink (#1a1a1d) for primary headings. Set body copy in Warm Graphite (#5c5959); reserve Butter Accent (#fddf91) and Vanilla Glow (#fef2c4) for small highlights and faint gradients. Follow the measured 1216px max content width, spacious 128px section rhythm, centered introductions, and flexible two- or three-column sections. Use the system sans stack, bold tightly tracked display headings, quiet borders in Linen Line (#f5f4f3) or Stone Hairline (#ecebea), and restrained shadows. Build clean white cards, subtle badges, and dark primary CTAs. Keep imagery light and product-oriented, with ample whitespace and clear hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and copy with side-floated product details; video frame below. | Primary free-start CTA, Secondary product link, Trust note | Pale yellow glow, Floating app cards, Dark rounded CTA |
| 2 | feature-grid | Soft off-white band with centered introduction, three cards, then a closing statement. | Problem framing, Three pain-point summaries | Light cards, Subtle icons, Muted copy |
| 3 | comparison | Centered section title and intro, explanatory content, quote, then two comparison visuals. | Concept explanation, Before-and-after comparison | File hierarchy diagram, Connected-object diagram, Quote panel |
| 4 | feature-grid | Off-white band with centered heading and paired feature columns. | Benefit-led scan, Feature detail | Two-column cards, Small colored icons |
| 5 | testimonials | White section with centered heading, metrics, press logos, and a three-column quote grid. | Social proof, Review discovery link | Metric row, Press wordmarks, Quote cards |
| 6 | how-it-works | Off-white band with centered intro, three step cards, supporting text, and CTA. | Three-step onboarding, Start-first-note action | Numbered pills, Compact cards, Dark CTA |
| 7 | feature-split | White section with centered title, category tabs, and a two-column audience panel. | Audience selection, Contextual use cases | Category chips, Large feature panel, Quote card |
| 8 | feature-grid | Off-white band with centered intro and two-column grid of principle cards. | Principle-led storytelling, Trust reassurance | Light cards, Small icons, Muted captions |
| 9 | cta | Centered closing message inside a softly highlighted panel with actions and reassurance. | Free-start conversion, Risk-reduction notes | Warm glow panel, Paired CTAs, Quote treatment |
| 10 | footer | Off-white footer with brand column and five compact link columns. | Grouped navigation, Legal and company discovery | Small muted links, Column headings, Social icons |

## Source CSS custom properties (selected)

```css
--ui-primary: oklch(21.91% .0058 285.84);
--landing-bg-page: oklch(100% .0001 263.28);
--landing-bg-section: oklch(98.56% .0016 67);
--landing-bg-elevated: oklch(100% .0001 263.28);
--landing-bg-card: oklch(100% .0001 263.28);
--landing-bg-card-hover: oklch(99.16% .0016 67);
--landing-text-heading: oklch(21.91% .0058 285.84);
--landing-text-body: oklch(46.68% .0039 16.75);
--landing-text-muted: oklch(71.61% .006 30.59);
--landing-text-faint: oklch(86.43% .0017 67.13);
--landing-border: oklch(94.06% .0016 67.05);
--landing-border-subtle: oklch(96.76% .0016 67.02);
--landing-border-strong: oklch(91.63% .0017 67.07);
--landing-accent: oklch(21.91% .0058 285.84);
--landing-accent-hover: oklch(38.87% .0052 301.05);
--landing-accent-light: oklch(96.76% .0016 67.02);
--landing-accent-muted: oklch(91.63% .0017 67.07);
--btn-primary-bg: oklch(38.87% .0052 301.05);
--btn-primary-bg-hover: oklch(46.68% .0039 16.75);
--btn-primary-text: oklch(96.76% .0016 67.02);
--btn-primary-text-hover: oklch(100% .0001 263.28);
--btn-primary-ring: oklch(29.87% .0072 285.88);
--btn-secondary-bg: oklch(100% .0001 263.28);
--btn-secondary-bg-hover: oklch(98.56% .0016 67);
--btn-secondary-text: oklch(38.87% .0052 301.05);
--btn-secondary-text-hover: oklch(21.91% .0058 285.84);
--btn-secondary-border: oklch(91.63% .0017 67.07);
--btn-secondary-border-active: oklch(71.61% .006 30.59);
--landing-shadow-xs: 0 1px 2px #0000000a;
--landing-shadow-sm: 0 2px 4px #0000000d,0 1px 2px #00000008;
--landing-shadow-md: 0 4px 12px #00000014,0 2px 4px #0000000a;
--landing-shadow-lg: 0 8px 24px #0000001a,0 4px 8px #0000000d;
--landing-shadow-xl: 0 16px 48px #0000001f,0 8px 16px #0000000f;
--font-serif: "Literata",Georgia,"Times New Roman",serif;
--font-display: "Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
```

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