Halcyon — Premium Focus / Productivity App Landing Page Template (HTML + Tailwind)

Halcyon is a premium one-page landing template for a focus, meditation or calm-productivity app — the kind of product that has to feel calm and trustworthy before anyone installs it. Warm paper background, one confident coral accent, pressable "sticker" tiles with hard offset shadows: a tactile, physical-software look you won't find in the usual gradient-SaaS pack.

Built with static HTML + Tailwind CSS v4. No React, no Vue, no build step — the compiled CSS ships in the package, so you open index.html and you're live on GitHub Pages, Netlify, Vercel, Cloudflare or your own server.

NO IMAGE ASSETS — AND THAT'S THE POINT

The phone mockup, the in-app screens (focus timer, session-complete, weekly stats, streak grid, settings), the App Store / Google Play badges and the QR code are all drawn in pure CSS/SVG. Nothing to license, nothing to compress, nothing that breaks when you rebrand — and the whole template still weighs almost nothing.

WHAT'S INSIDE (11 sections)

• Sticky nav + accessible mobile menu

• Hero with a live CSS phone + animated focus ring

• "Featured in" social-proof strip

• Feature trio of tactile, pressable tiles

• Signature feature spotlight with a live app screen

• Three-step "how it works" (no streak pressure)

• Scroll-snap screenshots gallery

• Animated KPI metrics with count-up numbers

• Testimonials with initials-avatar tiles (no stock photos)

• Honest Free / Pro pricing

• FAQ accordion + final CTA (CSS store badges + QR) + full footer

WHY IT'S DIFFERENT

• Token-driven — edit ONE @theme block in src/input.css and the whole page re-skins

• Calm by design — no FOMO timers, no fake countdowns, no dark patterns

• Fully responsive, mobile-first, fluid type — no horizontal scroll on any device

• WCAG AA contrast, semantic HTML, visible focus states

• Self-hosted fonts (Bricolage Grotesque + Hanken Grotesk, woff2) — no Google CDN, no layout shift

• Lighthouse: Performance 98 · Accessibility 100 · Best-Practices 100 · SEO 100

WHAT YOU GET

index.html · compiled + source Tailwind CSS · a few KB of vanilla JS · self-hosted fonts · favicon · full documentation · changelog · license notes.

Live demo (free Lite version): https://mcmxcixx.github.io/halcyon-app/