Pearl: warm pearl glass with a soft highlight

About the material

Pearl is the only warm material in the light group. Its tint (#f6efe8) is a creamy off-white at 50% opacity, saturation rises slightly to 115%, and the specular highlight is stronger than on Silver or Frost, so light seems to pool on the surface. Meanwhile the rim drops to 50% opacity, letting edges melt into the backdrop instead of outlining it. Add a 30 px corner radius and Pearl reads as smooth, rounded and soft to the touch.

Reach for Pearl where cool grey would feel clinical: wellness and lifestyle products, onboarding, booking flows, warm photography or terrazzo backdrops. It holds up in both light and dark themes and looks at home on buttons, segmented controls, sliders and dialogs. As always, glass stays on the functional layer while content and long text sit on plain surfaces.

Because the rim is deliberately faint, test Pearl with increased contrast switched on: the preset then raises the rim to 2 px at full opacity, so controls stay clearly bounded for people who need it. Reduced transparency turns the surface into an almost opaque cream panel. In the studio you can compare Pearl and Milk on the same backdrop, then export HTML/CSS, Tailwind, SwiftUI or JSON, or generate the code through the SDK and CLI.

Best for

• Onboarding and booking flows
• Wellness and lifestyle products
• Buttons and sliders with a warm accent
• Glass over warm photos and terrazzo

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

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