Redesign web UI to Slate theme - #15
Merged
Merged
Conversation
Replace the B1 "Concrete · Amber" look with the approved Slate direction: desaturated terracotta accent, 4px radii, 1px hairlines, Spline Sans, no uppercase, soft elevation shadows. Most of the change is a token/primitive rewrite of b1.css that restyles every screen at once. Structural work on the three handoff screens: - Design Studio: one auxiliary panel at a time — toggleable composer XOR a right selected panel XOR full-width library; +New card, auto-fill grid. - Trend Inbox: SVG sparkline macro with opacity ramp (neutral in the list, accent in the detail); calmed momentum figure; keyword-table-or-evidence. - Research Reports: render the doc from ResearchRun.structured_result (opportunity card, prose sections, keyword chips, product pills, risk callout) with markdown fallback; collapsible rail + slim strip. Out-of-handoff screens inherit the new tokens unchanged. Updates the studio test for the new nothing-selected default and adds a structured-doc test. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
1 participant
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.
Summary
Replaces the B1 "Concrete · Amber" design system with the approved Slate direction from
references/design_handoff_workshop_slate/: desaturated terracotta accent, 4px radii, 1px hairlines, Spline Sans, no uppercase, soft elevation shadows. ~80% of the change is a token/primitive rewrite ofstatic/b1.cssthat restyles every screen at once.Structural changes (the three handoff screens)
+New designcard, topbar toggle that flips to "Close composer",auto-fill minmax(220px)grid. State is client-side. Default is now nothing selected (library full width).sparkmacro with left→right opacity ramp, rendered neutral in the list, accent in the detail (the requested split); calmed momentum figure (mono 17px); keyword-openings table when data exists, else evidence list.ResearchRun.structured_result(opportunity stat card, prose sections, keyword chips, product pills, risk callout) with markdown fallback for legacy runs — no migration, no LLM change. Collapsible rail ↔ 50px slim strip, centered document + sticky TOC.Out-of-handoff screens (Etsy, Printful, Product Drafts, Analytics, Agent Runs) inherit the new tokens with no structural change.
Decisions
Built per the audit: full Studio rework, rail collapse, reports wired to real structured data, inbox keyword-table-or-evidence. Trends have no per-keyword/volume/time-series data, so the inbox keyword table, search volume, and sparkline remain honest placeholders (the code paths are ready when discovery emits that data).
Verification
make upfor a final pixel check.🤖 Generated with Claude Code