---
version: alpha
name: Done Bear
description: The manage-frontend theme. Marketing matches the app.
colors:
  ink: "#161513"
  paper: "#FBFAF9"
  panel: "#FFFFFF"
  primary: "#24221E"
  on-primary: "#FAF9F7"
  mist: "#F5F4F2"
  surface: "#F8F8F6"
  muted: "#EEEDEA"
  muted-foreground: "#6D6A64"
  signal: "#2563EB"
  signal-dark: "#64ABFF"
  hairline: "#E5E3DF"
  checklist-divider: "#E4E2DD"
  checkbox-border: "#C1BEB8"
  completed: "#6F6D68"
  brand: "#0C41F4"
  ember: "#9F361F"
  deadline: "#FD486F"
  selection: "#CBE2FF"
  selection-text: "#1C60C3"
  overlay: "rgb(0 0 0 / 0.3)"
  night: "#252322"
  night-ink: "#FFFFFF"
typography:
  headline-display:
    fontFamily: Glide
    fontSize: 92px
    fontWeight: 500
    lineHeight: 0.98
    letterSpacing: -0.045em
  headline-lg:
    fontFamily: Glide
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Glide
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.02em
  body-lg:
    fontFamily: Glide
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.45
  body-md:
    fontFamily: Glide
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Glide
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Glide
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.2
  accent-italic:
    fontFamily: Glide
    fontSize: 92px
    fontWeight: 400
    lineHeight: 0.98
    letterSpacing: -0.035em
rounded:
  checkbox: 3px
  sm: 8px
  md: 10px
  lg: 12px
  xl: 16px
  composer: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 80px
  field: 40px
  gutter: 24px
  margin: 32px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.lg}"
    padding: 12px
    height: 40px
  button-marketing:
    backgroundColor: "{colors.signal}"
    textColor: "{colors.paper}"
    typography: "{typography.label-md}"
    rounded: "{rounded.lg}"
    padding: 12px
    height: 44px
  link:
    backgroundColor: transparent
    textColor: "{colors.signal}"
    typography: "{typography.body-md}"
  nav:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
  product-frame:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
  checkbox:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    rounded: "{rounded.checkbox}"
    size: 14px
  checkbox-checked:
    backgroundColor: "{colors.signal}"
    textColor: "{colors.paper}"
    rounded: "{rounded.checkbox}"
    size: 14px
  input:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    height: 40px
    padding: 10px
---

# Done Bear

The app is the source of truth. Marketing wears the same clothes.

Tokens come from `apps/manage-frontend/src/globals.css` (`:root` and `:root[data-theme="dark"]`). iOS `ColorTokens.swift` already maps 1:1 from that file. Marketing must too. Do not invent a second palette on `apps/marketing-frontend`.

## Overview

Done Bear is a local-first GTD list. The UI is quiet: sidebar plus Today, Glide, cool grey, one blue spark on the checkbox.

Composition is a mist canvas, the product shown as art, and space in place of rules. Identity is fixed. Type is Glide. Corners are the app’s 12px system. Checkboxes are 3px rounded squares filled with Signal `#2563EB`, not circles, not Brand Blue.

Personality: reduced, exact. Warm paper, not a cream editorial site: the neutrals
carry a trace of warmth, the layout stays quiet. Not Vercel. Not a dark Linear
dashboard.

`/brand` holds naming and the logo files (Brand Blue `#0C41F4` lives there). This file holds look and feel. If a marketing colour is not in manage-frontend, it is wrong.

## Colors

Normative values are the HSL custom properties in manage-frontend. Hex below is the computed equivalent.

Every neutral sits on one warm hue (38–45) at low saturation — the warmth is
meant to be felt rather than seen, so the values below are deliberately close to
grey. Saturation falls as lightness falls.
Accents do not: Signal, Deadline, Brand and Ember keep their exact values, because
a warm neutral is the ground a chromatic status colour stands on, not a rival to it.
A new grey comes off this hue; a Tailwind `slate`/`zinc` value reads cold here.

