Skip to content

Latest commit

 

History

History
43 lines (35 loc) · 1.54 KB

File metadata and controls

43 lines (35 loc) · 1.54 KB

WhisperWoof Design System

Brand

Name: WhisperWoof. Named after: Mando (shepherd/dingo mix). Aesthetic: Industrial Warmth — dark, dense, confident, with organic warmth.

Colors (sampled from Mando's fur)

Token Value Source
Background #0E0C0A Nose shadow
Surface #1A1714 Dark coat
Surface 2 #221E1A Lifted
Border #2E2923 Dark ear fur
Text #E8DDD0 Chest cream
Text secondary #A69888 Muted tan
Text muted #736858 Fur shadow
Accent #A06A3C Main coat
Accent hover #B8863C Eye amber
Success #5C8A4C Forest green
Error #B84C3C Warm red

Fur reference: Dark #5C3A1E, Coat #A06A3C, Inner ear #C4956A, Cream #E8D5C4, White #F0E4D4

Typography

Geist (Vercel). Geist Mono for timestamps/code. Scale: 11px xs, 13px sm, 15px base, 17px lg, 20px xl.

Spacing

4px base. Compact density.

Floating Indicator

Soundbar (180px wide) with Mando's actual traced ear SVGs.

  • Idle: ears tilted 6° outward, static dots, dimmed
  • Speaking: ears flop ±3° (CSS animation), waveform active, red dot pulses
  • Processing: ears straight, amber bars pulse slowly

Principles

  1. Warm amber accent is the only brand color. Everything else is neutral.
  2. The ears are the brand. No other productivity tool has this.
  3. Dark mode primary. Light mode supported but not prioritized.
  4. Compact density — power users want information, not whitespace.
  5. Motion is minimal except for the ears (the one playful element).