Foundations

Material

Surfaces are solid by default. Glass is an alternative material for the chrome that floats over content; content itself always stays solid.

How it works

Every surface has a material. Solid is the default: an opaque fill from the elevation levels. Glass is a translucent tint over a blurred, saturated copy of what lies behind, with a light rim, a hairline edge, a soft shadow and a highlight at the top. In Chromium the edge of the glass also bends the backdrop slightly.

Glass does not morph: a glass surface never opens by turning into another glass surface or changing shape; it uses only its own enter and exit motion.

Glass is a property of the app, not of a brand. Every brand pack works with both materials, and the glass colours come from the same light and dark tokens.

Live example, StorybookOpen in Storybook

Turning it on

Set material="glass" on the Provider. It writes data-material="glass", and the chrome inside turns glass through the Tailwind glass: variant. The Provider also mounts the refraction filter once; the filter reads its edge map from /assets/bigbang/glass-edge-map.svg, so serve @bigbang/tokens/assets/* at that path.

<Provider material="glass">
  <App />
</Provider>

A Provider without the prop keeps the material of the one around it. A nested <Provider material="solid"> keeps its part of the page solid.

Where glass applies

Glass is only for chrome: the controls and navigation that float over content.

Surface	Glass	Notes
AppShell top bar	Yes	With a blurred scroll edge under it
AppShell sidebar	`inset` variant	The menu drawer stays solid
Popover, DropdownMenu, Select and Combobox lists	Yes	The fields themselves stay solid; InfoPopover stays solid
CommandDialog	Yes
Dialog, AlertDialog	Yes, higher-contrast tint	Use solid for long text, forms with more than three fields and consent blocks
Toast	Yes
Toolbar, ActionBar, SaveBar	Yes
SegmentedControl, Tabs `contained`	Yes	The thumb takes the higher-contrast tint
Button `glass`, `glass-prominent`	Always	For controls over media

Every surface in the table takes material="solid" to stay solid under a glass Provider.

Never glass

Tables and DataTable, charts, StatCard, form fields, Card bodies, money and IBAN fields, Tooltip and the page background are always solid. Text that people read, compare or type into needs a stable background.

<Toolbar label=“Format”>…</Toolbar>

DoGlass on the bar that floats over the content.

<Card className=“glass:material-glass”>

Don'tGlass under figures or form fields: the backdrop shows through the numbers.

Glass over media

Button variant="glass" and variant="glass-prominent" are glass even without a glass Provider. Use them for controls over a photo, a video or a busy backdrop. glass-prominent is tinted with the primary colour and has no highlight.

Mark a region with data-backdrop="dark" or data-backdrop="light" when what lies behind it does not match the page mode, such as a dark photo on a light page. The region then takes the colour tokens of that mode, so glass and text inside stay readable. An icon-only glass button inside data-backdrop="dark" uses the clear glass: a thinner tint over a dimming layer.

When glass renders solid

Glass falls back to the solid raised surface, with the same text colours, when:

the user asks for more contrast (prefers-contrast: more) or forced colours are on;
the user asks for reduced transparency, or the display updates slowly;
the browser does not support backdrop-filter;
the app sets data-material-pref="solid" on <html>, for example from an in-app setting.

With reduced motion the pressed swell and the moving highlight of glass controls are off.

Contrast

Glass text meets 4.5:1 and icons 3:1 against the worst backdrop, not an average one. The token checks composite each glass tint over white, black, mid grey, pure blue, yellow, red and green after the material’s saturation and brightness, with and without the highlight, for every brand and both modes. Blur only averages the backdrop, so a real backdrop is never worse than these.

On glass, use text-default, text-subtle and, in light mode, text-subtlest. Meaningful icons use icon-default; an icon next to a label that already says the same thing may be subtler.

Tokens

Token	Light mode	Dark mode
`--bigbang-color-material-glass-regular`	`rgba(255, 255, 255, 0.8)rgba(255, 255, 255, 0.8)rgba(255, 255, 255, 0.8)`	`rgba(30, 30, 30, 0.8392156862745098)rgba(30, 30, 30, 0.8392156862745098)rgba(30, 30, 30, 0.8392156862745098)`
`--bigbang-color-material-glass-regular-contrast`	`rgba(255, 255, 255, 0.9215686274509803)rgba(255, 255, 255, 0.9215686274509803)rgba(255, 255, 255, 0.9215686274509803)`	`rgba(30, 30, 30, 0.8784313725490196)rgba(30, 30, 30, 0.8784313725490196)rgba(30, 30, 30, 0.8784313725490196)`
`--bigbang-color-material-glass-clear`	`rgba(255, 255, 255, 0.2784313725490196)rgba(255, 255, 255, 0.2784313725490196)rgba(255, 255, 255, 0.2784313725490196)`	`rgba(30, 30, 30, 0.30196078431372547)rgba(30, 30, 30, 0.30196078431372547)rgba(30, 30, 30, 0.30196078431372547)`
`--bigbang-color-material-glass-dim`	`rgba(0, 0, 0, 0.34901960784313724)rgba(0, 0, 0, 0.34901960784313724)rgba(0, 0, 0, 0.34901960784313724)`	`rgba(0, 0, 0, 0.34901960784313724)rgba(0, 0, 0, 0.34901960784313724)rgba(0, 0, 0, 0.34901960784313724)`
`--bigbang-color-material-glass-rim`	`rgba(255, 255, 255, 0.7019607843137254)rgba(255, 255, 255, 0.7019607843137254)rgba(255, 255, 255, 0.7019607843137254)`	`rgba(255, 255, 255, 0.1803921568627451)rgba(255, 255, 255, 0.1803921568627451)rgba(255, 255, 255, 0.1803921568627451)`
`--bigbang-color-material-glass-edge`	`rgba(0, 0, 0, 0.058823529411764705)rgba(0, 0, 0, 0.058823529411764705)rgba(0, 0, 0, 0.058823529411764705)`	`rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)`
`--bigbang-color-material-glass-shade`	`rgba(0, 0, 0, 0.0392156862745098)rgba(0, 0, 0, 0.0392156862745098)rgba(0, 0, 0, 0.0392156862745098)`	`rgba(0, 0, 0, 0.30196078431372547)rgba(0, 0, 0, 0.30196078431372547)rgba(0, 0, 0, 0.30196078431372547)`
`--bigbang-color-material-glass-specular`	`rgba(255, 255, 255, 0.5490196078431373)rgba(255, 255, 255, 0.5490196078431373)rgba(255, 255, 255, 0.5490196078431373)`	`rgba(255, 255, 255, 0.12156862745098039)rgba(255, 255, 255, 0.12156862745098039)rgba(255, 255, 255, 0.12156862745098039)`

Token	Light mode	Dark mode
`--bigbang-blur-surface-glass`	`16px16px16px`	`20px20px20px`
`--bigbang-blur-surface-glass-clear`	`6px6px6px`	`8px8px8px`
`--bigbang-shadow-glass`	`0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549)`	`0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549)`
`--bigbang-material-glass-saturate`	`1.81.81.8`	`1.51.51.5`
`--bigbang-material-glass-brightness`	`1.041.041.04`	`0.960.960.96`
`--bigbang-material-glass-scroll-edge`	`24px24px24px`	`24px24px24px`
`--bigbang-motion-glass-press-scale`	`1.021.021.02`	`1.021.021.02`

In Tailwind, material-glass draws the material, with the material-glass-contrast, material-glass-clear, material-glass-prominent, material-glass-interactive and material-glass-scroll-edge modifiers. Write them behind the glass: variant so they apply only where glass is on.