Space Black: dense black glass for light content

About the material

Space Black darkens the backdrop, barely touches its saturation and lays a neutral black fill on top at roughly half opacity. Unlike Obsidian, there's no steel-blue rim and no color boost: the scene behind stays legible but quiet. Blur is medium, refraction is restrained, and a deep shadow lifts each element off the background. Corners are a touch more compact than Space Gray's.

It's designed for light foregrounds: white labels, icons, timecodes, counters. A dense dark base keeps contrast steadier than lighter presets do, which makes Space Black a good fit for navigation over photos, media controls and popover menus. If you need an even heavier, more opaque stone, look at Onyx; if you want colors to stay vivid, use Obsidian. It isn't built for long-form text or nested glass.

With Reduce Transparency the fill turns nearly opaque, the lens disappears and blur drops to a minimum, so light text stays readable even without the glass effect. Increase Contrast makes the rim thicker and brighter. Test Space Black on all 12 components in the studio, export HTML/CSS, Tailwind, SwiftUI or JSON, and let agents pull the same preset through the SDK, CLI or WebMCP.

Best for

• White text and icons over photos
• Media controls with timecodes
• Popovers and context menus
• Navigation in dark mode

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

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