Wellness / Elegant

Vesper.

A dusk horoscope hero with twelve illustrated constellation cards, a responsive fan, moon phase and an interactive reading selection.

An independent studio concept.

01 / THE DESIGN BRIEF

Build the idea.

Visual direction for the composition, typography, colour palette and interactions.

Build a fullscreen interactive hero for Vesper, a daily horoscope concept for readers who enjoy an atmospheric evening ritual. Create a dusk sky moving from #2b1746 through #5b3478 and #9c6490 towards an apricot horizon #e39a7e. Use cream #f7efe6 typography, aubergine #2a1437 card fronts, pale #f6f0fb reading faces and warm orange #ffb26b highlights. Pair Cormorant Garamond with Figtree. Add fine grain, seeded stars and a single luminous evening star. Place the Vesper wordmark at the upper left, with a moon phase display and Menu pill at the upper right. Keep the headline in a column at the upper left: Pick your card. The evening star does the rest. Set evening star in warm italic serif. Add the supporting line Twelve signs, one deck. Turn yours to read tonight's lines. and a Read my week action with the current reading label below. Fan twelve tall cards along an arc whose pivot sits below the viewport. Draw a thin zodiac ring above their top edges with twelve original sign glyphs. Each dark card carries its sign name and a constellation made from real star positions. Selecting a sign lifts its card, turns it to a pale reading face, lights its glyph and connects it to the ring with a subtle star tether. Tint the sky gently for its element. Keep the selected card clear of the headline. Make each card selection work with pointer, touch and keyboard. Start with the current seasonal sign and update the action label and moon phase. On phones below 760px replace the fan with a large reading card above a horizontal card strip and place the main action below. Keep reading text legible and all choices reachable by keyboard. Include a compact menu dialog. Reduced motion removes dealing, lifting and turning animation while retaining immediate selection.

AI results vary by tool and model. This prompt may not produce an exact match to the preview.

02 / MAKE IT YOURS

Make it your own.

Editable HTML, CSS and JavaScript, required local artwork and fonts with their licences, a short README and usage terms. No framework or runtime build step. Preview and edit with a local server extension in your editor. Includes optional artwork generators. See the README for Node.js commands and any external inputs.

Downloads are free. Your Google account lets you download designs; browsing and copying prompts do not require an account.

Continue with Google, then return here to choose your download.

Personal and client use

You may use and modify this design for personal websites and commercial client websites. You may not resell, sublicense or redistribute the template, its source files or a collection containing it. Keep the included font licence notices. The design is supplied as a starting point without warranty.

Explore hero designs