---
name: Things
description: "Worth including as a prime example of refined, Apple-style minimalism applied to a consumer productivity tool, prioritizing clarity and ease of use over visual noise."
version: alpha

colors:
  background: "#F2F5F7"
  primary: "#303336"
  tertiary: "#4F91FB"
  neutral: "#55606E"
  line: "rgba(0, 15, 36, 0.46)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 800
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "-0.5px"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

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

*A calm, organized workspace.*

## Colors

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

- **Background (`#F2F5F7`)** — uses `bg` token
- **Primary text (`#303336`)** — uses `ink` token
- **Accent (`#4F91FB`)** — uses `accent` token
- **Muted (`#55606E`)** — uses `muted` token
- **Borders (`rgba(0, 15, 36, 0.46)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

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

## Layout

Centered single-column layout with wide margins

*Rhythm:* generous whitespace to create a calm, breathable layout

## Elevation & Depth

- 0 4px 12px rgba(0, 15, 36, 0.08)
- Borders: 1px solid rgba(0, 15, 36, 0.1)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## 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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```