Skip to content

Commit 67628a8

Browse files
Programcodeclaude
andcommitted
Owls are traced SVGs: six new poses, WebP cutouts gone
The five existing poses come from the c-trace set and six new ones are hand-traced in the same style: thinking, reading, timekeeper, arguing, coach and sleepy. Each file is 13 to 21 kB and replaces the 26 glossy WebP cutouts. The avatar crops the full pose with CSS instead of shipping separate bust files. The offline precache picks up the poses that the offline pages show. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
1 parent aa92de4 commit 67628a8

35 files changed

Lines changed: 317 additions & 59 deletions

‎docs/architecture.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ Collaborative Workspace (`/app/workspaces/*`, the `workspace-invites` function,
2525

2626
Styles are Tailwind CSS 4, configured in [`src/index.css`](../src/index.css) (`@theme`, `@custom-variant`, `@utility`) and built by `@tailwindcss/vite`; there is no `tailwind.config`. Tailwind 4 needs Safari 16.4, Chrome 111 or Firefox 128. Older browsers lose cascade layers, and translucent colours such as `bg-primary/10` render solid where `color-mix()` is missing.
2727

28-
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 transparent WebP cutouts in [`src/assets/owl/`](../src/assets/owl/), 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.
28+
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.
2929

3030
## Workspace layout
3131

‎src/assets/owl/owl-arguing.svg‎

Lines changed: 26 additions & 0 deletions
Loading
-12.2 KB
Binary file not shown.
-26.7 KB
Binary file not shown.
-39.5 KB
Binary file not shown.

‎src/assets/owl/owl-celebrating.svg‎

Lines changed: 26 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)