Titanium: liquid glass with a light metal finish

About the material

Titanium is the most grounded material in the light group. Its grey, slightly graphite tint sits at 26% opacity, saturation barely rises above neutral (108%), and the rim is a warm off-white lit from a 160° angle instead of the usual cool white. The backdrop still shows through, but its colours calm down and the edge catches light the way anodised titanium does. A deeper shadow than its siblings gives buttons and toolbars a firm footing.

Because the tint is darker than Silver or Frost, Titanium keeps its shape on bright pages and does not dissolve on dark ones, so a single preset can serve both themes. Put it on the functional layer: toolbars, segmented controls, menus, popovers and media controls that float above content. Keep long-form text on ordinary surfaces and avoid stacking glass inside glass; the studio flags both as warnings.

When a user asks for reduced transparency, the preset drops blur to 8 px, removes refraction and raises the tint to 92% opacity, so the panel becomes a solid slab of grey metal. Increased contrast thickens the rim to 2 px at full opacity. Pick Titanium in the studio, try it on a few of the 24 backdrops, then export HTML/CSS, Tailwind, a SwiftUI wrapper or a JSON config, or call generateCode with the titanium preset from the SDK.

Best for

• Toolbars and menus in neutral product UIs
• One preset for both light and dark themes
• Settings and admin panels with a metal accent
• Popovers that need a confident edge

Parameters

Where to use it

Best on: light backgrounds, dark backgrounds.
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: 'titanium'
});

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