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

# Cultured Code — Things · Design System

> Quiet, focused design for getting things done

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

Things presents a personal task manager through a calm, spacious page that balances product imagery with concise editorial copy. Soft gray section bands, dark typography, blue links, and extensive user and press testimonials create a polished, approachable feel.

## North star

Let spacious, quiet layouts and clear product imagery lead; use blue only as a deliberate point of interaction.

## Overview

The page uses a restrained palette anchored by white and pale blue-gray, with dark charcoal text providing clear contrast and saturated blue reserved for links and the newsletter button. Broad background bands distinguish major sections without making the page feel boxed in. System sans-serif typography keeps the experience familiar: bold, compact headings introduce sections, while centered explanatory copy remains readable and understated. The layout alternates centered product introductions with large device imagery, a compact platform grid, and two-column testimonial and editorial collections. Generous whitespace gives each block room to breathe, while a consistent content width keeps long sections controlled. Product imagery carries most of the visual personality: crisp app screens and devices are presented with soft shadows against quiet backgrounds. Flat cards, subtle borders, and restrained elevation support the content rather than competing with it.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Things Charcoal | `#303336` | `--color-things-charcoal` | brand | Primary headings, navigation, and body text across the page. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Main canvas and the clean background for product and editorial sections. |
| Mist Gray | `#f2f5f7` | `--color-mist-gray` | surface | Hero, testimonials, newsletter, and footer bands; also used for review cards. |
| Cloud Line | `#dfe3e8` | `--color-cloud-line` | semantic | Subtle input outlines and fine control boundaries. |
| Slate Copy | `#44474b` | `--color-slate-copy` | neutral | Secondary body copy that remains legible without competing with headings. |
| Footer Line | `#d4dae2` | `--color-footer-line` | neutral | Faint footer divider; keep it limited to structural separation. |
| Link Blue | `#5c9cf5` | `--color-link-blue` | accent | Feature links and small interactive text accents. |
| Muted Steel | `#838b97` | `--color-muted-steel` | neutral | Low-emphasis supporting copy and footer links. |
| Action Blue | `#4f91fb` | `--color-action-blue` | accent | Newsletter subscribe button; use with white button text. |
| Blue Slate | `#55606e` | `--color-blue-slate` | neutral | Occasional secondary text and link treatment. |
| Quiet Gray | `#8e9196` | `--color-quiet-gray` | neutral | Low-emphasis navigation and supporting link text. |
| Soft Pewter | `#9299a4` | `--color-soft-pewter` | neutral | Muted inline links and secondary copy. |
| Cool Gray | `#8792a1` | `--color-cool-gray` | neutral | Low-priority attribution links, including social handles. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Paper White) · `--color-surface` → `#f2f5f7` (Mist Gray) · `--color-text` → `#303336` (Things Charcoal) · `--color-text-muted` → `#44474b` (Slate Copy) · `--color-text-subtle` → `#838b97` (Muted Steel) · `--color-border` → `#dfe3e8` (Cloud Line) · `--color-accent` → `#4f91fb` (Action Blue) · `--color-accent-2` → `#5c9cf5` (Link Blue) · `--color-on-accent` → `#ffffff` (Paper White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#303336` | `#ffffff` | 12.71:1 | AAA |
| `#303336` | `#f2f5f7` | 11.61:1 | AAA |
| `#44474b` | `#ffffff` | 9.34:1 | AAA |
| `#44474b` | `#f2f5f7` | 8.53:1 | AAA |
| `#838b97` | `#ffffff` | 3.44:1 | AA-large |
| `#838b97` | `#f2f5f7` | 3.14:1 | AA-large |
| `#4f91fb` | `#ffffff` | 3.1:1 | AA-large |
| `#4f91fb` | `#f2f5f7` | 2.83:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ui-sans-serif | `--font-body` | system | 400, 700, 800, 600 | All page typography, including headings, body copy, navigation, and links. | Inter |

- **ui-sans-serif:** Use familiar sans-serif forms; headings are bold, navigation semibold, and body copy regular, with no measured tracking or uppercase treatment.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 700 | 1 | 0 | — | ui-sans-serif | Hero product name; bold, compact display heading. |
| h2 | 24px | 400 | 1.25 | 0 | — | ui-sans-serif | Section headings, generally centered and regular-weight. |
| body | 18px | 400 | 1.35 | 0 | — | ui-sans-serif | Main explanatory copy and testimonial text. |
| caption | 15px | 400 | 1.3 | 0 | — | ui-sans-serif | Small supporting labels, attributions, and metadata. |
| nav | 15px | 600 | 1.6 | 0 | — | ui-sans-serif | Top navigation and compact menu labels. |
| link | 15px | 400 | 1.3 | 0 | — | ui-sans-serif | Inline calls to action and secondary navigation links. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 6, 7, 8, 9, 10, 13, 18, 23, 27, 29, 36, 40 px.
- Section rhythm 81px · element gap 18px · card padding 27px · max content width 900px.

A centered content system uses a measured maximum width of 900px, with a comfortable rather than dense rhythm. The hero aligns its logo, title, copy, and video link centrally, then transitions into full-bleed product media. Later sections alternate white and pale gray bands, using centered introductions above product displays or two-column collections. The platform area uses a four-column grid; reviews and editorial cards use two columns. Section gaps are generous, while card padding and element spacing stay consistent.

## Shape & elevation

- Radius: button `8px` · input `6px` · card `18px` · media `3px` · nav `6px` · link `3px` · xs `3px` · sm `5px` · md `6px` · lg `11px` · xl `13px` · 2xl `18px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.1) 0px 2px 8px 0px, rgba(0, 0, 0, 0.1) 0px 0px 2px 0px`
- Shadow `hairline` (nav): `rgba(38, 52, 74, 0.15) 0px 1px 0px 0px`
- Shadow `md-2` (media): `rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px`
- Motion: standard transition `0.2s ease-out` on interactive elements.

Most section and testimonial surfaces stay flat, with pale background bands doing the structural work. Product media and selected social-style cards use soft, low-contrast shadows to suggest depth. Inputs and footer structure use fine gray borders or rules; keep outlines and elevation understated rather than adding heavy card frames.

## Imagery

Product imagery is the main visual anchor: app screens appear on Mac, iPhone, tablet, and Watch devices, often grouped into polished showcase compositions. The hero includes a video link and large product media. Review and press sections rely on small cards, logos, and award graphics. Device imagery may include vivid blue and other colors; treat those as product artwork, not as additional page-brand colors.

## Components

### Top navigation

A restrained horizontal header with a compact Things mark at left and Features, Support, and Blog links at right. Dark text sits on the light canvas above a subtle hairline.

### Hero introduction

Centered product mark, bold title, concise supporting paragraph, and blue video link on a pale gray band; large product media continues below.

### Feature showcase

Centered heading and short copy lead into a large composition of app screens across Apple devices, supported by a modest blue feature link.

### Platform cards

Four compact platform columns on white, each combining a device icon, platform details, and download or purchase links.

### Testimonials

Two-column collection of user-review cards on a pale gray band, with brief introductory copy and small social links above.

### Press and awards

Editorial section on white, pairing review excerpts and publication marks in a two-column card layout.

### Newsletter form

Centered sign-up area on pale gray with explanatory copy, email inputs, privacy note, and a blue Subscribe button.

### Footer

Pale gray footer with four link groups, subtle divider, and compact company mark.

### Measured component styles

- **Primary button** (“Subscribe”): background #4f91fb · text #ffffff · border 1px solid · radius 7.632px · padding 7.1px 17px · 700 16.96px ui-sans-serif
- **Link** (“@culturedcode”): transparent background · text #8792a1 · radius 0px · padding 0px · 400 15.2px ui-sans-serif
- **Input**: background #ffffff · text #000000 · border 1px solid #dfe3e8 · radius 6.4px · padding 8px · 400 16px ui-sans-serif
- **Card** (““A joy to use and beautiful to look at, ”): background #f2f5f7 · text #303336 · radius 18px · padding 27px · 400 18px ui-sans-serif
- **Navigation item** (“Features Support Blog”): transparent background · text #303336 · radius 0px · padding 0px · 600 15px ui-sans-serif

## Do

- Use pale gray bands to distinguish major content sections.
- Keep primary headings and body copy in dark charcoal.
- Center product introductions and keep their copy concise.
- Let device screenshots carry the detail in product showcases.
- Reserve blue for links and the primary subscription action.
- Use subtle card shadows and hairlines only where needed.

## Don't

- Do not introduce gradients or loud background colors.
- Do not make every section a bordered card.
- Do not crowd product imagery with decorative copy.
- Do not use blue as a large section background.
- Do not overstate muted labels or footer links.
- Do not treat colors inside product artwork as brand palette colors.

## Agent prompt

Build a new page in the Things visual style: calm, spacious, product-focused, and editorial. Use a centered content area capped at the measured 900px, generous section rhythm, and alternating Paper White (#ffffff) and Mist Gray (#f2f5f7) bands. Set headings and body text in Things Charcoal (#303336) with a system sans-serif stack; keep headings bold and copy restrained. Use Link Blue (#5c9cf5) for inline actions and Action Blue (#4f91fb) for a primary button with white text. Present product UI in crisp device mockups with soft, quiet shadows. Prefer flat surfaces, fine Cloud Line (#dfe3e8) input borders, and understated card treatments. Keep navigation compact, introductions centered, and content grids clear. Avoid gradients, dense layouts, and decorative color that competes with the product.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero content on a pale gray band, followed by full-bleed product media. | Product introduction, Video link | Brand mark, Bold title, Centered copy, Blue video link |
| 2 | feature-split | Centered section introduction above a large multi-device product showcase. | Feature overview, See features link | Centered heading, Short copy, Device mockups |
| 3 | product-grid | Centered heading and copy above four platform columns on a white section. | Platform selection, Download or purchase | Device icons, Platform labels, Store links |
| 4 | testimonials | Centered introduction and social links above a two-column review collection on pale gray. | Social proof, Browse reviews | Review cards, Small avatars, Social icons |
| 5 | reviews | Centered editorial introduction followed by two columns of review and award cards on white. | Press validation, Award recognition | Quote cards, Publication marks, Award artwork |
| 6 | newsletter | Centered copy and subscription form on a pale gray band. | Email signup, Privacy reassurance | Email inputs, Blue subscribe button, Small privacy note |
| 7 | footer | Four compact link groups on pale gray, separated from the newsletter by a fine divider. | Browse site sections, Company navigation | Link columns, Muted labels, Company mark |

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