Skip to content

Quiet Fusion redesign: warm palette, signal green, flat panes across all pages#18

Open
mps wants to merge 2 commits into
masterfrom
claude/website-redesign-hllehj
Open

Quiet Fusion redesign: warm palette, signal green, flat panes across all pages#18
mps wants to merge 2 commits into
masterfrom
claude/website-redesign-hllehj

Conversation

@mps

@mps mps commented Jul 2, 2026

Copy link
Copy Markdown
Member

Summary

Implements the Quiet Fusion brand direction (documented on /design) across the entire site — 54 source files, +1,061 / −1,722 lines, all 98 built pages verified.

Design system (src/styles/global.css)

  • Warm canvas palette — #f7f5ef canvas, #11110f ink, #77736b ash, #dedbd2 rules — with a matching warm dark theme
  • One ownable signal green (#247866) replaces the borrowed Telegram blue everywhere
  • Work Sans becomes the single workhorse type family; Crimson Pro is reserved for testimonial quotes only
  • Flat panes separated by rules and space: no card shadows, no hover lifts/rotations, near-invisible motion, prefers-reduced-motion respected

Structure

  • One responsive quiet hero with a prompt bar replaces the decorated desktop hero + separate MobileHero (deleted)
  • Homepage featured case studies become dense proof rows (industry / project / shipped result)
  • Grid textures and gradient decorations removed from agency surfaces; dark bands are plain #171717 night
  • All shared components (cards, steps, testimonials, FAQ, team, footer, theme toggle) flattened to the new language

Site-wide sweep

  • Remapped both legacy neutral families (cool slate on app pages, stone in old fallbacks) and all blue accents to warm equivalents across ~90 pages, preserving each app's own product identity
  • Fixed bugs surfaced during visual verification: invisible dark-on-dark CTA buttons on all five work pages, illegible featured-app title on /apps in dark mode (latent pre-existing bug), unreadable currency hero text, and a raw · entity rendering as text on the newest app pages

Verification

  • npm run build — 98 pages, clean
  • Full-page renders of every distinct page in light mode at desktop (1280px) and mobile (390px) widths — appended below; key pages additionally spot-checked in dark mode
  • Renders live in docs/redesign-renders/ (one commit, ~1.6 MB) and are safe to drop before/after merge — the images below are pinned to the commit SHA

Page renders

Core pages (9)
Page Desktop (1280px) Mobile (390px)
Home
Apps
Currency app family
Contact
Open Source
HealthKit Run Generator <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/healthkit-run-generator--desktop.jpg" width="440"> <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/healthkit-run-generator--mobile.jpg" width="150">
404
Design direction
Showcase (internal)
Work case studies (5)
Page Desktop (1280px) Mobile (390px)
Golf Channel Mobile <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/work-golf-channel--desktop.jpg" width="440"> <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/work-golf-channel--mobile.jpg" width="150">
Golf Channel Academy <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/work-golf-channel-academy--desktop.jpg" width="440"> <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/work-golf-channel-academy--mobile.jpg" width="150">
Everybody Everywhere <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/work-everybody-everywhere--desktop.jpg" width="440"> <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/work-everybody-everywhere--mobile.jpg" width="150">
Easy Digital Downloads <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/work-easy-digital-downloads--desktop.jpg" width="440"> <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/work-easy-digital-downloads--mobile.jpg" width="150">
Radio Disney <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/work-radio-disney--desktop.jpg" width="440"> <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/work-radio-disney--mobile.jpg" width="150">
App landing pages (27)
Page Desktop (1280px) Mobile (390px)
Breathe Easy <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-breathe-easy--desktop.jpg" width="440"> <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-breathe-easy--mobile.jpg" width="150">
Caffeine Easy <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-caffeine-easy--desktop.jpg" width="440"> <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-caffeine-easy--mobile.jpg" width="150">
Check Yourself <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-check-yourself--desktop.jpg" width="440"> <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-check-yourself--mobile.jpg" width="150">
Contrast
Count Easy <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-count-easy--desktop.jpg" width="440">
Cycle Easy <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-cycle-easy--desktop.jpg" width="440">
Decibel
Dose Easy
Fast Easy
Focus Easy <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-focus-easy--desktop.jpg" width="440">
Hydrate
Macro Easy <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-macro-easy--desktop.jpg" width="440">
Meds Easy
Mood Easy
Pomo Easy
Pressure Easy <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-pressure-easy--desktop.jpg" width="440"> <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-pressure-easy--mobile.jpg" width="150">
Rest Easy
Run Easy
Set Easy
Spend Easy <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-spend-easy--desktop.jpg" width="440">
Split Easy <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-split-easy--desktop.jpg" width="440">
Stretch Easy <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-stretch-easy--desktop.jpg" width="440"> <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-stretch-easy--mobile.jpg" width="150">
Temp Easy
Track Easy <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-track-easy--desktop.jpg" width="440">
Tune Easy
Voice Easy <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-voice-easy--desktop.jpg" width="440">
Weigh Easy <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-weigh-easy--desktop.jpg" width="440">
App privacy/support templates (sample)
Page Desktop (1280px) Mobile (390px)
Privacy policy (template) <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-privacy-sample--desktop.jpg" width="440"> <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-privacy-sample--mobile.jpg" width="150">
Support (template) <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-support-sample--desktop.jpg" width="440"> <img src="https://raw.githubusercontent.com/idlefusion/idlefusion.github.com/5ebaf4242a3d320aba9c47967e9491f4cfb8960a/docs/redesign-renders/app-support-sample--mobile.jpg" width="150">

🤖 Generated with Claude Code

https://claude.ai/code/session_01KZ4T4ttNvVFzaxAr9hzY4m

Generated by Claude Code

claude added 2 commits July 2, 2026 17:42
@claude
Implement Quiet Fusion redesign across all pages
c9588a8 
Apply the brand direction documented on /design site-wide:

- Rewrite the design system in global.css: warm canvas palette
  (#f7f5ef / #11110f / #77736b / #dedbd2), one green signal color
  (#247866) replacing the Telegram blue, matching warm dark theme,
  Work Sans-led typography with Crimson Pro reserved for quotes,
  flat panes with rules instead of shadows, near-invisible motion.
- Replace the decorated desktop/mobile dual hero with a single
  responsive quiet hero featuring a prompt bar; delete MobileHero.
- Convert homepage featured case studies to evidence proof rows;
  remove grid textures, hover lifts/rotations, and gradient accents.
- Restyle shared components (cards, steps, testimonials, FAQ, team,
  footer, theme toggle) to the flat language.
- Remap slate/stone/blue neutrals to warm equivalents across all
  app, work, and utility pages while preserving per-app accents.
- Fix dark-mode contrast bugs surfaced on fixed-dark bands (work CTA
  buttons, apps hero title, currency hero) and a raw &middot; entity
  in SimpleAppLanding.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KZ4T4ttNvVFzaxAr9hzY4m
@claude
Add redesign page renders (desktop + mobile) for PR review
5ebaf42 
Full-page screenshots of every distinct page in both viewports,
referenced from the pull request body. Safe to delete after review.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KZ4T4ttNvVFzaxAr9hzY4m
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jul 2, 2026 •
edited
Loading

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

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

Status Name Latest Commit Updated (UTC)
✅ Deployment successful!
View logs		 idlefusion-website 5ebaf42 Jul 02 2026, 07:46 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@mps @claude