Sunset Mesh
Golden-hour gradients, milky glass and a soft italic serif for the end of the day.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
Apricot, coral and dusky plum melt together behind milky glass panels, like the sky twenty minutes after sunset. A soft optical serif with a warm italic carries the headlines. Gentle, reflective and unhurried — a page you want to read slowly.
Sunset Mesh is the sky just after golden hour, held behind milky glass. A warm cream canvas carries a slow mesh of apricot, coral, rose and plum; panels are translucent and soft-edged, as if frosted with breath. A light optical serif with a generous italic sets the voice: reflective, kind, literary. It borrows from 70s Californian wellness print, film photography at dusk and contemporary slow-living apps. Everything should lower the reader's heart rate.
Principles
- Warmth everywhere: no cool greys, no pure white, no blue.
- Set headlines light (300) and large; the italic word carries the emotion.
- Glass is milky and soft — high blur, low contrast edges.
- Move slowly and quietly; nothing bounces.
- Write like a friend at the end of the day, not a product.
Motion
The sunset mesh shifts slowly from apricot to plum as the user scrolls down the page, as if the evening is passing. Links draw a coral underline that thickens from 1px to 2px on hover.
Do & don't
Do
- ✓ Italicise exactly one word per headline and colour it coral.
- ✓ Let the mesh drift from apricot at the top to plum at the bottom.
- ✓ Use 28px+ blur on every glass panel.
Don't
- ✕ Don't use blue, teal or cool grey anywhere.
- ✕ Don't uppercase labels or buttons.
- ✕ Don't use bold Fraunces above 500.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 371 lines of DESIGN.md in total.
More like this
All Glass & Gradient →
FreeAurora Frost
No. 015Northern lights behind frosted panes: deep night, mint glow, cards like cold glass.
Holo Foil
No. 016Pearl-white page, foil-stamped type and rainbow sheen that shifts as you scroll.
Ice Glass
No. 017Clear ice over pale sky: frosted white panes, glacier blue, crisp edges.
Liquid Chrome
No. 018Molten mirror metal on graphite: wide caps, oil-slick sheen, machined edges.
Nebula Deep
No. 019Deep-field imagery, wide technical caps and smoked-glass panels drifting in the void.
Prism Mesh
No. 020White light split through a prism: saturated colour fields on a bright, airy page.