Graphite: cool liquid glass with a soft rim

About the material

Graphite washes the backdrop in a pale blue-grey without dimming it, so the scene behind keeps its original brightness and the tint stays light. Blur is moderate: shapes and colors still read through the panel. At the edge, SVG refraction (feDisplacementMap) bends the background harder than any other neutral preset except Obsidian, while a soft white rim and an inner glow give the surface depth. The shadow is light, so controls feel lifted rather than heavy.

It shines on dark backgrounds and over media such as album art, photos and video. The pale tint separates a toolbar or button from busy imagery without turning it into a black slab. Skip it for long-form reading: a lively backdrop behind a light tint makes paragraphs tiring. Avoid nesting glass inside glass, since child actions belong on ordinary surfaces. With your own images or video, check contrast on the real render.

Accessibility is built into the preset. Reduce Transparency softens the blur, turns refraction off and makes the fill almost opaque; Increase Contrast thickens the rim and pushes it to full strength. Safari and Firefox don't guarantee refraction, so they keep blur, tint and rim. Try Graphite on all 12 components in the studio, then export HTML/CSS, Tailwind, SwiftUI or JSON, or call generateCode with preset: 'graphite' from the SDK.

Best for

• Toolbars and panels over video
• Buttons and switches in dark mode
• Media controls on vivid album art
• Search and tabs over photography

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

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