Holographic / Iridescent Foil

---
name: holographic-foil
description: Apply the Holographic / Iridescent Foil visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Holographic / Iridescent Foil, mentions holo foil, iridescent UI, rainbow foil, or describes pastel rainbow conic gradients, angle-reactive hover shimmer, iridescent glow shadows — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Holographic / Iridescent Foil Design System

Surfaces that shimmer like holographic trading cards and pearlescent packaging: pastel rainbow conic gradients drifting from ice blue through pink, mint, and butter yellow, angle-reactive hover shifts, and iridescent glows on an otherwise clean, light interface. Beloved by beauty brands, collectibles, and crypto-era product pages.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Holographic / Iridescent Foil.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (holo foil, iridescent UI, rainbow foil, pearlescent, oil-slick gradient), or describes its traits: pastel rainbow conic gradients; angle-reactive hover shimmer; iridescent glow shadows; pearl-white backgrounds; foil-edged cards; clean sans over dreamy surfaces.

## Design tokens

### Color palette

- Pearl-white page background with a cool cast: `#fbfaff` (--color-bg)
- Card base beneath foil overlays: `#ffffff` (--color-surface)
- Primary text, deep ink violet-black: `#1d1a2b` (--color-text)
- Secondary text, dusty violet-gray: `#6b6580` (--color-text-muted)
- Interactive accent, violet — the one saturated anchor: `#7c3aed` (--color-accent)
- Foil gradient stop: ice blue: `#a0e9ff` (--color-holo-blue)
- Foil gradient stop: pastel pink: `#ffd1f6` (--color-holo-pink)
- Foil gradient stop: mint green: `#c1f7d5` (--color-holo-mint)
- Foil gradient stop: butter yellow: `#fff5b8` (--color-holo-butter)
- Soft lilac hairline borders: `#e9e4f5` (--color-border)

### Typography

- Display / headings: Space Grotesk (fallback: Helvetica Neue, Arial, sans-serif)
- Body: Inter (fallback: Helvetica Neue, Arial, sans-serif)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.3, letter-spacing -0.02em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 72, 96 — Light and gallery-like; foil cards are the jewelry of the page and need white space around them to shimmer.
- Border radius: md 12px, lg 20px, pill 999px — 12px default per the foil-card idiom; larger radii for hero panels. Nothing sharp — foil wraps, it doesn't cut.
- Border treatment: 1px solid #e9e4f5 — Foil elements upgrade to a 1px gradient border using the four holo stops (border-image or padded-background technique).

### Shadows

- iridescent-glow: `0 8px 32px rgba(160, 233, 255, 0.35), 0 4px 16px rgba(255, 209, 246, 0.3)` — Default glow under foil cards — two tinted layers instead of gray
- iridescent-glow-lg: `0 16px 48px rgba(160, 233, 255, 0.45), 0 8px 24px rgba(255, 209, 246, 0.4)` — Hover and featured cards
- soft-neutral: `0 2px 12px rgba(29, 26, 43, 0.06)` — Plain non-foil surfaces

### Layout

- Max content width: 1200px
- Card-gallery grids where a minority of cards get the full foil treatment
- Hero with one large tilting holo panel or product shot on pearl white
- Foil used as edging — gradient borders and badge chips — more often than full fills
- Soft radial pastel washes bleeding in from page corners

### Effects

- Conic-gradient foil: conic-gradient(from var(--angle), #a0e9ff, #ffd1f6, #c1f7d5, #fff5b8, #a0e9ff) animated by rotating --angle
- Pointer-tracked tilt: perspective transform plus gradient-angle shift on mousemove
- Holographic text: same conic gradient with background-clip: text on display headlines
- Fine noise or diffraction-line overlay at 3–4% opacity to sell the foil texture
- Shimmer pass: a translucent white diagonal band sweeping across foil on hover

### Motion

- Easing: cubic-bezier(0.22, 1, 0.36, 1); durations 150ms / 300ms / 600ms
- Foil gradient angle eases toward the pointer rather than snapping — the tilt should feel physical
- Idle foil drifts its hue angle very slowly (20s+ loop) so cards feel alive
- Non-foil UI stays calm: simple fades and small lifts

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fbfaff;
  --color-surface: #ffffff;
  --color-text: #1d1a2b;
  --color-text-muted: #6b6580;
  --color-accent: #7c3aed;
  --color-holo-blue: #a0e9ff;
  --color-holo-pink: #ffd1f6;
  --color-holo-mint: #c1f7d5;
  --color-holo-butter: #fff5b8;
  --color-border: #e9e4f5;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-iridescent-glow: 0 8px 32px rgba(160, 233, 255, 0.35), 0 4px 16px rgba(255, 209, 246, 0.3);
  --shadow-iridescent-glow-lg: 0 16px 48px rgba(160, 233, 255, 0.45), 0 8px 24px rgba(255, 209, 246, 0.4);
  --shadow-soft-neutral: 0 2px 12px rgba(29, 26, 43, 0.06);
  --border-default: 1px solid #e9e4f5;
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.3;
  --leading-body: 1.6;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Pearl-white translucent bar with hairline lilac border; logo may carry a subtle holo-text fill; links in ink violet
- **Hero:** Big ink-violet Space Grotesk headline with one word in holographic text fill, pearl background with corner pastel washes, foil-bordered CTA
- **Card:** White base, 12px radius, holo gradient border or full foil face for featured items, iridescent glow shadow, pointer-tilt on hover
- **Button (primary):** Violet #7c3aed fill, white text, pill radius; hover adds the iridescent glow and a shimmer sweep
- **Button (secondary):** White fill, 1px holo gradient border, ink text; foil border animates its angle on hover
- **Form fields:** White fill, 12px radius, lilac hairline; focus swaps to a 2px holo gradient border with a faint ice-blue glow

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A holo-foil card face: conic gradient cycling #a0e9ff → #ffd1f6 → #c1f7d5 → #fff5b8 that visibly shifts its angle as the pointer moves, mimicking foil tilting under light. Spend boldness here; keep everything else quiet.

## Do

- Animate the gradient angle on interaction — static rainbow fills read as clip-art, motion is what says 'foil'
- Keep most of the page pearl-white and quiet so foil surfaces feel special
- Use tinted multi-layer glows instead of gray shadows under holo elements
- Anchor the pastel spectrum with one saturated violet for interactive states

## Don't

- Never set body text over foil gradients — the shifting pastels destroy legibility
- Don't foil everything; if every card shimmers, none do
- Don't crank saturation into neon — this is pastel iridescence, not RGB-gamer rainbow
- Don't fake it with a linear left-to-right rainbow; the conic/angular shift is the material's fingerprint

## Accessibility notes

- All four holo stops are near-white pastels: strictly decorative, never text or icon colors — text on foil must be ink #1d1a2b and pass 4.5:1 against the lightest stop
- Pointer-tilt and gradient-drift effects must freeze under prefers-reduced-motion, leaving a static gradient
- Holographic text fills need a solid-color fallback and should be limited to one display headline per view

## Reference sites

- Holographic shots on Dribbble: https://dribbble.com/tags/holographic
- OpenSea (foil-card era NFT UI): https://opensea.io
- Fenty Beauty (iridescent brand packaging): https://fentybeauty.com
- CSS holographic card experiments: https://codepen.io/search/pens?q=holographic%20card

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip holographic-foil.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/holographic-foil.json

Settings → Capabilities → Skills → Upload skill → holographic-foil.zip