Repository navigation
DebateOwl visual restyle: tokens, fonts, tactile buttons and the owl - #228
Merged
Merged
Conversation
Ports the DebateOwl design tokens (plume blue, beak gold, mint success, coral, ink) into src/styles/tokens.css with dark values on .dark, and maps the shadcn roles onto them at AA contrast in both themes. Fredoka (headings, buttons) and Nunito (body) are self-hosted through Fontsource with metric-matched Arial fallbacks, replacing Inter. The palette families the app names directly are redrawn in brand colours. The theme defaults to light; System and Dark stay one tap away. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Transparent WebP cutouts of the owl's poses (point, idea, skeptical, surprised, celebrating) at 1x to 3x plus head-and-shoulders busts, cut from the mascot art with edge colour-to-alpha so they sit cleanly on navy. The traced head SVG becomes the app mark, favicon and install icons. Owl, OwlAvatar and OwlMark crossfade between poses and respect reduced motion. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Tactile buttons with a pressable ledge, hover lift, 3px focus ring with a gold glow, disabled and loading states; 2px fields with a plume focus glow; segmented tabs; switch with a check in the thumb; navy-scrim dialogs and sheets; toasts with tinted icons; owl empty states and loaders; owl mark in every header. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Thirty English button labels and the flow sheet's print button (in all three languages) move from Title Case to sentence case, as the DebateOwl style asks. The words are unchanged. Tests, e2e specs, verify-debatelab recipes and feature notes, docs and the recorded agentic flows that name these buttons follow. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Every bare spinner is gone: buttons show the bouncing thinking dots, and page and section waits show the owl. The tool-run panel's owl changes pose with the phase (an idea while thinking, skeptical while checking sources). The Ask coach and the Sparring opponent are the owl, with the opponent perched on the round card and pose changes between thinking and speaking. Sparring's side and pressure pickers become pressable tiles with a check badge, and Start round is the screen's one gold button. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The landing CTAs become tactile ledge buttons, the teal gradients become the owl's plume and gold glows, section headings and prices move to Fredoka, and the owl points visitors at the product preview. Home's tool rows get pressable icon tiles; the utility links become tiles. Library's empty and no-match states show the owl, and route skeletons shimmer after 300ms instead of flashing. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The 404 and the route error boundary show the surprised owl and tactile buttons. The free tools' call to action is a real button again (prose link colours had painted its label blue on blue). Generate, Attack, Brainstorm and Factoids submit buttons stay blue with thinking dots while they run. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The verdict shows the owl celebrating a win (or holding up one point to work on), a mint Winner badge with a check, and Fredoka score tiles; a loss reads in the plume tint, never red. The tour tooltip, its buttons and its scrim follow the new tokens, and History's tab track keeps its shape when it wraps on a phone. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Every mint success state carries a check (subscription badges, the speech calculator's fitting slots, the verdict), success and amber text move to their AA-strength steps, and the scorecard transcript shows the owl opponent. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Speaking clocks use tabular JetBrains Mono figures, as the style guide's timer does. The offline service-worker check now expects the header logo to be the precached owl mark. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…coloured Entrance animations added by the restyle only play with motion allowed, so reduced motion shows them still (the Sparring setup check expects no animation at all). The owl poses that offline pages show are precached with the shell. The static guide pages move from violet and cyan to the navy, plume and gold palette, in the stylesheet and its generator. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
New accounts start light now, so the ask-bubble and billing-state recipes pick System in Settings (followSystemTheme) before emulating each colour scheme. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
Important Review skippedToo many files! This PR contains 166 files, which is 16 over the limit of 150. To get a review, reduce the PR to 150 files or fewer by splitting it into smaller PRs or changing its base branch. Upgrade to a paid plan to raise the limit. This review couldn't start because sufficient usage credits or metered capacity aren't available. Add credits or update usage-based reviews in the billing tab, then retry.
 |
…themed Rendered answers set strong text and minor headings at 800, since the typography plugin's 600 now equals the body weight. Sonner's close button takes the card colours instead of its own black circle in dark mode. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Captured on design/debateowl-restyle at c9cf5dd with the local verify stack (fake provider), 10 viewports from 375 px phones to 1920 px desktop. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Ask: Options sits at the end of the General/Clarify row instead of a row of its own, so one row of controls stays above the message box. On a phone it shows its icon (the label stays its accessible name), because the Hungarian label does not fit beside both modes. Generate: the top row reads Save, Undo, then Discuss, Flowcharts and Open in Crossfire. On a phone both rows stretch into even pairs and the Export tag takes its own line. ExportToolbar gets an opt-in evenRows for this, so Attack, Brainstorm and Factoids are unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Same 10 viewports and states as the before set, captured on the local verify stack (fake provider). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Ask Options join the mode row; Generate actions in purpose order
From 640px up, a Generate toolbar row that fits on one line stays one natural, left-aligned line. A row that has to wrap is cut into lines whose button counts differ by at most one (3+2, not 4+1), and each line's buttons grow in proportion to their labels until the line is full. The Export tag keeps its own width at the start of its line. Phones keep the even pairs from #229. The split is measured, because where a row breaks depends on the language and on whether Save or "Saved to History" is showing. It stays behind the opt-in evenRows prop, so Attack, Brainstorm and Factoids are unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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>
Home points at Start debate. Generate thinks while it writes and looks surprised when the run fails. History's empty states sleep, the Library reads, and the Debate Timer title holds a stopwatch. The Sparring opponent argues, and the Ask coach gives a thumbs-up. Case Saved celebrates beside its check. The 404 and the won ballot already had the right pose. Owls beside text stay decorative. The coach and opponent avatars get alt text in English, Hungarian and Spanish. No other copy changes. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Owner
Author
|
The owls at intensity B are in draft #232, which stacks on this branch. It adds the logo plus one owl on each key screen, and every owl is now an SVG, including six newly traced poses. Before on top, after below, light on the left and dark on the right. Every pose
Home
History, empty (375 px)
Sparring opponent
All placements at five widths, plus the test results, are in #232. |
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
DebateOwl owls at intensity B: the logo plus one owl per key screen
Twelve viewports per image: phones, iPad portrait and landscape including 820x1180 and 1180x820, and desktop. EN, HU and ES, light and dark, the saved state, and the shared case page. Before is aa92de4. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…-rows Generate toolbar: balanced rows at tablet and desktop widths
This was referenced Oct 26, 2026
The owl says hello and introduces DebateOwl as the new look of DebateLab. Two more steps follow: what changed (the look, the owl guide, everything still where it was) and the slow move to the DebateOwl name. The hello takes about 3 seconds. Under reduced motion it shows its last frame and starts no timers. It opens once per browser inside the signed-in app, after the layout loads, and runs before the onboarding tour. Closing it any way (Skip, Got it, Esc, the X, the backdrop) writes debateowl_intro_seen_v1 to localStorage. There is no profile column for UI flags, so localStorage is the only store, as with the tour. Playwright (VITE_E2E) and the verify stack (VITE_LOCAL_PREVIEW) never open it. ?intro=show forces it and ?intro=skip suppresses it. The production canary seeds the flag. The owl's personal name is the empty owlName key; while it stays empty the owl says "Hi there!". Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
# Conflicts: # public/seo-pages.css # scripts/generate_seo_content.py # src/components/free-tools/ToolPageLayout.tsx # src/locales/en.json
The owl's introduction and the rename notice now share one dialog, so
nobody sees two popups. Over about 6.6 seconds the owl says its lines
into a speech bubble, one beat per pose: it introduces itself as
DebateOwl, says DebateLab has a new look, bobs over thinking dots as it
promises company while things load, and gives a thumbs-up beside the
mint check for the same tools as before. The notice ("DebateLab is
slowly becoming DebateOwl") sits under the bubble from the start.
Got it is the one way out; Esc and the backdrop still close it and
mark it seen. Skip animation jumps to the last frame without closing.
Reduced motion shows that frame at once.
The owl's name moves to OWL_NAME in src/lib/debateowl-intro.ts, a
constant rather than a locale key, since it is the same in every
language. While it is empty the owl calls itself DebateOwl.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…esign/debateowl-intro
No name has been chosen, so the owl introduces itself as DebateOwl in every language and OWL_NAME stays empty. The test for a set name uses an obvious placeholder instead of a made-up name. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
OWL_NAME is now "Ollie", still the one place the name lives. The owl introduces itself as "Hi, I'm Ollie, the DebateOwl owl!", in Spanish "¡Hola, soy Ollie, el búho de DebateOwl!" and in Hungarian "Szia, Ollie vagyok, a DebateOwl baglya!". The product name stays DebateOwl. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
test:sw drives a production build, where the one-time DebateOwl welcome opens and covered the Tools page the test clicks. It now seeds debateowl_intro_seen_v1 next to the tour flag, as the canary does. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
At 390 px the greeting left "owl!" alone on its second line. It now balances across both lines. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
One-time DebateOwl welcome with Ollie and the rename notice
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What this is
The DebateOwl visual restyle of DebateLab, built from
~/debateowl-design(decisions.md, the design system, tokens and the style guide). It changes how the app looks and moves. Every feature, route, label and string stays. The only copy change is that 31 button labels move from Title Case to sentence case, with the same words. The product is still called DebateLab everywhere; the rename is a separate PR.This is a draft. Nothing is merged or deployed, and nothing touched production Supabase.
Screenshots
Before on top, after underneath. Each row shows desktop light, desktop dark, phone light and phone dark (1440px and 390px). The images live on the
restyle-screenshotsbranch (delete it after this PR closes). The full set, 24 screens at both widths in both themes before and after, is inrestyle-screenshots/in the worktree.Landing
Home
Generate, with a result
Ask, with an answer
Sparring setup
Sparring round
Start-debate dialog
Library
More: 02-login, 52-settings, 53-timer, 05-not-found.
What changed
Tokens and type
src/styles/tokens.css, with dark values on.dark. The shadcn roles insrc/index.cssmap onto them.Components
The owl
Motion
prefers-reduced-motion. A press still shows (the ledge goes flat) but nothing travels or scales. Route skeletons shimmer and only appear after 300ms, so fast loads don't flash.Things to know
icon-512.pngwent from 29KB to 166KB and the maskable one to 120KB, both precached at install, because no PNG optimiser was available here. Run them through one before release./debatelab-pricingand the others) keep their dark layout but move from violet and cyan to navy, plume and gold.hero-visual.jpgstill shows the old UI.Verification
Ran:
npm run verify:fullat5afdcf0f. Every step passes except three e2e specs, which fail the same way on unchangedorigin/main(I checked outorigin/mainin a temporary worktree and ran them):loading-performance.spec.ts:63, wherelocator('header')matches both the app header and the page header;navigation-performance.spec.ts:344, which counts subscription reads;search-quality.spec.ts:7, which expects a "Researched sources" heading where the app renders a<summary>.Across desktop and mobile, 282 passed, 6 failed (those three, once per viewport) and 5 skipped.
home-navigation.spec.ts:90was flaky once under load and passed 3/3 in isolation.The rest of
verify:full: unit tests 651/651, collaboration 30/30, Edge Functions 470/470, build and site checks, the offline service-worker check, smoke e2e 47/47.npm run verify(the credential-free ladder with smoke e2e) at the head,c9cf5ddf, passes. The two commits after5afdcf0fchange only the verify-debatelab recipes and two CSS details: bold text in rendered answers moves to 800, and the toast close button is themed.verify-debatelab drive all(fake mode, desktop and mobile Chromium) on the local stack: 133 passed, 4 skipped, 9 failed. Eight of the failures were the ask-bubble and billing-state recipes, which assumed a new account follows the OS colour scheme; they now switch the account to System first (followSystemTheme) and pass on both viewports (ask-bubble 2/2, billing-states 14/14), including ask-bubble's AA contrast check in light and dark. The ninth, gen-export, timed out waiting for a download under load and passed 2/2 on rerun.By hand: every screen at 390 and 1440 in light and dark, the dialogs, popovers, selects and onboarding tour, a full Sparring round to the verdict, Ask with a streamed answer, and Generate running and done. Hungarian at 390px shows no clipping.
Not run:
🤖 Generated with Claude Code