Prism: a spectral rim over a saturated backdrop

About the material

Prism is the loudest optical material. Saturation at 240% makes whatever sits behind the glass glow with intensified colour, a light violet tint (#b9a6ff at 12%) pulls it toward the cool end, and the 2 px rim is pale cyan (#c8f0ff), lit from a 210° angle instead of the 145° the other optical materials use. Refraction of 70 bends the backdrop at the edges. The tension between a saturated interior and a cold rim gives Prism its spectral, split-light look.

Use Prism for expressive surfaces over dark UI and media: music and video players, creative tools, launch pages, halftone or gradient-heavy art. One or two Prism controls, such as a tab bar or a primary action, carry more personality than a whole screen of them. Keep long text off it, and remember that saturation amplifies your backdrop: a calm image turns vivid, a busy one can turn noisy.

Because the result depends so much on what lies beneath, check contrast on the real render whenever you use custom images or video; the studio raises this as a rule. Users who prefer reduced transparency get an opaque panel with no refraction, and increased contrast makes the rim fully opaque. Export HTML/CSS, Tailwind, SwiftUI or JSON, or point an agent to the manifest and let it call generateCode with the prism preset.

Best for

• Music and video players
• Creative tools and editors
• Product launch pages
• A single vivid tab bar or primary action

Parameters

Where to use it

Best on: dark backgrounds, photos and video.
Avoid: long-form content, glass nested in glass.

Code

import { generateCode } from
  '/releases/2.2.0/sdk/core/index.js';

const result = generateCode({
  component: 'button', preset: 'prism'
});

The SDK runs without the DOM: swap in the component you need, the preset stays the same.