Levandor Visual Brand System

For Agents

Source of truth for the Levandor design tokens. Defined as CSS variables in packages/ui/src/styles/globals.css and consumed by Tailwind utilities and the mobile-native-feel surfaces. Desktop is dark-mode-first; mobile is light-themed with copper accents on white surfaces.

Color Tokens

Token	HSL	Hex (approx)	Purpose
--copper	hsl(31 53% 64%)	#d8a777	Primary accent (warm copper)
--copper-dim	hsl(28 40% 54%)	secondary	Secondary copper, hover states
--warm-black	hsl(40 11% 5%)	near-black	Dark surface (slightly warm, NOT pure black)
--warm-raised	hsl(50 17% 7%)	lifted dark	Raised dark surface
--warm-card	hsl(48 11% 9%)	dark card	Dark card surface

Not zinc-900

Mobile heroes were initially bg-zinc-900 (zinc is cool/blue). The actual brand surface is warm-black (hsl(40 11% 5%)) — slightly warm. Use bg-[hsl(40_11%_8%)] for hero cards on mobile.

Semantic Status Colors

Status	Color	Notes
paid	emerald	Invoice paid, settled
unpaid	amber	Invoice open, due
expired	rose	Past-due, overdue
paused	warm-gray	Paused project, deferred
active	copper	In-progress, current

Typography

Token	Family	Use
font-sans	Outfit Variable	Display + body (default)
font-display	DM Serif Display	Selective desktop serif accents
font-mono	system monospace	Code, numbers

Mobile font choice

Mobile uses font-sans (Outfit) for headings — NOT font-display (DM Serif Display). font-display was a pre-mortem fix; the serif read poorly at small mobile sizes.

Mobile Application Rules

• Hero cards — bg-[hsl(40_11%_8%)] warm-black background, white text, copper progress fills
• Selected pills (WeekStrip, StatusFilterPills, BottomTabs active indicator + label + icon) — copper background with warm-black text
• Hero progress bars — copper fill (bg-[hsl(31_53%_64%)])
• ProjectHealthCard “green” status dot — copper (replaces emerald default)
• Morning ritual CTA — copper-tinted background + border + eyebrow
• Form submit buttons — stay zinc-900 for accessibility contrast (copper on white doesn’t pass WCAG AA)
• BottomTabs active-pill indicator — 2px-tall copper bar above the active tab
• Sign out — text-rose-600 (the only place rose appears outside expired/error states)

Drawer & Sheet Surfaces

• Drawer body — bg-white (light theme on mobile)
• Scrim — warm scrim, NOT default zinc/black overlay
• Inputs/selects — explicit text colors needed because of the invisible-dropdown-text bug: a <select> with appearance-none + a Lucide ChevronDown overlay rendered with no visible text on iOS. Fix: explicit text-zinc-900 on the select and placeholder:text-zinc-400.

Where Tokens Live

packages/ui/src/styles/globals.css   # CSS variables on :root
packages/tailwind-config/src/preset.ts  # Tailwind preset wires tokens

Related

• mobile-native-feel — Mobile surfaces consuming the brand
• mobile-day-rituals — Day rituals using copper accents (GOAL chip)
• levandor-crm — Project overview