refactor: warm color palette to match brand character

[ColeMurray]

Summary

Warms the grays, desaturates semantic/status colors, and unifies the palette around the brand's low-chroma, warm character anchored by #8b7355. Based on the Paper design system audit ("Colors — Refined" artboard).

Token value changes:

Token	Before	After	Notes
--muted-foreground (light)	#666666	#6b655f	Cold neutral → warm gray
--secondary-foreground (light)	#999999	#9c9690	Cold neutral → warm stone
--destructive (light)	#dc2626	#c24a3a	Blue-red → warm brick red
--destructive (dark)	#ef4444	#d4695e	Neon red → warm coral
--success (light)	#28c840	#4d9a5f	Traffic-light green → sage
--success (dark)	#28c840	#6aad7a	Muted sage for dark surfaces
--warning (light)	#d97706	#c49135	Standard amber → warm amber
--warning (dark)	#f59e0b	#d4a54a	Warm amber for dark
--info (light)	#3b82f6	#5b82a8	Electric blue → muted steel blue
--info (dark)	#60a5fa	#7a9dbd	Muted steel for dark

Chart series palette updated to use semantic tokens where possible and desaturated hardcoded colors to match the warm palette.

Test plan

• Light mode: error text is warm brick red, not cold blue-red
• Light mode: success dots/badges are sage green, not neon green
• Light mode: body text grays feel warm alongside #f8f8f6 background
• Dark mode: all semantic colors visible but not jarring on #1a1a1a
• Charts: series colors distinguishable and tonally unified
• Build passes with no regressions

Summary by CodeRabbit

• Style
  • Updated application-wide color palette with new warm and sage-toned colors, applied consistently across light and dark themes
  • Refined colors for status indicators (success, warning, error, and informational states) to improve visual clarity
  • Enhanced analytics timeseries chart color palette for improved visual distinction of data series

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

CSS design system color tokens are updated with new warm and sage-toned hex/RGBA values across all theme scopes (default, dark media query, and dark class). The analytics timeseries chart's color palette is refreshed with new hex values and a dynamic CSS variable reference.

Changes

Cohort / File(s)	Summary
Design System Color Tokens packages/web/src/app/globals.css	Updated semantic CSS custom properties (--muted-foreground, --secondary-foreground, --destructive, --success, --warning, --info, etc.) with new warm/sage/steel-toned hex and RGBA values across :root, dark media query, and .dark scope. Adjusted muted alpha levels for dark variants.
Analytics Chart Colors packages/web/src/components/analytics/timeseries-chart.tsx	Refreshed SERIES_COLORS palette with new hex color values and replaced one entry with var(--destructive) for dynamic token reference, affecting per-series stroke and gradient styling in the timeseries chart.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A palette fresh, from sage to steel,
With warmth and hues that truly heal,
The charts now glow in colors new,
While tokens dance in every hue! 🎨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: updating the color palette to warmer tones aligned with brand character, which is reflected in both the global CSS tokens and chart series colors.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch design-system/color-refinement

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Terraform Validation Results

Step	Status
Format	✅
Init	✅
Validate	✅

Note: Terraform plan was skipped because secrets are not configured. This is expected for external contributors. See docs/GETTING_STARTED.md for setup instructions.

Pushed by: @ColeMurray, Action: pull_request

[open-inspect]

Summary

PR Title and number: refactor: warm color palette to match brand character (#517)
Author: @ColeMurray
Files changed: 2, additions/deletions: +49/-49

This PR refines the web palette toward warmer, lower-chroma tones and updates the analytics timeseries fallback colors to match. The direction is good, but two token changes introduce accessibility regressions in existing UI, so I am requesting changes.

Critical Issues

• [Functionality & Correctness] packages/web/src/app/globals.css:55 - --secondary-foreground now falls to roughly 2.75:1 on the light background and 3.03:1 on the dark background. This token is already used for normal UI labels, timestamps, chips, and disclosure icons, so the change makes routine secondary text harder to read and below WCAG AA.
• [Functionality & Correctness] packages/web/src/app/globals.css:177 - Dark-mode --destructive changed to #d4695e while --destructive-foreground remains white, leaving that pair at about 3.5:1 contrast. Existing buttons already use this exact token pair, so button text regresses immediately in dark mode.

Suggestions

• [Code Quality] packages/web/src/app/globals.css:135 - Potential concern to verify: the new --warning and --info fills are also below AA against the unchanged white foreground tokens. I did not find a current diff usage that blocks this PR the same way as --destructive, but it would be worth auditing the remaining semantic *-foreground pairings while adjusting the palette.

Nitpicks

• Nit: None.

Positive Feedback

• The semantic-token-first approach in globals.css keeps the palette centralized and makes brand refinement straightforward.
• Reusing semantic tokens in timeseries-chart.tsx for the first series colors is a maintainable improvement over hardcoded values.
• The chart fallback colors stay tonally consistent with the new brand direction without changing component logic.

Questions

• None.

Verdict

Request Changes: the palette update is headed in a good direction, but the current token values create blocking contrast regressions in existing UI.