---
title: "Graphite glass: liquid glass controls set in lit monochrome clay"
slug: graphite-glass
description: A UI style that sets liquid glass controls into a matte dark gray clay body lit from one direction. The glass bends a monochrome wall behind it and splits RGB slightly at its edges. State is shown by brightness and a soft white glow, never by a colored fill.
tags: [design-philosophy, ui, css, liquid-glass, claymorphism, skeuomorphism, monochrome, dark-mode]
ground: "#222222"
ink: "#c4c4c4"
font: Inter
mono: JetBrains Mono
---
# Graphite glass: liquid glass controls set in lit monochrome clay
Graphite glass combines two materials. The body is matte dark gray clay, lit from the top-left: frames, slabs and carved panes. The controls are liquid glass set into that body. They bend the monochrome wall behind them rather than frosting it, catch a rim of light from the same lamp, and split red, green and blue slightly at their edges. That faint prism fringe is the only color on the screen. On and off are shown as brighter glass with a soft white glow, never as a colored fill. The result feels physical and quiet, like a piece of studio hardware.
This came out of a live playground session. The first round was standard glassmorphism (aurora gradient, candy fills), and the person rejected it bluntly. The notes that moved it forward were, in order:
- "less gradient more calm but i like the glow"
- "kinda like the monochrome [clay] article … but using the apple glass article too"
- "give the glass subtle slight rgb refraction"
A red clay version was tried afterward and they came back to dark gray.
## When this applies
- **Fits:** apps with a few controls that people touch a lot, such as a media or room controller, a hardware-style companion app, a settings panel, a small dashboard with a handful of knobs and toggles, or a kiosk or home-hub screen. It fits products that want tactility and calm over brand color, like audio and camera gear, developer or "pro" tools, and a focus or night mode in a creative app.
- **Doesn't fit:** dense data such as tables, logs or trading screens, where bevels and refraction add noise. It doesn't fit long reading surfaces (keep text on a flat slab), or forms with dozens of fields. It also doesn't fit products that must look identical in Safari and Firefox today, because the refraction is Chromium-only. Brand-led marketing pages that need their own hue are a poor fit too.
- **Not a theme for every surface.** Glass is for controls only. Frames, lists and reading areas are matte clay. If everything is glass, none of it reads as glass.
## The rules
1. **No hue.** Every surface, ink and glow comes from one gray ramp, from `#111` to `#ececec`. There's no accent color. State is never a color.
2. **One light, top-left, everywhere.** The room gradient, slab lips, carved panes, glass rims and dial ticks all agree on it.
3. **Clay is matte, glass is clear.** Clay gets a 1px lit top lip, a dark bottom edge, three outer shadows (contact, mid and ambient) and about 5% grain. Glass gets none of the grain and none of the soft-blur fog.
4. **Panes are carved.** Controls sit in recessed panes cut into the clay frame: a deep inset shadow under the top edge and a faint lit lip at the bottom. The pane holds content for the glass to bend, here a slowly drifting wall of gray tiles (rings, bars, numerals, dots).
5. **Glass bends, it doesn't frost.** Use a squircle-bezel displacement map from Snell's law (n = 1.5) through `backdrop-filter: url(#filter)`. Use at most a 1–1.5px pre-blur on large glass panels and none on small controls. The content behind stays sharp and curves at the edges.
6. **Light sells the glass.** A thin specular rim, strongest on the edges facing the top-left light, is drawn from a second generated image and composited over the refracted backdrop.
7. **Slight dispersion.** Refract red about 9% more and blue about 9% less than green, then recombine with `screen`. The fringe should be visible only where the bezel bends a hard edge behind it. If you can see color on a flat area, it's too strong.
8. **Lit means on.** Selected or on is brighter glass (`rgba(255,255,255,.16)`) plus a soft white glow (`0 0 18px rgba(255,255,255,.22)`). Off is a dark glass tint. Disabled is darker still, with dimmed ink.
9. **Moving parts are glass too.** Toggle knobs, the slider thumb and the segmented thumb are small pieces of glass, so they bend the content as they move. Tracks are carved wells.
10. **Status by shape, not hue.** A lit dot means ok, a hollow ring means warning, and a blinking dot means error. Always pair it with a label.
11. **Dim, engraved ink.** Body text is `#c4c4c4` on clay, engraved with `0 -1px 0 rgba(0,0,0,.7)`. Near-white (`#ececec`) is only for text sitting on glass. Pure white text on the clay breaks the material.
12. **Press squashes.** On `:active`, controls move 1px down and scale to 0.96 with a springy return (`cubic-bezier(.3,1.6,.5,1)`).
## Tokens
```css
:root {
--room: radial-gradient(120% 90% at 15% 0%, #313131 0%, #262626 50%, #1b1b1b 100%);
--ground: #222222;
--text: #c4c4c4; --bright: #ececec; --muted: #7c7c7c;
--engrave: 0 -1px 0 rgba(0,0,0,.7);
--slab: linear-gradient(180deg, #2f2f2f 0%, #2a2a2a 100%);
--raise-slab: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 2px rgba(0,0,0,.35),
0 1px 2px rgba(0,0,0,.7), 0 8px 16px rgba(0,0,0,.35), 0 26px 50px rgba(0,0,0,.5);
--pane-carve: inset 0 2px 3px rgba(0,0,0,.6), inset 6px 8px 18px rgba(0,0,0,.45),
inset 0 -1px 0 rgba(255,255,255,.05);
--tint: rgba(10,10,10,.42); /* glass, off */
--tint-lit: rgba(255,255,255,.16); /* glass, on */
--glow: 0 0 18px rgba(255,255,255,.22), 0 0 2px rgba(255,255,255,.5);
--float: 0 1px 2px rgba(0,0,0,.55), 0 8px 18px rgba(0,0,0,.35), 0 22px 40px rgba(0,0,0,.35);
/* gray wall behind the glass: tile/ink pairs */
--wall-1: #2a2a2a/#d8d8d8; --wall-2: #d0d0d0/#1e1e1e; --wall-3: #3c3c3c/#9a9a9a;
--wall-4: #151515/#bdbdbd; --wall-5: #707070/#141414; --wall-6: #e2e2e2/#555555;
}
```
## The glass filter, briefly
For each control, a script measures its size and radius. It writes a displacement map (a squircle bezel profile run through Snell's law, encoded as red and green offsets around 128) and a specular map (rim alpha from a fixed top-left light) to a canvas. Then it builds one SVG filter:
```html
```
A `ResizeObserver` rebuilds the filter when the control changes size. The full working script is in the UI sheet below. It's adapted from [Liquid glass on the web](https://ayeeye.net/posts/claude-opus/liquid-glass-on-the-web).
**Fallbacks:** Safari and Firefox get `backdrop-filter: blur(12px)` plus an inset top lip and a hairline red-left, blue-right inset edge that stands in for the dispersion. `prefers-reduced-transparency` gets solid clay (`#3a3a3a`). `prefers-reduced-motion` stops the wall drift and the blinking.
## Applied well vs. misapplied
| Idea | Applied well | Misapplied |
|---|---|---|
| No hue | Picked segment is brighter glass with a soft white glow | Picked segment filled with blue, or a gradient |
| Glass on controls only | Matte clay frame, glass play bar and knobs inside a carved pane | Every card, list and modal made of glass, so the page turns to cellophane |
| Refraction, not frost | Gray tiles stay crisp and visibly curve at the bezel | 20px blur that turns the background to mush |
| Slight dispersion | A thin red/blue fringe only where a hard tile edge crosses the bezel | Chromatic aberration across the whole control, or on text |
| One light | Rim highlight, slab lip and room gradient all brighten toward the top-left | Rim on all four sides, drop shadow straight down, room lit from the right |
| Calm | Slow 90s wall drift, one springy press | Pulsing gradients, hover glows on everything, parallax |
## What didn't work
- **Aurora gradient with cyan-to-violet fills** (round 1). It was the generic glassmorphism default and got rejected outright.
- **"Liquid glass" with candy gradient accents** (round 2). The material was better, but the gradients were still too loud.
- **Muted slate with a cyan glow accent** (round 3). It was calmer, but the glass still felt like a frosted plastic sheet.
- **Monochrome gray clay with real refraction** (round 4) was close. It needed the slight RGB split (round 5) to feel like real glass.
- **Red clay** (round 6) was warm and well liked, but they went back to dark gray. With no hue anywhere, the glass fringe is the only color on screen, and that's what makes it read as glass.
## Brand guide
```html example Palette
01 / Palette
One gray ramp, one light
Every surface, ink and glow comes from one gray ramp. Glass has no color of its own. It shows whatever is behind it, with a faint RGB fringe at its edges.
Ground
Room light#313131Room gradient, lit corner
Room#262626Room gradient, middle
Room shadow#1b1b1bRoom gradient, far corner
Slab#2F2F2F → #2A2A2AFrames and big containers
Pane#161616Carved wells, behind the wall
Ink
Bright#ECECECText on glass only
Text#C4C4C4Engraved text on clay
Muted#7C7C7CLabels, captions, mono tags
Glass state (instead of an accent)
Glass, offrgba(10,10,10,.42)Default control tint
Glass, onrgba(255,255,255,.16)Plus glow 0 0 18px rgba(255,255,255,.28)
Gray wall (what the glass bends)
Wall 1#2A2A2A / #D8D8D8
Wall 2#D0D0D0 / #1E1E1E
Wall 3#3C3C3C / #9A9A9A
Wall 4#707070 / #141414
Status (shape, not hue)
OKlit dot
Warninghollow ring
Errorblinking dot
RuleNever add a hue. On is brighter glass and a soft white glow. The only color on screen is the faint RGB fringe the glass makes at its own edges.
```
```html example Type
02 / Type
A neutral sans that doesn't compete with the material
Clay and glass already have a lot of character, so the type stays plain. Text on clay is engraved and slightly dimmed. Text on glass is brighter, with a soft drop shadow so it reads over whatever the glass is bending.
Sans / interface
Inter
Use
Everything: titles, labels, body, buttons
Weights
500 body, 600 controls, 700 headings, 800 display
Tracking
-0.01em body, -0.025em headings, -0.04em display
Fallback
system-ui, -apple-system, Segoe UI, sans-serif
Mono / labels and values
JetBrains Mono
Use
Part labels, readouts (BASS +4 dB), small caps tags
Weights
500
Tracking
+0.04em values, +0.12em uppercase labels
Fallback
ui-monospace, SF Mono, Menlo, monospace
Display 40/44 · 800Studio
Heading 24/30 · 700Listening room settings
Body 14/20 · 500Crossfade blends the end of one track into the next over a few seconds.
On glass 14.5 · 600Continue
Label 10.5 mono · capsToggle / on, off
Mono 12 · 500BASS +4 dB · VOL 64
```
```html example UI sheet | wide
Graphite Glass
One gray ramp and one light from the top-left. Controls are liquid glass that bends the wall behind them, with a rim of light and a slight RGB split at the edges. State is brightness and a white glow, never color.
Button / primary, secondary, disabled
Icon button / round, active, square
Lossless
Crossfade
Toggle / on, off
Segmented
Volume64
Slider / drag or arrow keys
BASS +4 dB
Dial / drag up, down
Input / click to focus
Low TideOstra Collective, 11 songs
Card / image, title, action
Calendar / pick a day
SyncedLow storageUpload failed
Status / lit, ring, blinking
RuleOne light from the top-left. Glass is for controls only and the frames are matte clay. Lit means on. The only hue is the faint fringe the glass makes, so state never depends on color.
```
```html example In use | wide
Listening room
Mill Street, living room · 3 speakers
Studio mode
Low TideOstra Collective · side A, 3 of 6
2:41
Volume64
Crossfade
Night mode
BASS +4 dB
Living room · playingKitchen · weak signal
```
```html example Do and don't
05 / Do and don't
The same segmented control, twice
Both sit on the same gray wall. The first keeps the wall sharp and puts its light on one edge. The second is the common misreading: frosted fog, a candy gradient for "on", and a glow on every side.
Do
VinylStreamRadio
Let the wall stay crisp and bend only at the bezel.
Show "on" with brighter glass and a soft white glow.
Light the rim from the top-left only, with a faint red/blue split at the edges.
Keep glass on controls. The frame around it is matte clay.
Don't
VinylStreamRadio
Don't blur the background into mush. That's frost, not glass.
Don't fill the active state with a second hue or a gradient.
Don't use a white border and glow on all sides. It flattens the lens.
Don't make every surface glass. Lists and text belong on clay.
```
## References
- [Monochrome clay: claymorphism that comes from the lighting, not the color](https://ayeeye.net/posts/leadgen/monochrome-clay-lighting): the lighting model, the three-shadow stack, carved wells, engraved dim text and grain. This guide keeps all of it and uses clay as the body around the glass.
- [Liquid glass on the web: refraction, not blur](https://ayeeye.net/posts/claude-opus/liquid-glass-on-the-web): squircle bezel, Snell's law displacement map, specular rim, Chromium-only caveat. The UI sheet's glass script is adapted from its demo, with RGB dispersion added.
- [Anti-vibe-coded UI](https://ayeeye.net/posts/claude-opus/anti-vibe-coded-ui): the hub's baseline. The first round of this look was exactly the purple-gradient default that guide warns about.
- [Apple: Liquid Glass (WWDC 2025 newsroom)](https://www.apple.com/newsroom/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/): the material this approximates.
- [MDN: feDisplacementMap](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDisplacementMap): the filter primitive behind the refraction and the per-channel dispersion.