Skip to content
For the complete documentation index, see llms.txt.

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 the Things-quiet product: sidebar plus Today, Glide, cool grey, one blue spark on the checkbox.

Composition can steal Things (mist canvas, product as art, space not rules). Identity cannot. 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. Not Vercel. Not a cream editorial site. 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.

  • Ink (#020817, --foreground: 222.2 84% 4.9%): Text and chrome. Never #000, never marketing olive #191c19.
  • Paper (#ffffff, --background: 0 0% 100%): App canvas and lifted panels.
  • Primary (#0F172A, --primary: 222.2 47.4% 11.2%): App filled buttons (shadcn Button). Near-ink. White label.
  • Mist (#F7F7F8, --sidebar-background: 240 6% 97%): Sidebar and marketing gallery wall. Cool. Not cream #f1efe7.
  • Surface (#F9FAFB, --color-task-open-bg): Tint behind an open task. Marketing may use mist or surface, not warm paper #fbfaf6.
  • Muted fill (#EFEFF1, --muted: 240 6% 94.1%). Muted text (#70707F, --muted-foreground: 240 6% 46.9%): Captions. Cool, 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 Things #2576eb. Not marketing #2557d6. Not Brand Blue #0C41F4.
  • Hairline (#E2E8F0, --border: 214.3 31.8% 91.4%): App borders. List row dividers may use #E5E5E5. 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. 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. First viewport of /: live Today list, square, falling off the bottom. 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. Painting is footer-only if it remains.

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 copy manage-frontend :root into marketing instead of maintaining landing-*.
  • 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 use SF Pro, Geist, Inter, Things #2576eb, or #2557d6.
  • Don’t put Brand Blue on buttons, links, or checks.
  • Don’t put the painting, a chat bubble, or a playground button in the hero.
  • Don’t invent quotes, logos, or first names.
  • Don’t print a Raycast install count or rating. Write “on the Raycast Store”.
  • Don’t treat 30 Sep Basic-for-life as a signup click. If named: create the workspace before 30 Sep 2026 23:59 AEST. No claim step. /founding is terms, not a second button.
  • Don’t lead / with MCP.
  • Don’t noindex /. Title, H1, and FAQ JSON-LD stay.