Ember: fiery orange glass for calls to action

About the material

Ember is built on #ff5c00 at about 0.6 opacity, with 195% saturation and a 26 px blur. Its 20 px radius is the smallest among the colored materials, so buttons look compact and decisive. A #ffcfa8 rim adds a peach highlight, and refraction of 32 warps the backdrop slightly along the edge. This orange glass reads like a glowing coal under a thin sheet of ice: hot, but controlled.

Orange-red pushes action and urgency, so Ember is worth trying for high-energy CTAs like Buy or Get started, promos and sales, sports and fitness apps, food delivery, and record or go-live buttons. It works best over dark scenes and media. Do not use it for long-form text and do not nest glass inside it. The active tab gets a bright plate with deep, fiery text. Ember shines as the one loud accent on a screen, not as wallpaper.

A loud color should not break accessibility. In solid quality and Reduce Transparency Ember keeps its hue: the tint is mixed into an opaque base, text contrast stays at 7:1 or better, blur drops to 8 px and refraction turns off. Increase Contrast strengthens the rim. Build a screen in the studio, say a button and a slider over media, then export HTML/CSS, Tailwind, SwiftUI or JSON; the SDK and CLI reproduce the same result for agents.

Best for

• High-energy CTAs: Buy, Get started
• Promos, sales and limited offers
• Sports, fitness and food delivery
• Record and go-live buttons

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

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