Charcoal: warm charcoal grey glass

About the material

Charcoal dims the backdrop noticeably and tints it a dark charcoal grey, but it stops short of the black of Onyx or Space Black. Blur is medium, saturation is restrained and refraction is soft: the lens is there without pulling attention. What sets it apart is shape. Corners are more compact than on any other neutral preset, and the shadow is short and close, so controls look tidy and sit nearer the surface.

That character pays off on busy screens with lots of controls side by side: dashboards, editors, dense toolbars, panels full of sliders and switches. A short shadow keeps neighboring buttons from cluttering each other, and the dense fill holds light text well. It's made for dark and media backgrounds; use ordinary surfaces for long articles and nested glass, and check contrast over your own imagery on the real render.

Screen templates with many glass surfaces default to reduced quality without the SVG lens, and Charcoal loses little there because its refraction is already gentle. Reduce Transparency switches it to a nearly solid fill, and Increase Contrast strengthens the rim. Grab the finished code from the studio as HTML/CSS, Tailwind, SwiftUI or JSON.

Best for

• Dashboards and analytics
• Dense editor toolbars
• Panels with sliders and switches
• Working screens 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: 'charcoal'
});

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