Amber: sunlit amber glass for UI highlights

About the material

Amber sits on #ffbb00 at about 0.6 opacity. Brightness goes up to 108%, the most in the colored group, while saturation (185%) and refraction (30) are the softest: the backdrop is blurred 30 px and bends only slightly. A #fff0b3 rim glows creamy yellow around a 24 px radius. The effect is amber glass that looks like low sun through a window: warm, bright and still see-through.

Yellow and orange tones signal attention and value, so Amber is a good candidate for soft warnings and pending states, reminders, rewards and premium features, as well as food, travel and photo apps. It is tuned for dark scenes and media. Long-form text and nested glass do not belong on it. The selected tab gets a bright plate with text in a rich, deepened amber, which keeps the active state readable at a glance.

The main caveat: over light backdrops, white text on Amber is weaker. Check contrast in the studio or use dark text in those spots. In solid quality and Reduce Transparency the color survives: the tint is mixed into an opaque base, text contrast stays at 7:1 or better, and Increase Contrast thickens the rim to 2 px. Pick a scene from 24 backdrops, then grab HTML/CSS, Tailwind or SwiftUI code, or a JSON contract for your agent.

Best for

• Soft warnings and pending states
• Rewards, perks and premium features
• Food, travel and photo apps
• Reminders and hints

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

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