What is Things' primary brand color?

Things' single chromatic accent is cobalt blue — a medium, fully-saturated blue that appears on the 'Watch Introduction Video' link, the CTA download button, the 'See features' inline link, and the app icon's checkmark glyph. It does not appear as a background fill on any marketing-page surface. The extraction shows two close blue values at frequencies 64 and 14 — a primary cobalt and a slightly lighter variant used for hover or secondary links. There is no secondary accent; every other color on the page is a neutral gray.

What typeface does Things use, and what should I use as a substitute?

Things runs the system-sans stack — ui-sans-serif, -apple-system, system-ui, Roboto — which renders as San Francisco on macOS and iOS, matching the native app precisely. The marketing page uses this same stack across every tier: section headings at 36px / weight 700, body paragraphs at 20px / weight 400, nav links at 15px / weight 400. There is no custom display font or second family. The closest web substitute for San Francisco is Inter at the same weights; at 36px the proportions transfer cleanly. On Windows and Android, the system-ui fallback lands on Segoe UI or Roboto, both of which work at these sizes.

What background color does Things use?

The marketing page floor is a faint blue-cast off-white — extracted as a cluster around the cool near-white that macOS uses for sidebar and window backgrounds. It is not pure white (#ffffff) and not a saturated color; the tint is subtle enough that most viewers read it as 'white.' The extraction clusters three close values (including a lighter near-white used for card interiors) into a single token around the cool off-white. This mirrors the macOS HIG recommendation that app backgrounds not use pure white so that white content (like text on cards) reads against the floor.

What is Things' corner-radius philosophy?

The dominant radius on the Things marketing page is 18px — extracted as the highest-frequency value (17 occurrences). This matches the rounded-rectangle radius Apple uses for app icons on iOS and macOS in the current HIG. Below it, the scale uses 3px (small chips and fine rules), 4.5px (input fields and small UI), 6px (mid-size cards), and 12–13px (promotional labels). The 18px tier is used on screenshot frames and highlight cards. There is no pill or full-circle tier in the captured marketing surface. The scale communicates 'Mac-native' rather than 'SaaS rounded.'

Can I use this DESIGN.md to build my own productivity-app marketing site?

Yes — feed this file to Claude, Cursor, or any AI tool that reads design tokens and it will reproduce Things' Mac-native restraint: system-sans stack across every tier, cool off-white canvas instead of pure white, a single cobalt-blue accent reserved for one interactive moment per surface, and an 18px dominant radius on decorative frames. The token references resolve without invention. The one constraint: this system depends on product screenshots to carry the page visually. Without strong product mockups, the spare chrome reads as unfinished rather than intentional.

Things Design System

Things by Cultured Code is a Mac-native task manager whose marketing site matches the product exactly — off-white canvas, system-sans type, single cobalt blue accent.

About Things DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source culturedcode.com

Productivity & SaaS

Things' marketing page at culturedcode.com is the most Mac-native-feeling website in the productivity-app category. The hero places the app icon — a rounded-rectangle with a cobalt-blue checkmark — above a single line of body text and a "Watch Introduction Video" link, then the page shifts immediately into product screenshots. There is no hero headline beyond the product name, no gradient, no brand-color fill. The design communicates Mac-quality by being as spare as the Mac HIG itself.

The token system behind that restraint: one typeface (Apple's system-sans, rendering as San Francisco on macOS and iOS), one chromatic accent (a cobalt blue that appears on links, the CTA button, and nowhere else), and a canvas that isn't quite white — the off-white floor has a faint blue cast that matches macOS window backgrounds. Where Notion uses a cream and where Todoist uses red, Things holds still at the neutrals and lets the product do the talking. The radius scale is anchored at 18px — the Mac-window rounding — rather than the 4-8px tight-crop that developer tools favor.

Feed this file to an AI coding tool and it reproduces Things' disciplined Mac-native moves: system-sans at modest weights (400 body, 700 for section headers only), off-white canvas instead of pure white, cobalt blue reserved for a single interactive accent per surface, and 18px rounding on any element that needs to feel at home on macOS. The one constraint worth noting: this system only works at the scale of a focused single-product site. Introducing a second accent or a display font would break the "the app IS the brand" identity.

What makes it distinct

Product screenshots as decorationdevice mockups of the Mac, iPhone, iPad, and Vision Pro apps carry every visual moment; there is no brand-layer chrome
System-sans throughoutui-sans-serif/-apple-system stack renders as San Francisco on Apple devices, matching the native Mac app pixel-for-pixel
Single cobalt accenta medium blue appears only on interactive links, the CTA button, and the app icon; the rest of the palette is neutral grays
18px dominant radiusthe largest radius tier, used on product screenshot frames and promotional chips, gives the page a Mac-native rounded-window feel
Cool off-white canvasthe page floor is a faint blue-gray near-white rather than pure white, echoing macOS window backgrounds

Live at culturedcode.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

culturedcode.com

Explore Things

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Things design system FAQ

Common questions about Things's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Things — official site

Cultured Code's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.