Midnight: dark glass with a subtle blue undertone

About the material

Midnight dims the backdrop slightly and tints it with a near-black that leans blue, more of a mood than a color you'd name. Its blur is denser than Graphite's or Obsidian's, so the scene behind settles down, while moderate saturation keeps colors alive. The cool, pale rim reads brighter than on most dark siblings, and refraction sits in the middle: the lens is there, but it doesn't compete with content.

It fits night themes, products with a navy brand palette, media players and panels over evening photography. Compared with Obsidian it's calmer, with less saturation and drama and more soft haze. Compared with Space Gray it's deeper: a darker, denser fill gives white labels on buttons and tabs a steadier footing. Long-form reading and glass inside glass remain outside its job.

The preset respects system settings out of the box: prefers-reduced-transparency swaps the glass for a solid surface without backdrop-filter, prefers-contrast strengthens the rim, and reduced motion turns transitions off. In the studio you can try Midnight on full screen templates and download a ZIP with HTML, CSS and a local runtime, with Tailwind, SwiftUI and JSON exports one tab away.

Best for

• An app's night theme
• Media players and evening photos
• Sidebars and tabs in navy-toned UI
• Dark dashboards

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

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