CURATED · OPEN · FREE

Things

A premium, minimalist personal task manager emphasizing clarity and ease of use.

productivityapp

↓ Download design system (11 MB)Open in OpenDesign

Visit: https://culturedcode.com/things

📦 Browse pack contents →

Identity DNA

minimalistfunctionalclearpremium

A calm, organized workspace.

Color

#4F91FBAccent

#303336Ink

#F2F5F7BG

#55606EMuted

rgba(0, 15, 36, 0.46)Line

High-contrast text on a soft, neutral background with a single functional blue accent.

Typography

humanist-sans

display56px · 800
heading32px · 700
body-lg20px · 400
body16px · 400
caption14px · 400

Display headings use weight 800 with tight tracking. · Body text uses weight 400 for maximum readability. · Links use the blue accent color without underlines.

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

80px

generous whitespace to create a calm, breathable layout

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(0, 15, 36, 0.1)

0 4px 12px rgba(0, 15, 36, 0.08)

Layout

1200container

12columns

24pxgutter

768 / 1024breakpoints

Centered single-column layout with wide margins

Motion & Interaction

200msmicro

300mssmall

600msmedium

cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

Smooth fade-ins · Subtle hover state transitions

Subtle color shifts or opacity changes · Immediate visual feedback

Components

button Soft rounded pill with solid blue background
card White background with subtle border and rounded corners
chip Minimal rounded tags
input Clean minimal fields with subtle borders
hero Centered icon, large bold title, descriptive subtitle, and single CTA

Voice & Don'ts

Tone Professional, helpful, and understated
Headlines Direct and descriptive
CTAs Clear and action-oriented

Don't use dark mode — screenshot shows a light gray background (#F2F5F7) instead.
Don't use decorative serif fonts — screenshot shows humanist-sans for all text instead.
Don't use multiple bright accent colors — screenshot shows only blue (#4F91FB) as a single functional accent instead.
Don't use tight, cramped spacing — screenshot shows generous vertical and horizontal margins instead.
Don't use heavy drop shadows — screenshot shows soft, subtle shadows instead.
Don't use aggressive, angular border-radius — screenshot shows soft, rounded corners (up to 18px) instead.
Avoid: Excessive punctuation
Avoid: All-caps shouting
Avoid: Overly casual slang

Inside the pack — real screenshots

Things — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

The Things website uses a calm, minimalist design centered around a soft light gray background (#F2F5F7) and dark charcoal text (#303336). A single functional blue accent (#4F91FB) is used for links and interactive elements. The typography consists of humanist-sans-serif fonts, with heavy weight 800 for the main display heading and standard weight 400 for body text. The layout is single-column and highly breathable, using generous whitespace to emphasize clarity and focus. Critical constraints: Do not use dark mode; do not introduce serif typography; do not add multiple bright colors; avoid cramped layouts; avoid aggressive shadows; avoid sharp, angular borders.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko