Space Gray: a restrained system surface

About the material

Space Gray tints the backdrop an even grey, barely dims it, and blurs just enough that whatever sits behind a panel stops pulling focus. Its defining trait is the rim, brighter than on any other neutral preset, so the outline of a button or search field holds up even where the backdrop and glass share a tone. Refraction is moderate, corners are a little tighter than Graphite's, and the whole thing reads as a familiar system surface.

Use it where glass should be a quiet backdrop for work: settings panels, sidebars, productivity toolbars, segmented controls. It pairs naturally with the preferences and workspace templates. It has none of Midnight's blue, and it's lighter and more see-through than Charcoal. It does its best work on dark and media backgrounds; for long-form text and nested glass, use ordinary surfaces.

That bright rim helps accessibility too. Increase Contrast makes it thicker and fully opaque, while Reduce Transparency switches to a nearly solid fill with minimal blur and no lens. If a browser can't show refraction, the reduced level keeps blur, tint and rim. The SDK picks up the preset in one line, the CLI builds an export from a JSON request, and design systems can pull the tokens as DTCG.

Best for

• Settings and preferences panels
• Sidebars in productivity apps
• Segmented controls
• Toolbars and search in dark mode
• System UI with no color accent

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

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