Summary
The current site is a conventional stacked-layout marketing page with a sticky header, minimal motion, and a partially-tokenized color system. Content is stable and simple; presentation has plateaued. With a new app version on the horizon, this is the moment for a radical visual reset.
The overhaul has two goals that land together:
- Replace the stacked layout with a data-native experience — the website should feel like the product it's selling.
- Tokenize the color system so the palette becomes a single source of truth and themes become swappable.
Two candidate design directions are outlined below. Both preserve all current content. Both are dashboard / data-native in mood. They differ in how the data tells the story: one is explored, the other is unfolded.
Content to preserve (non-negotiable)
Both paths must carry forward:
- App Store link —
apps.apple.com/ca/app/trendfit/id6751863796
- Primary positioning — "Privacy-first fitness analytics, all processing on-device, free, no ads, no tracking."
- Five feature pillars — TrendFit · TrendFitStack · Zoomable Charts · Privacy-First by Design · Personalization
- Four app screenshots —
tf-welcome.png, tf-trendfit.png, tf-stack-scatter.png, tf-stack-stacked.png
- Both preview videos —
app-preview.mp4, App_Store_Promo.mp4
- Social links — Instagram, Facebook, X, LinkedIn, YouTube (all @trendfitapp)
- Contact —
trendfitapp@gmail.com
- Legal pages — privacy.html, terms.html (JSON-driven, untouched)
- Announcements feed —
data/announcements.json pipeline untouched
- 404 redirect map for legacy URLs (
/privacy-policy, /terms-of-service)
New emphasis on benefits over features: each feature card should lead with an outcome ("See whether you're actually improving" → TrendFit with slopes) rather than a label.
Cross-cutting work (applies to both paths)
These land before or alongside the chosen path.
1. Color-system tokenization
Refactor css/style.css so all color usage flows through CSS custom properties. Today the variables in :root cover only part of the system; the warm-cream panel family (#FFF3E3, #FFC888, #FFEAD1, #FFB85E), the home-page blue gradient (#2dbaf7, #0a5db3), the badge red (#e11900), and a legacy social blue (#007bff) are hardcoded in ~a dozen places.
Proposed token layers:
- Primitives — raw palette (e.g.
--color-orange-500: #FF8C00)
- Semantic tokens — purpose-bound (e.g.
--surface-warm, --surface-card, --border-accent, --text-muted, --accent-action, --trend-positive, --trend-negative, --trend-neutral)
- Theme variants — at least two palettes swappable via
[data-theme="..."] on <html>:
theme-dawn (current orange/cream identity)theme-dark (matching iOS app dark mode)- (stretch)
theme-trail, theme-ocean, or theme-lab as an alternate feel for marketing moments
Dark mode follows naturally from this refactor (prefers-color-scheme: dark media query maps to theme-dark tokens).
2. Housekeeping
- Delete ghost CSS for removed pages (
.signup, .forum, #signupFrame — ~80 lines)
- Fold
css/announcements.css into style.css (near-duplicate of existing rules)
- Compress
images/og-default.png (~6 MB → target <300 KB) and images/tf-welcome.png (~2 MB → target <400 KB)
- Drop
media/App_Store_Promo.mp4 in favor of App_Store_Promo-V1.2.mp4 (12 MB → 413 KB)
- Add
<meta name="theme-color"> driven by active theme token
3. Motion foundation
Adopt Motion One (~3 KB, CDN) for choreographed animation. Vanilla where trivial (CSS transitions, Intersection Observer). No build step. Respect prefers-reduced-motion globally — motion is decorative, not required for comprehension.
Path A — "Living Dashboard Home"
The landing page is a dashboard. The visitor's first interaction is with data, not copy.
Concept. Replace the two-column hero/video card with a grid of interactive metric tiles rendered with live-looking sample charts. Each tile represents one feature pillar and shows a miniature version of what the app does. Hovering/tapping a tile expands it in place with benefit copy, a supporting screenshot, and a "See in app" CTA. The nav bar retreats to a floating minimal pill. No traditional hero section — the dashboard is the hero.
Layout sketch (desktop):
┌─────────────────────────────────────────────────────┐
│ [TrendFit] [Features][Dl][…] │ ← floating pill nav
│ │
│ ┌──────────────┬──────────────┬──────────────┐ │
│ │ Heart rate │ Pace │ Cadence │ │
│ │ ╱╲_╱╲ +3% │ ╲___╱╲ -1% │ ╱‾‾╲ flat │ │
│ │ Last 30 d │ Last 30 d │ Last 30 d │ │
│ ├──────────────┴──────────────┼──────────────┤ │
│ │ Privacy-first │ Stacked │ │
│ │ ✓ On-device │ totals │ │
│ │ ✓ No upload │ ▂▄▆█▇▅ │ │
│ └─────────────────────────────┴──────────────┘ │
│ │
│ [ Download on the App Store ] [ See all features ]│
└─────────────────────────────────────────────────────┘
Tiles animate subtly on load (chart paths drawing in, numbers counting up). Hover lifts the tile, draws in more detail, darkens neighbors. Click/tap expands the tile in a morphing View Transition to a detail overlay.
Feature/benefit reframing inside tiles:
| Current label |
New benefit-led framing |
| TrendFit |
"See whether you're actually improving" |
| TrendFitStack |
"Compare your week to your year — at a glance" |
| Zoomable charts |
"Zoom into one bad day, pan through a whole season" |
| Privacy-first |
"Your data never leaves your phone" |
| Personalization |
"Units, windows, haptics — tuned to you" |
Tech approach.
- Charts as inline SVG (hand-authored paths with real-looking sample data — no runtime chart lib needed). Path
stroke-dasharray draw-in animation on viewport entry.
- Tiles: CSS Grid with
grid-template-areas, Motion One for hover/focus/expand choreography.
- Tile expansion uses the View Transitions API (well-supported in Chromium; graceful fallback = simple opacity/scale in Safari/Firefox).
- Floating nav: IntersectionObserver hides/shows based on scroll direction.
Features/detail pages. Features page keeps a more traditional structure (screenshots + copy + FAQ) but inherits new tokens and typography. Announcements/Privacy/Terms mostly untouched — new tokens only.
Pros
- Most on-brand: the site looks like what it's selling.
- Visitors get an immediate, tangible sense of the product.
- Static-friendly — no scroll choreography to debug on mobile.
- Highest re-use of existing content; low risk of losing information density.
Cons
- Requires hand-authored sample SVG charts (real design work, not just CSS).
- Density can feel busy on small screens — needs a carefully collapsed mobile layout.
- Less "cinematic" — the wow factor is quiet, not loud.
Est. scope. ~2–3 weekends: tokens + sample-chart SVGs + tile grid + expand transition + Features-page retheme.
Path B — "Scroll-Cinema: One Chart, One Story"
A single chart on the page morphs as you scroll, demonstrating each feature in turn.
Concept. The landing page is a vertically-pinned canvas where one hero chart occupies the center of the viewport and transforms its shape, data, overlay, and annotations as the visitor scrolls. Each scroll segment reveals one feature pillar, with benefit copy animating in from the side. The chart never leaves the screen — it's the constant narrator. After the feature reveal, the page releases into a conventional download/CTA/footer flow.
Scroll choreography (top → bottom):
Segment 1 — Hero
• Chart: empty axes fade in. Title types out: "Track. Analyze. Improve."
Segment 2 — TrendFit
• A line animates onto the chart. Slope indicator appears. Copy: "See whether
you're actually improving — a slope you can trust."
Segment 3 — TrendFitStack
• Line fades, stacked bars rise from the axis. Copy: "Compare your week to
your year — at a glance."
Segment 4 — Zoom & pan
• Viewport on the chart narrows (zoom in), then pans. Copy: "Zoom into one
bad day, pan through a whole season."
Segment 5 — Privacy
• Chart dims. A "stays on device" seal fades in. Copy: "Your data never leaves
your phone."
Segment 6 — Personalization
• Chart redraws in an alternate palette + different units, showing tokens in
action. Copy: "Units, windows, haptics — tuned to you."
Release
• Pin releases. Download CTA. Screenshots gallery. FAQ. Footer.
Tech approach.
- Single inline SVG chart as the subject. Motion One + ScrollTimeline (CSS Scroll-Driven Animations) drive transforms against scroll position.
- IntersectionObserver triggers copy fade-in per segment.
position: sticky on the chart container; scroll segments are tall enough to give each reveal room.- Fallback for browsers without Scroll-Driven Animations: scroll listener +
requestAnimationFrame (Motion One handles this cleanly).
- Mobile: scroll-driven still works, but segments collapse to a shorter reel and Respect-Reduced-Motion plays a static gallery instead.
Features/detail pages. Features page becomes a horizontal scroll-snap carousel of feature cards (one screen per pillar), matching the cinematic feel. Privacy/Terms inherit tokens only.
Pros
- Highest wow factor — immediately communicates "this product is about trends."
- Feature copy is delivered in rhythm with motion, which improves message retention.
- One shared chart metaphor unifies the whole page.
Cons
- Scroll choreography is harder to design, tune, and test — especially cross-browser and on mobile.
- Pinned sections require the visitor to scroll through the narrative in order — bad for scanners.
- Higher risk of jank on older devices; reduced-motion path must be genuinely good, not a fallback afterthought.
- More motion == more maintenance if content changes later.
Est. scope. ~4–5 weekends: tokens + chart morph choreography + scroll-timeline tuning + horizontal carousel for Features + reduced-motion fallback + cross-device testing.
Recommendation
Path A (Living Dashboard Home) is the lower-risk, higher-durability bet. It's the most on-brand — a data-analytics app whose marketing site is itself a dashboard makes an argument you can't undo. It's also static-friendly, content-scalable, and aligns cleanly with a token refactor.
Path B (Scroll-Cinema) is the higher-ceiling, higher-maintenance bet. It's the right choice if the goal is a launch-moment spectacle tied to the new version — and then stabilize afterward.
A hybrid is viable: ship Path A as the durable home, and build one Path B-style pinned scroll section on a dedicated "How it works" page for the app-version launch moment.
Open questions for decision
Summary
The current site is a conventional stacked-layout marketing page with a sticky header, minimal motion, and a partially-tokenized color system. Content is stable and simple; presentation has plateaued. With a new app version on the horizon, this is the moment for a radical visual reset.
The overhaul has two goals that land together:
Two candidate design directions are outlined below. Both preserve all current content. Both are dashboard / data-native in mood. They differ in how the data tells the story: one is explored, the other is unfolded.
Content to preserve (non-negotiable)
Both paths must carry forward:
apps.apple.com/ca/app/trendfit/id6751863796tf-welcome.png,tf-trendfit.png,tf-stack-scatter.png,tf-stack-stacked.pngapp-preview.mp4,App_Store_Promo.mp4trendfitapp@gmail.comdata/announcements.jsonpipeline untouched/privacy-policy,/terms-of-service)New emphasis on benefits over features: each feature card should lead with an outcome ("See whether you're actually improving" → TrendFit with slopes) rather than a label.
Cross-cutting work (applies to both paths)
These land before or alongside the chosen path.
1. Color-system tokenization
Refactor
css/style.cssso all color usage flows through CSS custom properties. Today the variables in:rootcover only part of the system; the warm-cream panel family (#FFF3E3,#FFC888,#FFEAD1,#FFB85E), the home-page blue gradient (#2dbaf7,#0a5db3), the badge red (#e11900), and a legacy social blue (#007bff) are hardcoded in ~a dozen places.Proposed token layers:
--color-orange-500: #FF8C00)--surface-warm,--surface-card,--border-accent,--text-muted,--accent-action,--trend-positive,--trend-negative,--trend-neutral)[data-theme="..."]on<html>:theme-dawn(current orange/cream identity)theme-dark(matching iOS app dark mode)theme-trail,theme-ocean, ortheme-labas an alternate feel for marketing momentsDark mode follows naturally from this refactor (
prefers-color-scheme: darkmedia query maps totheme-darktokens).2. Housekeeping
.signup,.forum,#signupFrame— ~80 lines)css/announcements.cssintostyle.css(near-duplicate of existing rules)images/og-default.png(~6 MB → target <300 KB) andimages/tf-welcome.png(~2 MB → target <400 KB)media/App_Store_Promo.mp4in favor ofApp_Store_Promo-V1.2.mp4(12 MB → 413 KB)<meta name="theme-color">driven by active theme token3. Motion foundation
Adopt Motion One (~3 KB, CDN) for choreographed animation. Vanilla where trivial (CSS transitions, Intersection Observer). No build step. Respect
prefers-reduced-motionglobally — motion is decorative, not required for comprehension.Path A — "Living Dashboard Home"
Concept. Replace the two-column hero/video card with a grid of interactive metric tiles rendered with live-looking sample charts. Each tile represents one feature pillar and shows a miniature version of what the app does. Hovering/tapping a tile expands it in place with benefit copy, a supporting screenshot, and a "See in app" CTA. The nav bar retreats to a floating minimal pill. No traditional hero section — the dashboard is the hero.
Layout sketch (desktop):
Tiles animate subtly on load (chart paths drawing in, numbers counting up). Hover lifts the tile, draws in more detail, darkens neighbors. Click/tap expands the tile in a morphing View Transition to a detail overlay.
Feature/benefit reframing inside tiles:
Tech approach.
stroke-dasharraydraw-in animation on viewport entry.grid-template-areas, Motion One for hover/focus/expand choreography.Features/detail pages. Features page keeps a more traditional structure (screenshots + copy + FAQ) but inherits new tokens and typography. Announcements/Privacy/Terms mostly untouched — new tokens only.
Pros
Cons
Est. scope. ~2–3 weekends: tokens + sample-chart SVGs + tile grid + expand transition + Features-page retheme.
Path B — "Scroll-Cinema: One Chart, One Story"
Concept. The landing page is a vertically-pinned canvas where one hero chart occupies the center of the viewport and transforms its shape, data, overlay, and annotations as the visitor scrolls. Each scroll segment reveals one feature pillar, with benefit copy animating in from the side. The chart never leaves the screen — it's the constant narrator. After the feature reveal, the page releases into a conventional download/CTA/footer flow.
Scroll choreography (top → bottom):
Tech approach.
position: stickyon the chart container; scroll segments are tall enough to give each reveal room.requestAnimationFrame(Motion One handles this cleanly).Features/detail pages. Features page becomes a horizontal scroll-snap carousel of feature cards (one screen per pillar), matching the cinematic feel. Privacy/Terms inherit tokens only.
Pros
Cons
Est. scope. ~4–5 weekends: tokens + chart morph choreography + scroll-timeline tuning + horizontal carousel for Features + reduced-motion fallback + cross-device testing.
Recommendation
Path A (Living Dashboard Home) is the lower-risk, higher-durability bet. It's the most on-brand — a data-analytics app whose marketing site is itself a dashboard makes an argument you can't undo. It's also static-friendly, content-scalable, and aligns cleanly with a token refactor.
Path B (Scroll-Cinema) is the higher-ceiling, higher-maintenance bet. It's the right choice if the goal is a launch-moment spectacle tied to the new version — and then stabilize afterward.
A hybrid is viable: ship Path A as the durable home, and build one Path B-style pinned scroll section on a dedicated "How it works" page for the app-version launch moment.
Open questions for decision
dawn+darkminimum; any others?)