Diffraction Foil

Diffraction Foil — Style Reference

Light is the ink: let silver foil answer one shared lamp through a diffraction grating.

Theme: dark

The iridescence is not a rainbow gradient sliding over the page: it is computed from light diffracting through etched grooves. A 1500 nm grating under one lamp about 300 px above the screen produces the spectrum; wavelength follows the relative surface normal and lamp angle, while most of the surface stays silver. Diffraction orders 1, 2 and 3 are weighted 1, 0.5 and 0.3. A near-black print sheet and faint crop marks frame quiet, dimensional foil surfaces. The interactive page shares one WebGL2 context, with a CSS fallback driven by the same lamp.

Colors

Typography

Sans Serif — Use the site sans face: heavy, tight display type and monospace labels with tracking; add no new font dependency.

• Substitute: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
• Weights: 400, 500, 600, 700, 800
• Sizes: 12, 14, 16, 20, 24, 32, 48, 72
• Line height: 1.05 (display), 1.2 (headings), 1.65 (body)
• Letter spacing: -0.025em on display, 0.2em on uppercase labels

Monospace — For the grating equation, nanometre values, redeem codes and sparse technical labels, never long-form copy.

• Substitute: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
• Weights: 400, 500, 600
• Sizes: 12, 14, 16, 18
• Line height: 1.2 (display), 1.4 (headings), 1.65 (body)
• Letter spacing: 0.04em on display, 0.2em on uppercase labels

Type Scale

Spacing & Layout

Base unit: 8px Density: comfortable

Spacing Scale

Border Radius

• Page max-width: 1280px
• Section gap: 64px
• Card padding: 24px
• Element gap: 16px

Components

Foil Trading Card

Role: The collector's centerpiece: a wide stamped foil in a quiet dark frame.

Use a #141319 frame, a 10% white hairline and roughly 24px radius around a 1.8:1 foil field. Set the title near the lower edge where the surface is light enough for ink; print notes and serial numbers in secondary grey or monospace. Shadow may sit below the frame, never muddy the foil.

• Sizes: foil face 1.8:1; frame padding 20px–24px
• States: spectrum follows the shared lamp; non-foil card frame remains still

Light Foil Button

Role: A primary action printed on light foil; pressing bends the material without shifting layout.

Layer a light silver base with a screen highlight and the spectrum in overlay mode. Set dark #16151c ink at 14px/600, 12px radius, 44px minimum height and about 24px horizontal padding. Keep a fine inset rim and restrained shadow; keyboard focus takes a 2px #c9c8d4 outline with offset.

• Sizes: minimum height 44px; 12px radius
• States: press: bend shading normal up to 14° and spring back; never translate the button

Grating Controls

Role: Let readers see how incident angle and groove period change diffraction orders.

Place two horizontal range controls in a dark panel: lamp angle 0°–70° and groove period 800–2200 nm in 50 nm steps. Show the live value and each diffraction order. The track uses silver #c9c8d4, 14px labels and monospace values.

• Sizes: panel padding 24px–32px; two 44px-high controls
• States: changing angle or period updates computed wavelength markers and spectral strip

Foil Material Samples

Role: Compare film, concentric starburst and glitter groove layouts side by side.

Use equal samples with 12px corners on #141319. Film combines crossed gratings, star uses concentric grooves, and glitter uses randomly oriented facets. Brushed grooves and thin-film interference require the WebGL2 pixel shader; link to its live study instead of showing a false flat swatch.

Redeem-Code Field

Role: A short collector's code for a card or foil pack.

Use a #141319 fill, 1px white border at 15%, 12px radius and 12px 16px padding. The XXXX-XXXX-XXXX format is uppercase monospace with 0.2em tracking and #6c6b78 placeholder text. Focus shifts the border to #c9c8d4 and keeps its ring visible.

• Sizes: 14px monospace; 12px 16px padding; 12px radius
• States: input uppercases characters and announces incomplete/valid format; validation does not depend on color alone

Collector Navigation

Role: A quiet row along the print sheet, rather than a heavy application bar.

Set it on the near-black ground with a 1px white-at-10% rule below and 24px horizontal padding. The wordmark may carry spectral foil text; ordinary links stay #a9a8b6. Reserve the right side for one compact action, with the reference HTML as a secondary text link on wide screens.

• Sizes: roughly 56px high; 24px horizontal padding
• States: hover raises text contrast; keyboard links keep the silver offset outline

Do's and Don'ts

Do

• Compute wavelength with λ = d × |dot(h, k)| / m, using 1500 nm for d and order weights 1, 0.5 and 0.3.
• Use one shared pointer lamp 300px above the screen; color follows relative angle and bare silver shows between orders.
• Treat violet, blue, green, yellow and red as a computed moving spectrum, not a fixed palette.
• Share one WebGL2 context across the interactive page; render each material and copy it to the element canvas.
• Keep a CSS fallback that follows the same lamp when WebGL is unavailable or disabled.
• Put interaction on the shading normal: tilt at most 14°, with stiffness 320 and damping ratio 0.32.
• Reserve dark ink for light silver; set sheet copy in #ececf2 and supporting text in #a9a8b6.
• Honor reduced-motion preferences by parking the lamp and disabling orbit and spring overshoot.

