Obsidian: deep black glass with restrained highlights

About the material

Obsidian darkens the backdrop and lays a dense black fill on top with the faintest blue cast. Yet it carries the highest saturation in the neutral group, so bright areas behind the glass smolder instead of dying out, much like light inside volcanic glass. The rim isn't white: it's a muted steel blue, and highlights stay restrained. Edge refraction matches Graphite's strength, and a long, deep shadow makes each element hover above the scene.

It's made for dark interfaces and media: players, galleries, promo screens on colorful art. Where Space Black quiets the colors behind it, Obsidian keeps them vivid, which suits layouts where the backdrop is part of the mood. Light text and icons read confidently on top. It isn't meant for long-form reading or glass nested inside glass, and contrast over your own video should be checked on the actual render.

When a user turns on Reduce Transparency, the blur softens, the lens switches off and the fill becomes nearly solid; Increase Contrast thickens and brightens the rim. At the solid quality level, the glass becomes an opaque surface with a border. Preview Obsidian on the media-studio template in the studio, then export HTML/CSS, Tailwind, SwiftUI or JSON. Agents get the same preset through the CLI and JSON component contracts.

Best for

• Video players and media controls
• Photo galleries and lightboxes
• Promo screens on colorful art
• Dark toolbars with bright 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: 'obsidian'
});

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