fix(ui): load Satoshi from a CDN that actually serves it

[hyperb1iss]

The app's index.html asks Bunny Fonts for Satoshi, JetBrains Mono, and Sora in one request. Bunny does not carry Satoshi: the CSS it returns has @font-face rules for the other two and nothing for Satoshi, so every --font-sans and --font-display stack has fallen through to Inter (where installed) or the system sans since the fonts were introduced. The design system describes Satoshi as the interface typeface; the shipped app has never rendered in it.

💡 What changes

Satoshi now loads from Fontshare, the foundry's own CDN and the only one that serves it, as its variable face (weight axis 300 to 900, upright and italic). The variable face matters: static Satoshi has no 600 cut, and the app uses font-semibold on dozens of Satoshi-rendered elements, so a static request would have pushed all of them to 700 the moment the face started loading. JetBrains Mono and Sora stay on Bunny. Both Fontshare origins get a preconnect, since the stylesheet and the files live on different hosts and the CSS is on the critical path. The Tauri CSP gains https://api.fontshare.com under style-src and https://cdn.fontshare.com under font-src, and the packaging test asserts the new allowlist. The Zola docs template and the docs theme page make the same swap so the docs site matches the app. The design system's typography section now names the two sources, records why, and notes that every weight the scale asks for renders as a true instance.

🧪 Validation

• cargo test -p hypercolor-app --test packaging_tests: 53 passed with the widened CSP expectations on both the base and macOS configs (run locally against a placeholder UI dist, the same way CI does).
• cargo fmt --check clean on the test edit.
• Fontshare's satoshi@1,2 request returns exactly two @font-face rules (upright and italic, font-weight: 300 900), every source on cdn.fontshare.com; Bunny returns zero rules for family=satoshi. The downloaded file carries a wght axis 300 to 900 (checked with fontTools).
• Independent fresh-context review passed the CSP syntax, the origin coverage, and the doc consistency; its two notes (warm the stylesheet origin, the 600 weight fallout) are what the second commit addresses.
• Not exercised here: a rebuilt Tauri bundle loading the face under the new CSP in a live WebView. The site repo's companion PR (hyperb1iss/hypercolor.lighting#77) self-hosts the same variable file and its dev server renders it, which covers the face itself but not the Tauri CSP path.

🤖 Generated with Claude Code

https://claude.ai/code/session_017QqD4e2C7kLCBtZBEfJyTx

[coderabbitai]

Warning

Review limit reached

• Run on-demand review

_{On-demand reviews are free for the next 5 days. After that, they cost $0.25 per reviewed file.}

Or wait 43 minutes for your next included review.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 5532f2b2-6076-446f-89fe-f50a10b1b13c

📥 Commits

Reviewing files that changed from the base of the PR and between 187a28a and fc3d94d.

📒 Files selected for processing (7)

• crates/hypercolor-app/tauri.conf.json
• crates/hypercolor-app/tauri.macos.conf.json
• crates/hypercolor-app/tests/packaging_tests.rs
• crates/hypercolor-ui/index.html
• docs/DESIGN-SYSTEM.md
• docs/content/theme/_index.md
• docs/templates/base.html

---

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