Aurora Frost
Northern lights behind frosted panes: deep night, mint glow, cards like cold glass.
Free style · full files
Includes DESIGN.md, theme.css, tokens.json and the preview page. Want the other 99? All-Access $19
The idea
A near-black polar night with slow ribbons of mint, violet and rose light drifting behind the page. Every card is a pane of frosted glass that catches the colour and softens it. Quiet, nocturnal and a little hypnotic.
Aurora Frost is a polar night seen through a frosted window. A near-black navy canvas carries a slow, blurred aurora in mint, violet and rose; everything the user reads sits on panes of frosted glass that pick up that light and diffuse it. It borrows from long-exposure astrophotography and Scandinavian winter interiors: darkness as the default, light as a reward. Type is light and wide, the motion is slow, and the colour never saturates the reading surface. It should feel calm enough to use at midnight.
Principles
- Darkness is the canvas; light is earned and always blurred.
- Every reading surface is glass — never put text directly on the aurora.
- Keep the aurora behind the hero and one band only; let lower sections go dark.
- Use mint as the single action colour; violet and rose only live in the gradient.
- Move slowly: nothing animates faster than 600ms.
Motion
The aurora behind the page drifts on a 40-second loop, its three colour ribbons sliding 8% horizontally out of phase. Sections arrive from a 12px blur to sharp; cards brighten their rim light on hover.
Do & don't
Do
- ✓ Blur the aurora at least 80px so it reads as light, not shapes.
- ✓ Put a glass pane behind every block of text over 2 lines.
- ✓ Use generous 24px radii on panes and full pills on buttons.
- ✓ Let one stat per row run large in Sora 300.
- ✓ Keep at least one section fully dark below the fold.
- ✓ Use mint glow on hover instead of movement.
Don't
- ✕ Don't place body text directly on the gradient.
- ✕ Don't use violet or rose as button fills.
- ✕ Don't stack glass on glass more than two layers deep.
- ✕ Don't animate the aurora faster than a 30-second loop.
- ✕ Don't use pure black #000 or pure white #FFF.
- ✕ Don't add hard drop shadows; glow only.
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 →
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.
Sunset Mesh
No. 021Golden-hour gradients, milky glass and a soft italic serif for the end of the day.