Redesign add-in UX around the Thoughtful brand#457
Draft
kcarnold wants to merge 2 commits into
Draft
Conversation
A cohesive ink-on-paper design system for the Word sidebar, drawn from the lab's identity (thoughtful-ai.com): warm paper surfaces, ink text, a fountain-pen indigo accent, and Source Serif 4 for the wordmark and display moments. - Add src/theme.css as the single source of design tokens; remove the three conflicting per-page :root palettes (each page had a different accent blue) - Self-host DM Sans, DM Mono, and Source Serif 4 via @fontsource so the fonts referenced by the CSS actually load (they were never loaded before), including inside Word's webview with no CDN dependency - Navbar: branded header with serif wordmark + segmented tab control with icons; hints move to tooltips - Draft: replace the "CLICK A DESIRED BUTTON" instruction with a quiet section label; fix the active-card class that never applied (raw 'active' string vs CSS-module class); replace JS hover-opacity hacks with CSS; friendlier empty state and disclaimer copy - Chat: fix invisible typing-indicator dots and disabled send button (both were white-on-white); serif welcome title; indigo user bubbles - Revise: consume shared tokens, accent run button, remove dead tab styles (including a white-on-white hover) - Onboarding: brand-voice copy, paper background, serif titles - Login/loading/footer screens restyled to match - Remove stale firefox/webkit visual snapshots (projects disabled in playwright config) and add a manually-dispatched CI job that regenerates snapshots in the pinned Playwright container and commits them back, since pixel-stable snapshots can't be rendered outside CI https://claude.ai/code/session_01Ezjo5AsauWxQgNNJ3SAAVp
The chromium baseline is regenerated for the redesigned UI (rendered locally with Chrome for Testing; if CI rasterization differs, dispatch the new update-snapshots job to re-render it in the pinned container). VISUAL_REGRESSION.md now describes the actual workflow name, the chromium-only baseline, and the snapshot regeneration job. https://claude.ai/code/session_01Ezjo5AsauWxQgNNJ3SAAVp
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
2 participants
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.
Redesign the add-in UX around the Thoughtful brand
A cohesive ink-on-paper design system for the Word sidebar (and the embedded demo editor), drawn from the lab's identity: warm paper surfaces, ink text, a single fountain-pen-indigo accent, Source Serif 4 for the wordmark and display moments, DM Sans for UI, and DM Mono for micro-labels.
What changed
Design system
frontend/src/theme.cssis the single source of design tokens. Previously each page declared its own conflicting:rootpalette — Draft, Revise, and Chat each used a different accent blue, and the winner was load-order-dependent.@fontsourceand bundled by webpack. The old CSS referenced these fonts but never loaded them anywhere, so the entire UI silently fell back to system fonts. Self-hosting also means no third-party CDN dependency inside Word's webview.Per-page
Bug fixes picked up along the way
'active'instead of the CSS-module class.onMouseEnter/onMouseLeavestyle hacks for the delete button replaced with CSS:hover; large blocks of dead styles removed.Testing
tsc --noEmit, ESLint, and all 8 Vitest unit tests pass.title/aria-label/button text was preserved.Visual regression baseline
The chromium baseline was regenerated for the new design, but it was rendered locally with Chrome for Testing, so CI's rasterization may differ at the pixel level. If the visual check fails, dispatch the new snapshot-regeneration job, which re-renders the baseline in the pinned Playwright container and commits it back to this branch:
The stale firefox/webkit baselines were removed (those Playwright projects are disabled in the config), and
VISUAL_REGRESSION.mdwas updated to describe the actual workflow.https://claude.ai/code/session_01Ezjo5AsauWxQgNNJ3SAAVp