Holo Foil
Pearl-white page, foil-stamped type and rainbow sheen that shifts as you scroll.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
A pearlescent white canvas with headlines that look hot-stamped in holographic foil. Cards carry thick ink borders and a rainbow sheen that moves with the cursor. Loud, collectible and a little rare — like a limited trading card pulled from the pack.
Holo Foil is a collectible trading card turned into a website. The page is pearl white with a faint pastel iridescent mesh; headlines are huge, uppercase and filled with a shifting holographic gradient like hot-foil stamping. Thick ink outlines and layered shadows give cards the weight of something you would put in a sleeve. It draws from 90s trading cards, sticker culture and contemporary streetwear drops. Loud, but tightly controlled: the foil is the only colour, and ink holds everything together.
Principles
- Foil is a finish, not a fill — use it on type, borders and one card at a time.
- Ink (#120F1A) outlines hold the composition; every card gets a 2px border.
- Headlines are short, uppercase and huge; three words is plenty.
- Numbers are collectible: show drop numbers, pair counts, timestamps.
- Let the pearl canvas stay quiet so the foil reads as precious.
Motion
The foil gradient on the headline and featured cards slides with scroll position, so the rainbow shifts as the page moves, like tilting a holographic card. Cards shift 4px up-left on hover, revealing a foil shadow beneath.
Do & don't
Do
- ✓ Fill the h1 with the foil gradient and animate its position with scroll.
- ✓ Rotate sticker cards between -3 and 3 degrees.
- ✓ Show drop numbers and countdowns in JetBrains Mono.
Don't
- ✕ Don't fill backgrounds or large panels with foil.
- ✕ Don't set body copy in Syne.
- ✕ Don't use thin 1px borders; they look cheap here.
+ 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 — 376 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.
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.