- **Ink (`#161513`, `--foreground: 40 7% 8%`):** Text and chrome. Warm near-black. Never `#000`, never marketing olive `#191c19`.
- **Paper (`#FBFAF9`, `--background: 45 22% 98%`):** App canvas. Panels lift off it in pure white (`--card` / `--popover`), the way a card sits on a page.
- **Primary (`#24221E`, `--primary: 38 8% 13%`):** App filled buttons (shadcn `Button`). Near-ink. Warm off-white label (`#FAF9F7`).
- **Mist (`#F5F4F2`, `--sidebar-background: 45 15% 95.5%`):** Sidebar and marketing gallery wall. A step deeper than paper, same hue. Not saturated cream `#f1efe7`.
- **Surface (`#F8F8F6`, `--color-task-open-bg`):** Tint behind an open task. Marketing may use mist or surface.
- **Muted fill (`#EEEDEA`, `--muted: 42 10% 92.5%`). Muted text (`#6D6A64`, `--muted-foreground: 40 4% 41%`):** Captions. Warm grey, not olive `#656a63`.
- **Signal (`#2563EB`):** The product’s one chromatic interactive. Checkbox fill (`.ft-checkbox-visual::after`). Dark theme `#64ABFF`. Selection text family `#1C60C3` / `#CBE2FF`. Not marketing `#2557d6`. Not Brand Blue `#0C41F4`.
- **Hairline (`#E5E3DF`, `--border: 42 10% 88.5%`):** App borders. List row dividers may use `#E4E2DD`. Marketing sections are separated by 80px of space, not rules.
- **Deadline (`#FD486F`):** Due or overdue only. A future date stays muted.
- **Brand (`#0C41F4`):** Logo and wordmark, from `/brand`. Not a button, not a checkbox, not a link.
- **Ember (`#9F361F`):** Marketing homepage H1 italic on “can’t delegate.” Nowhere in the app. Nowhere else on marketing.

Dark theme: use the `:root[data-theme="dark"]` block as written — warm charcoal on the
same hue (`#292927` canvas, `#F7F7F5` text), not a brown cast. Marketing pages stay light.

Kill on marketing: `--color-landing-canvas`, `--color-landing-ink`, `--color-landing-blue`, `--color-landing-paper`, `--color-landing-muted`, `--color-landing-night`. Map any leftover `landing-*` usage to the tokens above.

## Typography

**Glide** variable 100–950, plus **Glide Mono**. Same files the app loads (`glide-variable.woff2`, italic, mono). `--font-sans: "Glide", ui-sans-serif, system-ui, sans-serif`.

- App headings in typeset: weight 600, tracking about `-0.03em`.
- Marketing display H1 may keep the existing fluid step `clamp(3.2rem, 5.5vw, 5.75rem)`, weight 500, tracking `-0.045em`, with the Ember italic exception at `-0.035em`.
- Body: 16px / 1.5–1.6. App chat typeset is 14px.
- No SF Pro, Geist, Inter, or serif. No second proportional face.

## Layout

App: sidebar + list. Field height 40px (`--field-height: 2.5rem`). 4px spacing base.

Marketing: reading column ~720–800px, product frames may break out. Section gap 80px. Nav floats, no fill. The product hero variant shows the live Today list, square, falling off the bottom. The illustrated variant uses the same guide-style art as other editorial surfaces. One filled Start free (Signal). iPhone is a text link.

## Elevation & Depth

Tonal. Mist/surface behind paper. App already defines `--shadow-soft: 0 15px 50px 0 rgba(27, 32, 50, 0.1)` and the popover stack. Use those. No extra glow. Illustration uses the GTD guide style: coloured-pencil texture, a honey-brown bear in an indigo shirt, warm ivory paper, and restrained olive and ochre scenery. Apply it to editorial artwork, the illustrated hero variant and footer. Keep functional UI and real screenshots on their existing neutral surfaces.

## Shapes

From `--radius: 0.75rem` (12px):

- `sm` = 8px, `md` = 10px, `lg` = 12px, `xl` = 16px
- Checkboxes: **3px** rounded square, not a circle
- Agent composer: 24px, inner = outer minus 8px padding
- Picker: 14px

Do not introduce 18px product-frame radii unless the app frame already uses them. Default frames to `lg` (12px) so a screenshot of Today matches the live app.

## Components

**Buttons (app).** Filled primary is `{colors.primary}` (`#0F172A`), 12px radius, 40px tall.

**Buttons (marketing CTA).** Start free is `{colors.signal}` (`#2563EB`) so it matches the checkboxes in the hero list. One filled button per viewport. Log in and iPhone are text. `SignupButton location=hero`.

**Checkboxes.** 14px-class rounded square, 1.5px `{colors.checkbox-border}`, checked fill `{colors.signal}`. Dashed empty = someday. Never a circle. Never `#0C41F4`.

**Lists.** Real Today tasks. Completed `{colors.completed}` + strike. No “This is a demo” chip.

**Inputs.** Paper, 40px, `--field-radius` (10px).

**Links.** Signal, not Brand Blue, not ember.

**Nav.** Transparent. Ink labels.

**Settings nav hues** (yellow, orange, teal, etc. in globals.css) are view accents inside the app. They are not a marketing palette.

## Do's and Don'ts

- Do keep Glide as the only proportional face.
- Do keep checkboxes as 3px squares in Signal `#2563EB`.
- Do keep `/brand` for naming and logo files (`#0C41F4`).
- Don't restyle the app to match marketing cream or Brand Blue fills.
- Don't put Brand Blue on buttons, links, or checks.