Don't

• Do not fake diffraction with a static iridescent gradient or animated background-position.
• Do not flood the foil with rainbow; most of each surface must still read as silver.
• Do not set ink on saturated bands; move the text over a light-silver area instead.
• Do not open one WebGL context per element or repeatedly run expensive independent shaders.
• Do not cycle hue-rotate; it breaks the material's explainable relationship to grooves and light.
• Do not invent a flat CSS swatch for WebGL-only brushed or pearl materials.
• Do not interleave layout reads with style writes; measure first, then render or write variables.
• Do not keep orbit, bounce or spring overshoot under reduced-motion settings.

Surfaces

Elevation

• Trading card: 0 24px 48px -28px rgba(0,0,0,0.9)
• Light-foil top rim: inset 0 1px 0 rgba(255,255,255,0.6)
• Dark panel: 1px solid rgba(255,255,255,0.1); no broad glow
• Lamp highlight: radial highlight within 150px of shared lamp

Imagery

Show close crops of real spectral foil, collectibles or packaging while retaining visible metal underneath. Static examples use the precomputed spectral strip, silver base and directional highlight; keep photography grain from obscuring fine grooves. Brushed and pearl effects require their actual WebGL shader preview.

Layout

Cap the print-sheet container at 1280px, with 24px mobile and 40px desktop padding. Divide sections with a hairline and 48px mobile / 64px desktop vertical rhythm. Use 1.8:1 for the primary foil card and place it beside two square material studies when space allows; preserve enough breathing room to separate sheet, frame and foil.

Agent Prompt Guide

QUICK COLOR REFERENCE:

• background: #0c0b10
• panel: #141319
• text: #ececf2
• secondaryText: #a9a8b6
• inkOnLightFoil: #16151c
• silver: #c9c8d4
• brightSilver: #e9e8f0

EXAMPLE COMPONENT PROMPTS:

1. Build an interactive hot-stamped collector card on #0c0b10. Frame it in #141319 with a 10% white hairline and a 1.8:1 silver foil field. Compute wavelength with λ = d × |dot(h, k)| / m, d = 1500 nm, and order weights 1/0.5/0.3. One shared pointer lamp 300px above the screen drives the whole page; most of each surface must remain silver. Use overlay on light foil and screen on dark foil. Share a single WebGL2 context and provide a CSS fallback driven by the same spectrum strip and lamp; press bends the shading normal without moving the card. Park the lamp for reduced motion. Verify that hue follows lamp angle, silver remains visible, card geometry stays fixed, focus is clear, and the CSS fallback works.

Similar Brands

• Holographic (holographic) — Both can look iridescent, but Holographic shifts CSS gradients; Diffraction Foil computes wavelength from groove geometry and lamp angle while retaining silver beneath.

Quick Start

:root {
  /* Colors */
  --color-print-sheet: #0c0b10;
  --color-panel: #141319;
  --color-dark-silver: #a3a2af;
  --color-light-silver: #e9e8f0;
  --color-foil-ink: #16151c;
  --color-text: #ececf2;
  --color-text-secondary: #a9a8b6;
  --color-focus-silver: #c9c8d4;
  --color-spectrum-red-sample: #d2052d;
  --color-spectrum-green-sample: #00d777;
  --color-spectrum-violet-sample: #6600e1;

  /* Typography — Font Families */
  --font-sans: 'Sans Serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Monospace', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-display: 72px;
  --leading-display: 1.05;
  --tracking-display: -0.025em;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.12;
  --tracking-heading-lg: -0.02em;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.015em;
  --text-subheading: 24px;
  --leading-subheading: 1.3;
  --text-body-lg: 16px;
  --leading-body-lg: 1.65;
  --text-body: 14px;
  --leading-body: 1.65;
  --text-label: 12px;
  --leading-label: 1.4;
  --tracking-label: 0.2em;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 64px;
  --card-padding: 24px;
  --element-gap: 16px;
  --density: comfortable;

  /* Border Radius */
  --radius-cards-and-foil-panels: 16px–24px;
  --radius-buttons-and-input-fields: 12px;
  --radius-pills-and-star-seals: 999px;
  --radius-section-dividers: 0px; 1px border;

  /* Surfaces */
  --surface-print-sheet: #0c0b10;
  --surface-raised-panel: #141319;
  --surface-dark-silver-foil: linear-gradient(#4f4e59, #a3a2af 28%, #5e5d68 50%, #adacb9 76%, #575661);
  --surface-light-silver-foil: linear-gradient(#b4b3bf, #e9e8f0 30%, #bdbcc8 52%, #ecebf2 78%, #b6b5c1);
  --surface-diffracted-spectrum: 1500 nm grating; orders 1:0.5:0.3 over silver;
}