Onyx: dark stone glass with a delicate rim

About the material

Onyx darkens the backdrop more than any other neutral preset, and its near-black fill is the densest. Saturation sits at the bottom of the range, so even a vivid scene turns into restrained, muted tones behind the glass. Blur, by contrast, is light: the tone comes from density rather than diffusion. The rim is among the most delicate in the group, the inner glow and refraction zone are narrow, and a deep shadow gives each element the weight of real stone.

It suits strict dark interfaces where glass should almost disappear: premium landing pages, storefronts, players with minimal controls. How is Onyx different from Space Black? It's darker, denser and mutes backdrop color more, and its rim is finer. White elements on top stand out with particular clarity. For long-form reading or glass inside glass, use an ordinary surface instead.

A hairline rim looks refined, but on very dark backgrounds the outline can fade, so Increase Contrast makes it thicker and fully opaque. Under Reduce Transparency, Onyx becomes a nearly solid surface with no lens. The preset is available in the studio and SDK, exports to HTML/CSS, Tailwind, SwiftUI or JSON, and agents get component contracts covering sizes, states and keyboard behavior.

Best for

• Premium dark landing pages
• Minimal media players
• Storefront cards on dark backgrounds
• Strict toolbars with white icons

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: 'onyx'
});

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