Foil shift
Colour moves as if the card tilted. Cyan, violet, rose and gold pass through one highlight.
A pearl ground and one surface that shifts colour, the way printed foil does when you tilt it.
Holographic iridescence is printed foil brought to the screen. The page stays pearl and quiet. One surface carries the rainbow.
Colour moves as if the card tilted. Cyan, violet, rose and gold pass through one highlight.
Off-white paper lets the sheen show. A black page turns this into a different style.
Light weight and wide tracking. The letters should feel stamped, not shouted.
A single moving highlight. Confetti and extra rainbows weaken it.
The effect comes from real foil and diffraction print, then from packaging, then from screens that can fake a tilt.
Printers lay thin films on paper that split light into colour.
Holographic stickers spread on toys, tickets and collectibles.
Fragrance and makeup boxes use foil panels on pale cartons.
Designers rebuild the tilt with conic gradients and a moving white band.
Product sites keep the rest of the page quiet and spend the effect on a single card.
A white band crosses the foil, and the hue drifts a little. It should feel like a slow tilt, not a loop you notice.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
A pale page, a thin name, and one foil panel.
Small studios use the sheen on the product, not on the menu.
Numbers stay in ink. The foil is reserved for the object.
Palette, type, layout, texture and the tokens every component reads. Tap a swatch to copy its hex value.
Pearl paper and ink type. The rainbow is a sheen on a surface, not a set of text colours.
:root {
--pearl: #F6F3EE;
--ink: #1A1520;
--cyan-foil: #7AD7FF;
--violet-foil: #C9A4FF;
--rose-foil: #FFB3D4;
--gold-foil: #FFE08A;
}Thin, wide-tracked capitals for the name. A plain grotesque for everything you read.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root {
--font-d: "Jost",system-ui,sans-serif;
--font-b: "Outfit",system-ui,sans-serif;
--h-weight: 300;
--h-track: .01em;
}Calm columns with wide margins. One tilted card can break the grid. The rest stays level.
Equal cards, product tiles, feature lists.
Articles, documentation, settings pages.
Soft rectangles, like a foil card. Depth comes from the moving sheen, not from a heavy drop shadow.
:root {
--radius: 18px;
--radius-sm: 12px;
--bw: 1px;
--shadow: 0 16px 40px -24px rgba(26,21,32,.35);
--shadow-sm: 0 8px 18px -14px rgba(26,21,32,.28);
--gap: 28px;
--pad: 26px;
}A slow foil sweep: cyan, violet, rose and gold in one thin highlight. A fine diagonal line keeps it from looking like flat glass.
Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Holographic Iridescence kit · Anti-Boring */
:root{
--bg:#F6F3EE;
--surface:#FBF9F6;
--surface2:#EFEAE4;
--fg:#1A1520;
--muted:#4E4558;
--accent:#1A1520;
--accent-fg:#F6F3EE;
--accent2:#5C4A78;
--accent2-fg:#F6F3EE;
--border:#D5CBD4;
--bw:1px;
--radius:18px;
--radius-sm:12px;
--shadow:0 16px 40px -24px rgba(26,21,32,.35);
--shadow-sm:0 8px 18px -14px rgba(26,21,32,.28);
--font-d:"Jost",system-ui,sans-serif;
--font-b:"Outfit",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:300;
--h-track:.01em;
--h-case:none;
--h-style:normal;
--h-lh:1;
--gap:28px;
--pad:26px;
--focus:rgba(122,215,255,.7);
--ok:#1F6B45;
--warn:#8A5A00;
--danger:#8E2A3A;
--info:#5C4A78;
--field-bg:var(--surface);
--field-shadow:none;
--media:conic-gradient(from 120deg,#7AD7FF,#C9A4FF,#FFB3D4,#FFE08A,#7AD7FF);
--code-bg:#1A1520;
--code-fg:#F6F3EE;
--btn-case:uppercase;
--btn-track:.12em;
--btn-weight:500;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.1px;
--fs-body:17px;
--fs-4:22.1px;
--fs-3:28.7px;
--fs-2:37.3px;
--fs-1:48.6px;
--fs-d:clamp(49px, 9vw, 107px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.card{position:relative;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 62%);mix-blend-mode:soft-light}
.card-media{background-size:140% 140%}
.btn{letter-spacing:.12em}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#100E14;
--surface:#1A1720;
--surface2:#16131C;
--fg:#F6F1EA;
--muted:#D5CBD6;
--accent:#E7D7FF;
--accent-fg:#1A1520;
--accent2:#7AD7FF;
--accent2-fg:#082028;
--border:#4A4158;
--code-bg:#0C0A10;
--code-fg:#F6F1EA;
}
html.alt .input,html.alt .select,html.alt .textarea{background:var(--surface);color:var(--fg)}
Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for Lovable and Claude Design. It names the palette, type, layout, texture, what to do and what to avoid, so the output keeps this style's point of view.
Style prompt for Lovable and Claude Design. Design a responsive landing page for a small fragrance studio in an authentic Holographic Iridescence style.
Palette: Pearl #F6F3EE, Ink #1A1520, Cyan foil #7AD7FF, Violet foil #C9A4FF, Rose foil #FFB3D4, Gold foil #FFE08A.
Typography: Jost light, wide-tracked capitals for the name. Outfit for body text.
Layout: Split hero on pearl. The right side is one foil card with a thin word and a small caption. Later sections are calm columns.
Texture: A conic foil gradient with a soft white band sweeping across it. Fine, not glitter.
Signature details: Soft card radius, a sheen overlay that does not block clicks, foil only in media and the hero card.
Components: Ink buttons with wide tracking, pale cards, small pills. Rainbow is not used for button fills.
Motion: A seven-second sheen. Hue drifts slightly. No spinning wheels.
Do: Keep reading text in ink. Spend the rainbow on one surface. Let the highlight move slowly.
Avoid: Rainbow paragraph text, glitter photographs, glassmorphism blur, chrome Y2K bubbles, fast hue spins.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Foil colours fail as small type. The sheen belongs on a shape behind the words.
A photo of sparkle is a different texture. Draw the foil in gradients.
If every card is foil, the eye has nowhere to rest. Use one panel.
A quick loop feels like a warning light. The tilt should be slow.