---
name: Capacities
description: "Worth including as a premier example of 'Calm Tech' design, successfully blending the spatial logic of a productivity tool with the refined aesthetics of an editorial or studio site."
version: alpha

colors:
  background: "#FBFBFA"
  primary: "#1C1917"
  secondary: "#57534E"
  tertiary: "#F59E0B"
  neutral: "#A8A29E"
  bg-soft: "#FFF9EB"
  bg-quiet: "#F5F4F2"
  muted-soft: "#E7E5E4"
  line: "rgba(0,0,0,0.06)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 64px
    lineHeight: 1.05
    fontWeight: 700
    letterSpacing: "-2px"
  h2:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.15
    fontWeight: 700
    letterSpacing: "-1px"
  h3:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.3
    fontWeight: 600
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

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

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

---

## Overview

A home for everything you think, learn, and create.

*A minimalist design studio where ideas are treated as tangible objects.*

## Colors

Warm, earthy neutrals grounded in near-black, with a single warm gold accent.

- **Background (`#FBFBFA`)** — uses `bg` token
- **Primary text (`#1C1917`)** — uses `ink` token
- **Secondary text (`#57534E`)** — uses `ink-soft` token
- **Accent (`#F59E0B`)** — uses `accent` token
- **Muted (`#A8A29E`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.06)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Display headlines use tight negative tracking
- Body text maintains a comfortable 1.6 line-height for readability
- Mono font is reserved exclusively for code blocks and technical snippets

## Layout

Single column centered hero transitioning into a multi-column feature grid.

*Rhythm:* Consistent 4px grid with generous section padding (128px) to create breathing room.

## Elevation & Depth

- 0 1px 2px rgba(0,0,0,0.04)
- 0 4px 12px rgba(0,0,0,0.08)
- 0 20px 40px -4px rgba(0,0,0,0.12)
- Borders: Very subtle, 1px solid borders in a warm light gray.

## Shapes

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

## Components

- **button:** High-contrast black primary with white text; transparent secondary with black text and icon.
- **card:** White, slightly rounded rectangles with very soft drop shadows for floating UI previews.
- **chip:** Rounded-pill tags with light pastel backgrounds (peach, blue, green, purple) and muted text.
- **input:** Clean, single-line inputs with rounded corners and subtle borders.
- **hero:** Large centered typography with floating illustrative UI cards and a warm radial gradient overlay.

## Do's and Don'ts

**Don't:**
- Don't use a pure cold white — the screenshot shows a warm, off-white background (#FBFBFA).
- Don't use sharp corners — the cards and buttons in the screenshot have distinct rounding (8px-12px).
- Don't use bright, neon accents — the screenshot uses a warm, muted gold (#F59E0B) as the primary accent.
- Don't use dense, cramped layouts — the screenshot shows generous whitespace and padding (128px).
- Don't use decorative serifs for headlines — the screenshot shows a clean, geometric sans-serif display font.
- Don't use heavy drop shadows — the screenshot uses very soft, diffused shadows for depth.

---

## System Prompt (paste into AI agent)

```
Capacities is a clean, refined productivity tool designed as a 'studio for your mind.' It uses a warm, off-white background (#FBFBFA) paired with near-black ink (#1C1917) and a single gold accent (#F59E0B) for highlights. The typography features a geometric sans for display and a humanist sans for body text, creating a calm and intellectual tone. The layout is spacious, with a 1280px container, 128px section padding, and generous use of whitespace. Cards are soft and elevated with subtle shadows. Critical donts: never use a cold, clinical white; never use sharp corners on cards; never use aggressive or neon colors; avoid dense, cramped layouts; never use decorative serifs for headlines; and never use heavy, harsh drop shadows.
```