Website design concept · 2026

Halcyon

A landing page hero for a sleep app concept, built around a nightly wind-down plan rather than a streak.

A design project: we designed these screens, and they were not built by us.

  • Design
  • Landing Page
  • Product Design
  • Health & Wellbeing
Halcyon website: screen

Overview

Halcyon is a design concept for a sleep app: the page sells a wind-down that is rebuilt each evening rather than a fixed programme. The hero splits into a copy column and a live-looking "Tonight" card, so the promise and the product sit side by side above the fold. The card shows the night as a single timeline, from the wind-down at 21:40 through to a 06:30 wake, then lists the three steps that make it up with their durations. Below the fold a three-part band answers the objections a sleep app usually attracts: the plan comes from your own nights, a missed night costs you nothing, and every step plays with the screen off.

A promise and the product, side by side

The headline sets the argument in one line, with the word that carries it set in italic: sleep is a practice, not a switch. To its right, the Tonight card shows the thing being sold, so a visitor sees both the claim and the interface without scrolling.

Reading the night as one bar

The sleep window is a single track rather than a chart: a peach segment for the wind-down, a gradient for time in bed, and ticks at 22:15 and 06:30. Underneath, three steps carry an icon, a plain description and a duration, adding up to the twenty-seven minutes the copy mentions.

Type doing two jobs

Newsreader, a serif, carries the display lines and the card headings; Figtree handles navigation, body copy and every number. Keeping the interface type separate from the editorial type lets the card feel like software while the page still reads like a brochure.

Built with

  • Figma

Design details

Colour palette

Typography: Newsreader

Headings

Large heading

Section heading

Subheading

Body text

The quick brown fox jumps over the lazy dog. Body copy is set in this typeface across the site, from service descriptions to contact forms.

Want a design like this?

Tell us what you need and get a fixed quote within 24 hours. Projects from £1k.

See what we do

Rather talk it through? Book a free call