Use the solid blue in light mode and fix the self-referencing font variable

[next-devin]

Requested by Devin · project thread

Before: in light mode, links, active nav items and filled buttons use #3c7dff, which is 3.77:1 on white and fails WCAG AA. :root also sets --font-sans: var(--font-sans). That declaration refers to itself, so it is invalid and competes with the Inter variable that next/font puts on <html>.

After: light mode uses the solid blue #3366fc (4.72:1), and dark mode keeps #3c7dff. Inter is registered as --font-inter and --font-sans points at it, the same way the docs repo wires it.

This follows the org token contract in NextCommerceCo/design-system#2. The 1760px layout and 370px sidebar are left as they are.

How: app/globals.css changes the :root primary and the font line. app/layout.tsx renames the next/font variable.

🤖 Generated with Claude Code

https://claude.ai/code/session_01DfUoyGsC1hrfa8v6VHhD3h

---

Generated by Claude Code

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	developer-docs	c2dce0e	Commit Preview URL Branch Preview URL	Sep 29 2026, 08:15 AM

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (3 files)

• app/globals.css - new --color-fd-primary-solid (#3366fc) and --color-fd-primary-solid-hover (#2a5bd7) tokens added in :root only; intentionally same value in light and dark so filled controls keep AA contrast on white. Comment on lines 10-12 accurately documents the rationale.
• app/page.tsx (3 occurrences at lines 265, 310, 369) - bg-fd-primary text-fd-primary-foreground hover:opacity-90 replaced with bg-(--color-fd-primary-solid) text-white hover:bg-(--color-fd-primary-solid-hover). White on #3366fc is 4.72:1 (AA pass); #2a5bd7 is darker so hover contrast is higher.
• components/ui/button.tsx line 5 - same primary-variant class swap as app/page.tsx. text-white and the previous text-fd-primary-foreground are both #ffffff, so this is a no-op for color; the substantive change is the background binding to the new solid token.

Previous Review Summary (commit 9a7cc55)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit 9a7cc55)

Status: No Issues Found | Recommendation: Merge

Files Reviewed (2 files)

• app/globals.css - color contrast change from #3c7dff (3.77:1, fails WCAG AA on white) to #3366fc (4.72:1, AA pass) verified against WCAG luminance math; comment on lines 10-11 is accurate.
• app/layout.tsx - Inter next/font variable renamed from --font-sans to --font-inter, correctly matching the new var(--font-inter) reference in :root. <html className> continues to receive inter.variable, so the cascade resolves at :root.

---

_{Reviewed by minimax-m3 · Input: 0 · Output: 0 · Cached: 0}