+The visual design (the DebateOwl style) comes from the design tokens in [`src/styles/tokens.css`](../src/styles/tokens.css): plume blue, beak gold, mint for success (always with a check mark), coral, and blue-tinted ink, with dark values on `.dark`. [`src/index.css`](../src/index.css) maps the shadcn roles and the palette families the app names directly onto them, and defines the tactile button (`.btn`, a ledge that presses down) and pressable tiles (`.tile`). Headings and buttons use Fredoka, body text Nunito, both self-hosted through Fontsource with metric-matched fallbacks. The owl's poses are hand-traced SVGs in [`src/assets/owl/`](../src/assets/owl/), one per screen that shows an owl (see the pose list in `Owl.tsx`), drawn by [`src/components/brand/Owl.tsx`](../src/components/brand/Owl.tsx) (`Owl`, `OwlAvatar`, `OwlMark`), which crossfade between poses and respect reduced motion. The theme defaults to light; Dark and System are a choice in Settings and the header.
0 commit comments