Mint: capsule-shaped mint liquid glass

About the material

Mint is built on #00e5a8 at about 0.62 opacity, the richest tint layer in the colored group. Blur is 26 px, saturation 190%, brightness nudged to 106%, and a refraction strength of 36 bends the backdrop noticeably near the edges. The preset turns on the capsule shape, so buttons and segments come out fully rounded. A #b0ffe8 rim adds a cool, pale outline, and the mint glass looks like backlit ice.

Green and teal tones suggest success, health and calm, so Mint is a natural pick for confirmations and done states, habit trackers, fitness and medical apps, wellness and eco products, or a finance screen that shows growth. It looks best over dark scenes and media. Keep long-form text and nested glass off it. Selected segments get a bright plate with text in a deep mint, so the active option stands out without adding another color.

Mint is a light hue, so white text on it gets weaker over light backdrops: check contrast in the studio or switch to dark text there. In solid quality and Reduce Transparency the hue holds, the tint is mixed into an opaque base and text keeps 7:1 contrast or better. Increase Contrast thickens the rim to 2 px. Export to HTML/CSS, Tailwind, SwiftUI or JSON, or generate the same result from the SDK and CLI.

Best for

• Success and confirmation states
• Fitness, health and habit trackers
• Capsule buttons and segmented controls
• Wellness and eco products

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

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