Glass you can read.

Pick the tier by what sits on it. Thin is for frames and trays with no text. Regular carries body text. Thick suits overlays that sit over busy content. Solid is the opaque fallback, and what every tier becomes in solid mode.

thin 45 % · regular 72 % · thick 86 % (light) · thin 50 % · regular 80 % · thick 88 % (dark)

textSafe. Regular, thick and solid keep body text at 4.5:1 or more over any backdrop, pure black to pure white. Thin is not text-safe: put labels on a .iz-glass-scrim or a nested tier.

Hero surfaces, a dock, a single feature card. data-refract bends the backdrop through an SVG displacement map: lens (default) curves it at the rim like thick glass, ripple warps the whole pane like pressed glass. Use it on one or two surfaces per screen.

lens: depth 56 px · bevel 14–36 px · map built once per size

Where it works. Chromium-based browsers render it. Safari and Firefox show the same surface as plain frost, with nothing broken. Solid mode and reduced transparency turn it off. It does not move, so it stays with reduced motion.

Every surface has a 1 px rim that catches light at the top left and a soft inner shadow. Add data-sheen and a specular highlight follows the pointer, so the glass feels lit by the person using it.

one pointer listener · rAF-throttled · visible surfaces only

Reduced motion. The sheen stops tracking and rests at the top left. In solid mode there is no sheen and the rim becomes a plain divider line.

Primary for the one action that matters, secondary for the rest, ghost inside toolbars. To float a button straight over a picture, make it glass itself: class="iz-glass iz-g-btn".

40 px tall · 32 and 48 px sizes · press scale .97

Reduced motion. No press scale. Hover and pressed colours still show.

Two to five views of the same thing. A raised thumb slides to the choice; arrow keys move it. It is a radio group, so screen readers say “2 of 3”.

320 ms ease-out slide · roving tabindex

Reduced motion. The thumb jumps to the new choice.

Settings that apply at once. The track has a 3:1 outline, so the off state reads on any glass.

200 ms ease-out thumb · role="switch"

Reduced motion. The thumb jumps; the track colour still fades.

Fields get a darker or lighter well so typed text keeps its contrast. Search is a combobox: type to filter, arrows to move, Enter to pick, Escape to close or clear. Press / anywhere to jump into it.

40 px fields · 3:1 outline · aria-activedescendant

Screen readers. The result count is announced as you type.

Filters you can switch on and off (toggle buttons), and tags you can remove. Pressed chips flip to solid ink with a tick, so the state never relies on colour alone.

32 px · aria-pressed · removal is announced

Keyboard. Removing a tag moves focus to the next one.

A top bar that floats over a hero or a scrolling page. Under 480 px of its own width the links fold behind a menu button, so it fits any column, not only the viewport.

56 px · container query · aria-current="page"

Keyboard. Escape closes the folded menu and returns focus to its button.

Formatting bars and canvas tools that hover over the work. One Tab stop for the whole bar; arrows, Home and End move inside it. Toggles use aria-pressed; grouped ones (alignment) act like radios.

role="toolbar" · roving tabindex · data-group

Reduced motion. Nothing moves here; only colours change.

The bottom navigation of a phone-sized app. These are links with aria-current, not ARIA tabs, because each one goes to a page.

52 px targets · icon + label · pill for the current page

Solid mode. The bar turns opaque; the current pill keeps its full contrast.

A launcher tray. It uses the thin tier, which is fine because it carries only app tiles; names appear in a regular-tier label on hover and focus. Icons magnify toward the pointer.

thin tier + refraction · magnify 1.42× over 150 px · arrows move focus

Reduced motion. No magnify, no label slide. Labels still appear.

App navigation beside a canvas or a photo. It collapses to an icon rail; labels stay in the accessibility tree, so links keep their names.

248 px · 68 px rail · aria-expanded on the toggle

Reduced motion. The width snaps instead of sliding.

Now-playing bars for audio and video. The scrubber is a native range input with a readable value (“1:08 of 3:45”); the play button swaps its name between Play and Pause.

native range · aria-valuetext · stacks under 420 px

Keyboard. Arrow keys scrub by a second, Page Up and Page Down by more.

A feature, a post or a product over a picture. The media slot takes an image, a video or one of the patterns at card size.

20 px padding · 20 px radius · media 16:9

Text. Title and body use the glass text tokens, so they pass on every textSafe tier.

Settings and inspectors: a header, rows split by hairlines, and a footer for actions. Rows hold switches, segmented controls or fields.

16 px header · 14 px rows · hairline dividers

Solid mode. Dividers stay; the rim becomes a plain line.

Glanceable tiles for a home screen or a dashboard corner: one number, one note. Charts inside are images with a text alternative.

auto-fill grid · 150 px minimum · span 2 for wide tiles

Screen readers. Each tile is a labelled region; the ring and bars have text alternatives.

Sort, filter and overflow actions. Opens on click, Enter, Space or the arrow keys; arrows, Home and End move; Escape closes and returns focus; a click outside closes it.

thick tier · 200 ms scale from the corner · role="menu"

Reduced motion. Fades only, no scale.

Native <dialog>: focus is trapped and returned, Escape closes, and a click on the scrim closes it. The sheet variant rises from the bottom edge, for phones and quick share menus.

thick tier · blurred scrim · 320 ms rise · data-iz-close="value"

Reduced motion. Dialog and scrim fade; nothing rises.

Short confirmations after an action. They stack, wait while hovered or focused, and leave after five seconds. Escape or the close button dismisses one.

thick tier · 200 ms rise · four at most · polite live region

Reduced motion. Toasts fade in and out in place.

Several alerts from one place, stacked like cards. Collapsed, only the newest is in the tab order; expanded, each one can be read and dismissed.

peek 12 px · scale .95 per card · 320 ms spread

Reduced motion. The stack opens in one step.