---
tags: [design-philosophy, ui, css, claymorphism, neumorphism, dark-mode]
slug: monochrome-clay-lighting
description: A tested CSS recipe for monochrome claymorphism that feels like a physical material, built from lighting and shadows instead of color.
---

# Monochrome clay: claymorphism that comes from the lighting, not the color

Most "claymorphism" output reads as candy: pastel fills, hue-tinted glow shadows and a big soft blur. It looks generated. The version that feels like real, tactile, skeuomorphic material uses no color at all. It is one gray, lit by one light, with physically plausible shadows. This recipe got there after a user rejected five other versions (saturated candy, chalky flat, plain monochrome, violet glossy neumorphism, monochrome with one accent). The note that unlocked it was "focus more on the lighting and shadows, I want that guttural skeuomorphism, clay, material feeling."

## When this applies

Use it for tools people return to and touch a lot: a search-and-filter app, a dashboard with a handful of controls, a media or hardware-style controller, or a settings panel. It works when the screen has a few physical-feeling controls and one main surface, and when calm is worth more than brand color.

It isn't for dense data screens (tables with dozens of columns, trading terminals), where the shadows eat space and the bevels add noise. It isn't for brand-led marketing pages that need a hue. Text-heavy reading surfaces should stay flat, apart from the frame around them. Accessibility is part of the brief: depth alone doesn't carry meaning for everyone, so pair every raised or carved state with a label, `aria-pressed` or `aria-checked`, and a visible focus ring.

## The rules

1. **No color.** Use one gray ramp. State is shown by depth, not hue: what's picked is raised and lit, and the rest sinks into wells. A single accent color immediately reads as a UI kit.
2. **One light source, top-left, everywhere.** Every highlight, shadow and gradient agrees on it.
3. **Raised faces are curved, not flat.** Use a radial gradient whose bright spot sits near the top-left edge and falls off across the face. A flat fill with a drop shadow reads as a card, not a lump.
4. **Edges catch light.** A 1px bright lip along the top (`inset 0 1px 0`) and a dark edge along the bottom (`inset 0 -2px 2px`) sell the bevel more than any blur does.
5. **Inner volume.** One soft inset highlight from the top-left and one soft inset shade from the bottom-right make the shape puff.
6. **Three outer shadows, not one.** Use a tight dark contact shadow (`0 1px 2px`), a mid shadow, and a wide soft ambient shadow, plus a faint light "bounce" toward the light. One big blurred shadow is what makes neumorphism look fake.
7. **Wells are carved.** Put a darker vertical gradient inside, a deep inset shadow under the top edge, a faint lit inset on the bottom-right, and a 1px lit lip just below the outer edge.
8. **Engraved text.** In dark mode use `text-shadow: 0 -1px 0 rgba(0,0,0,.7)`; in light mode use `0 1px 0 rgba(255,255,255,.85)`.
9. **Matte grain.** An SVG `feTurbulence` noise overlay at about 5% opacity stops it looking like plastic.
10. **Light the room.** The page background is a large radial gradient that's brighter toward the light source and darker in the far corner.
11. **Dim the text in dark mode.** Near-white text on dark clay is too bright and breaks the material. Use about `#b4b4b4` on `#282828`, with muted text around `#7a7a7a`.
12. **Big surfaces get less lighting.** A long list or slab with the full radial hotspot and bounce glow looks blown out. Give large containers an almost flat vertical gradient plus the edge lip and outer shadows only. Keep the full curved lighting for small objects like buttons, pills, tabs and checkboxes.
13. **Pressing squashes.** On `:active`, swap the button to the well background and pressed shadow, and nudge it 1px down.

## Tokens (dark, the main look)

```css
:root[data-theme="dark"] {
  --ground: #282828;
  --room: radial-gradient(120% 90% at 15% 0%, #313131 0%, #282828 50%, #1e1e1e 100%);
  --text: #b4b4b4;
  --muted: #7a7a7a;
  --engrave: 0 -1px 0 rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04);
  --groove: rgba(0,0,0,.45);            /* row divider */
  --groove-hi: rgba(255,255,255,.035);  /* lit lip under the divider */
  --face:    radial-gradient(140% 160% at 25% 0%, #424242 0%, #2e2e2e 45%, #212121 100%);
  --face-hi: radial-gradient(140% 160% at 25% 0%, #555555 0%, #3a3a3a 45%, #2a2a2a 100%); /* picked */
  --well: linear-gradient(180deg, #1c1c1c 0%, #222 60%, #262626 100%);
  --slab: linear-gradient(180deg, #303030 0%, #2b2b2b 100%);   /* big containers */
  --raise:
    inset 0 1px 0 rgba(255,255,255,.09), inset 0 -2px 2px rgba(0,0,0,.4),
    inset 10px 12px 20px rgba(255,255,255,.03), inset -10px -14px 24px 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),
    -8px -8px 24px rgba(255,255,255,.025);
  --raise-sm:
    inset 0 1px 0 rgba(255,255,255,.1), inset 0 -2px 2px rgba(0,0,0,.4),
    inset 4px 5px 8px rgba(255,255,255,.035), inset -4px -6px 10px rgba(0,0,0,.3),
    0 1px 2px rgba(0,0,0,.75), 0 4px 8px rgba(0,0,0,.4), 0 12px 22px rgba(0,0,0,.4),
    -5px -5px 12px rgba(255,255,255,.025);
  --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);
  --press:
    inset 0 2px 3px rgba(0,0,0,.65), inset 5px 7px 14px rgba(0,0,0,.5),
    inset -4px -5px 10px rgba(255,255,255,.03), 0 1px 0 rgba(255,255,255,.06);
}
```

## Tokens (light)

```css
:root {
  --ground: #e4e4e4;
  --room: radial-gradient(120% 90% at 15% 0%, #f1f1f1 0%, #e4e4e4 50%, #d6d6d6 100%);
  --text: #343434;
  --muted: #7c7c7c;
  --engrave: 0 1px 0 rgba(255,255,255,.85);
  --groove: rgba(0,0,0,.07);
  --groove-hi: rgba(255,255,255,.8);
  --face:    radial-gradient(140% 160% at 25% 0%, #fbfbfb 0%, #ececec 45%, #dcdcdc 100%);
  --face-hi: radial-gradient(140% 160% at 25% 0%, #fff 0%, #f5f5f5 45%, #e6e6e6 100%);
  --well: linear-gradient(180deg, #d8d8d8 0%, #e2e2e2 60%, #e6e6e6 100%);
  --slab: linear-gradient(180deg, #eee 0%, #e8e8e8 100%);
  --raise:
    inset 0 1px 0 #fff, inset 0 -2px 2px rgba(0,0,0,.06),
    inset 10px 12px 20px rgba(255,255,255,.55), inset -10px -14px 24px rgba(0,0,0,.07),
    0 1px 2px rgba(0,0,0,.2), 0 8px 16px rgba(0,0,0,.08), 0 26px 50px rgba(0,0,0,.13),
    -10px -10px 26px rgba(255,255,255,.85);
  --raise-sm:
    inset 0 1px 0 #fff, inset 0 -2px 2px rgba(0,0,0,.07),
    inset 4px 5px 8px rgba(255,255,255,.6), inset -4px -6px 10px rgba(0,0,0,.07),
    0 1px 2px rgba(0,0,0,.22), 0 4px 8px rgba(0,0,0,.1), 0 12px 22px rgba(0,0,0,.1),
    -6px -6px 14px rgba(255,255,255,.85);
  --raise-slab:
    inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 2px rgba(0,0,0,.05),
    0 1px 2px rgba(0,0,0,.18), 0 8px 16px rgba(0,0,0,.07), 0 26px 50px rgba(0,0,0,.11);
  --press:
    inset 0 2px 3px rgba(0,0,0,.16), inset 5px 7px 14px rgba(0,0,0,.11),
    inset -4px -5px 10px rgba(255,255,255,.85), 0 1px 0 rgba(255,255,255,.95);
}
```

## Applying it

```css
body { background: var(--room) fixed; color: var(--text); text-shadow: var(--engrave); }
body::after { /* grain */
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.btn          { border: 0; border-radius: 18px; background: var(--face); box-shadow: var(--raise-sm); }
.btn:active   { background: var(--well); box-shadow: var(--press); transform: translateY(1px) scale(.98); }
.field        { border: 0; border-radius: 22px; background: var(--well); box-shadow: var(--press); }
.pill         { background: var(--well); box-shadow: var(--press); color: var(--muted); }
.pill.on      { background: var(--face-hi); box-shadow: var(--raise-sm); color: var(--text); }
.tabs         { background: var(--well); box-shadow: var(--press); }      /* tray */
.tabs .thumb  { background: var(--face-hi); box-shadow: var(--raise-sm); } /* sliding raised tab */
.list         { border-radius: 28px; background: var(--slab); box-shadow: var(--raise-slab); }
.list .row + .row { border-top: 1px solid var(--groove); box-shadow: inset 0 1px 0 var(--groove-hi); }
```

Use chunky radii (18–28px), no borders anywhere (a border flattens the bevel), and a rounded or neutral sans. A checked checkbox is just a tiny raised `--face-hi` square with an engraved tick.

## Applied well vs. misapplied

- **Well:** a filter row where the picked trade is a lit, raised pill and the others sit carved into the surface. You can tell what's on with the color turned off. **Misapplied:** the same row with a colored fill on the picked pill. That's a UI kit with shadows added.
- **Well:** a results list on an evenly lit slab, rows split by a dark groove with a 1px lit lip under it. **Misapplied:** every row its own raised card with full curved lighting. The page turns to bubble wrap and the data gets lost.
- **Well:** dark mode text at about `#b4b4b4`, engraved. **Misapplied:** `#fff` text with a glow. It floats above the clay instead of being cut into it.
- **Well:** the light comes from the top-left on every element, including the page background. **Misapplied:** mixed light directions copied from different kits, so nothing looks like it sits in one room.

## What didn't work

- **Candy pastels with hue-tinted shadows** (the common claymorphism recipe): toy-like and glowing.
- **Chalky flat fills with faint shadows**: no volume.
- **A single soft dual shadow** (classic neumorphism, `8px 8px 16px dark, -8px -8px 16px light`): reads as a fog around a flat shape.
- **Glossy violet active states with a silver CTA**: rejected hard.
- **One accent color on a monochrome base**: turned it back into a generic kit.
- **Full radial lighting on a big list**: blown-out hotspot. See rule 12.

## Brand guide

```html example Palette
<!doctype html><meta charset="utf-8"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&display=swap">
<style>
:root{
--ground:#282828;--text:#b4b4b4;--muted:#7a7a7a;--faint:#5c5c5c;
--room:radial-gradient(120% 90% at 15% 0%,#313131 0%,#282828 50%,#1e1e1e 100%);
--engrave:0 -1px 0 rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.04);
--groove:rgba(0,0,0,.45);--groove-hi:rgba(255,255,255,.035);
--face:radial-gradient(140% 160% at 25% 0%,#424242 0%,#2e2e2e 45%,#212121 100%);
--face-hi:radial-gradient(140% 160% at 25% 0%,#555 0%,#3a3a3a 45%,#2a2a2a 100%);
--well:linear-gradient(180deg,#1c1c1c 0%,#222 60%,#262626 100%);
--slab:linear-gradient(180deg,#303030 0%,#2b2b2b 100%);
--raise:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -2px 2px rgba(0,0,0,.4),inset 10px 12px 20px rgba(255,255,255,.03),inset -10px -14px 24px 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),-8px -8px 24px rgba(255,255,255,.025);
--raise-sm:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 2px rgba(0,0,0,.4),inset 4px 5px 8px rgba(255,255,255,.035),inset -4px -6px 10px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.75),0 4px 8px rgba(0,0,0,.4),0 12px 22px rgba(0,0,0,.4),-5px -5px 12px rgba(255,255,255,.025);
--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);
--press:inset 0 2px 3px rgba(0,0,0,.65),inset 5px 7px 14px rgba(0,0,0,.5),inset -4px -5px 10px rgba(255,255,255,.03),0 1px 0 rgba(255,255,255,.06);
}
*{box-sizing:border-box}
html,body{margin:0;background:#282828}
body{background:var(--room);color:var(--text);font:500 14px/1.4 Nunito,ui-rounded,system-ui,sans-serif;text-shadow:var(--engrave);-webkit-font-smoothing:antialiased;padding:28px;min-height:100vh;position:relative}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h3{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.m{color:var(--muted);font-size:12px;font-weight:700}
.btn{font:inherit;font-weight:800;min-height:42px;padding:0 20px;border:0;border-radius:18px;background:var(--face);color:var(--text);text-shadow:var(--engrave);box-shadow:var(--raise-sm);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:active:not(:disabled){transform:translateY(1px) scale(.98);background:var(--well);box-shadow:var(--press)}
.btn.p{background:var(--face-hi)}
.btn:disabled{opacity:.4;cursor:default}
.well{background:var(--well);box-shadow:var(--press)}
.raised{background:var(--face);box-shadow:var(--raise-sm)}
.lit{background:var(--face-hi);box-shadow:var(--raise-sm)}
.slab{background:var(--slab);box-shadow:var(--raise-slab);border-radius:24px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;margin-bottom:22px}
.sw{border-radius:20px;padding:12px;background:var(--slab);box-shadow:var(--raise-slab)}
.chip{height:62px;border-radius:14px;margin-bottom:10px}
.sw b{display:block;font-size:13px}.sw code{font-size:11px;color:var(--muted)}
.sw p{margin:4px 0 0;font-size:11px;color:var(--muted)}
.rule{padding:14px 18px;border-radius:18px;font-weight:700}
.led{width:14px;height:14px;border-radius:50%;display:inline-block;box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.7)}
</style>
<h3>Ground</h3>
<div class="grid">
 <div class="sw"><div class="chip" style="background:#1e1e1e;box-shadow:var(--press)"></div><b>Shadow corner</b><code>#1e1e1e</code><p>Far edge of the room light</p></div>
 <div class="sw"><div class="chip" style="background:#282828;box-shadow:var(--press)"></div><b>Ground</b><code>#282828</code><p>Page, the clay itself</p></div>
 <div class="sw"><div class="chip" style="background:var(--well);box-shadow:var(--press)"></div><b>Well</b><code>#1c1c1c → #262626</code><p>Carved fields, trays, off states</p></div>
 <div class="sw"><div class="chip" style="background:var(--face);box-shadow:var(--raise-sm)"></div><b>Face</b><code>#424242 → #212121</code><p>Raised objects, lit top-left</p></div>
 <div class="sw"><div class="chip" style="background:var(--face-hi);box-shadow:var(--raise-sm)"></div><b>Face, picked</b><code>#555 → #2a2a2a</code><p>Selected, primary</p></div>
 <div class="sw"><div class="chip" style="background:var(--slab);box-shadow:var(--raise-slab)"></div><b>Slab</b><code>#303030 → #2b2b2b</code><p>Big containers, lists</p></div>
</div>
<h3>Ink</h3>
<div class="grid">
 <div class="sw"><div class="chip" style="background:#b4b4b4"></div><b>Text</b><code>#b4b4b4</code><p>Dim on purpose, never white</p></div>
 <div class="sw"><div class="chip" style="background:#7a7a7a"></div><b>Muted</b><code>#7a7a7a</code><p>Labels, meta, off states</p></div>
 <div class="sw"><div class="chip" style="background:#5c5c5c"></div><b>Faint</b><code>#5c5c5c</code><p>Ticks, disabled</p></div>
</div>
<h3>Status only</h3>
<div class="grid">
 <div class="sw"><span class="led" style="background:#7fa58a"></span> <b style="display:inline">OK</b> <code>#7fa58a</code><p>Tiny LEDs only</p></div>
 <div class="sw"><span class="led" style="background:#b8a06a"></span> <b style="display:inline">Warn</b> <code>#b8a06a</code><p>Tiny LEDs only</p></div>
 <div class="sw"><span class="led" style="background:#b97272"></span> <b style="display:inline">Error</b> <code>#b97272</code><p>Tiny LEDs only</p></div>
</div>
<div class="rule well">The rule: state is depth, not hue. Picked things rise and catch light, the rest sinks. Color appears only as a pea-sized status LED.</div>
```

```html example Type
<!doctype html><meta charset="utf-8"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&display=swap">
<style>
:root{
--ground:#282828;--text:#b4b4b4;--muted:#7a7a7a;--faint:#5c5c5c;
--room:radial-gradient(120% 90% at 15% 0%,#313131 0%,#282828 50%,#1e1e1e 100%);
--engrave:0 -1px 0 rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.04);
--groove:rgba(0,0,0,.45);--groove-hi:rgba(255,255,255,.035);
--face:radial-gradient(140% 160% at 25% 0%,#424242 0%,#2e2e2e 45%,#212121 100%);
--face-hi:radial-gradient(140% 160% at 25% 0%,#555 0%,#3a3a3a 45%,#2a2a2a 100%);
--well:linear-gradient(180deg,#1c1c1c 0%,#222 60%,#262626 100%);
--slab:linear-gradient(180deg,#303030 0%,#2b2b2b 100%);
--raise:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -2px 2px rgba(0,0,0,.4),inset 10px 12px 20px rgba(255,255,255,.03),inset -10px -14px 24px 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),-8px -8px 24px rgba(255,255,255,.025);
--raise-sm:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 2px rgba(0,0,0,.4),inset 4px 5px 8px rgba(255,255,255,.035),inset -4px -6px 10px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.75),0 4px 8px rgba(0,0,0,.4),0 12px 22px rgba(0,0,0,.4),-5px -5px 12px rgba(255,255,255,.025);
--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);
--press:inset 0 2px 3px rgba(0,0,0,.65),inset 5px 7px 14px rgba(0,0,0,.5),inset -4px -5px 10px rgba(255,255,255,.03),0 1px 0 rgba(255,255,255,.06);
}
*{box-sizing:border-box}
html,body{margin:0;background:#282828}
body{background:var(--room);color:var(--text);font:500 14px/1.4 Nunito,ui-rounded,system-ui,sans-serif;text-shadow:var(--engrave);-webkit-font-smoothing:antialiased;padding:28px;min-height:100vh;position:relative}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h3{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.m{color:var(--muted);font-size:12px;font-weight:700}
.btn{font:inherit;font-weight:800;min-height:42px;padding:0 20px;border:0;border-radius:18px;background:var(--face);color:var(--text);text-shadow:var(--engrave);box-shadow:var(--raise-sm);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:active:not(:disabled){transform:translateY(1px) scale(.98);background:var(--well);box-shadow:var(--press)}
.btn.p{background:var(--face-hi)}
.btn:disabled{opacity:.4;cursor:default}
.well{background:var(--well);box-shadow:var(--press)}
.raised{background:var(--face);box-shadow:var(--raise-sm)}
.lit{background:var(--face-hi);box-shadow:var(--raise-sm)}
.slab{background:var(--slab);box-shadow:var(--raise-slab);border-radius:24px}

.row{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;padding:16px 20px;border-top:1px solid var(--groove);box-shadow:inset 0 1px 0 var(--groove-hi)}
.row:first-child{border-top:0;box-shadow:none}
.spec{padding:20px 22px;margin-bottom:22px}
.spec .big{font-size:44px;font-weight:900;letter-spacing:-.02em;line-height:1}
.meta{display:grid;grid-template-columns:repeat(4,auto);gap:4px 22px;margin-top:12px;font-size:12px}
.meta span{color:var(--muted)}
</style>
<div class="slab spec">
 <div class="big">Rounded sans, engraved</div>
 <div class="meta"><span>Use</span><span>Weights</span><span>Tracking</span><span>Fallback</span>
 <b>All UI text (one family)</b><b>500 / 700 / 800 / 900</b><b>-0.02em display, 0 body, +0.08em caps labels</b><b>ui-rounded, system-ui</b></div>
 <p class="m" style="margin-top:12px">Any rounded or neutral sans works; Nunito shown. Every line carries the engrave shadow so letters read as cut into the clay.</p>
</div>
<div class="slab" style="padding:4px 0">
 <div class="row"><span class="m">Display 32 / 900</span><span style="font-size:32px;font-weight:900;letter-spacing:-.02em">Library</span></div>
 <div class="row"><span class="m">Heading 22 / 900</span><span style="font-size:22px;font-weight:900">1,204 recordings</span></div>
 <div class="row"><span class="m">Body 15 / 500</span><span style="font-size:15px">Field kit · 48 kHz · 3 min</span></div>
 <div class="row"><span class="m">Label 12 / 800 caps</span><span style="font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)">Stereo</span></div>
 <div class="row"><span class="m">Numbers 15 / 800 tabular</span><span style="font-size:15px;font-weight:800;font-variant-numeric:tabular-nums">04:12:09</span></div>
</div>
```

```html example UI sheet
<!doctype html><meta charset="utf-8"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&display=swap">
<style>
:root{
--ground:#282828;--text:#b4b4b4;--muted:#7a7a7a;--faint:#5c5c5c;
--room:radial-gradient(120% 90% at 15% 0%,#313131 0%,#282828 50%,#1e1e1e 100%);
--engrave:0 -1px 0 rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.04);
--groove:rgba(0,0,0,.45);--groove-hi:rgba(255,255,255,.035);
--face:radial-gradient(140% 160% at 25% 0%,#424242 0%,#2e2e2e 45%,#212121 100%);
--face-hi:radial-gradient(140% 160% at 25% 0%,#555 0%,#3a3a3a 45%,#2a2a2a 100%);
--well:linear-gradient(180deg,#1c1c1c 0%,#222 60%,#262626 100%);
--slab:linear-gradient(180deg,#303030 0%,#2b2b2b 100%);
--raise:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -2px 2px rgba(0,0,0,.4),inset 10px 12px 20px rgba(255,255,255,.03),inset -10px -14px 24px 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),-8px -8px 24px rgba(255,255,255,.025);
--raise-sm:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 2px rgba(0,0,0,.4),inset 4px 5px 8px rgba(255,255,255,.035),inset -4px -6px 10px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.75),0 4px 8px rgba(0,0,0,.4),0 12px 22px rgba(0,0,0,.4),-5px -5px 12px rgba(255,255,255,.025);
--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);
--press:inset 0 2px 3px rgba(0,0,0,.65),inset 5px 7px 14px rgba(0,0,0,.5),inset -4px -5px 10px rgba(255,255,255,.03),0 1px 0 rgba(255,255,255,.06);
}
*{box-sizing:border-box}
html,body{margin:0;background:#282828}
body{background:var(--room);color:var(--text);font:500 14px/1.4 Nunito,ui-rounded,system-ui,sans-serif;text-shadow:var(--engrave);-webkit-font-smoothing:antialiased;padding:28px;min-height:100vh;position:relative}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h3{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.m{color:var(--muted);font-size:12px;font-weight:700}
.btn{font:inherit;font-weight:800;min-height:42px;padding:0 20px;border:0;border-radius:18px;background:var(--face);color:var(--text);text-shadow:var(--engrave);box-shadow:var(--raise-sm);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:active:not(:disabled){transform:translateY(1px) scale(.98);background:var(--well);box-shadow:var(--press)}
.btn.p{background:var(--face-hi)}
.btn:disabled{opacity:.4;cursor:default}
.well{background:var(--well);box-shadow:var(--press)}
.raised{background:var(--face);box-shadow:var(--raise-sm)}
.lit{background:var(--face-hi);box-shadow:var(--raise-sm)}
.slab{background:var(--slab);box-shadow:var(--raise-slab);border-radius:24px}

.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.part{padding:18px;border-radius:24px;background:var(--slab);box-shadow:var(--raise-slab)}
.part h3{margin-bottom:16px}
.r{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ib{width:46px;height:46px;border:0;border-radius:50%;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.ib.sq{border-radius:14px}
.tg{width:64px;height:34px;border-radius:99px;position:relative;cursor:pointer;border:0;padding:0}
.tg i{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:var(--face);box-shadow:var(--raise-sm);transition:transform .35s cubic-bezier(.34,1.4,.64,1)}
.tg.on i{transform:translateX(30px);background:var(--face-hi)}
.tg.on::after{content:"";position:absolute;left:12px;top:15px;width:5px;height:5px;border-radius:50%;background:#7fa58a;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:5px;gap:4px;border-radius:18px}
.seg .th{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 18px)/3);border-radius:14px;background:var(--face-hi);box-shadow:var(--raise-sm);transition:transform .45s cubic-bezier(.34,1.4,.64,1)}
.seg button{position:relative;font:inherit;font-weight:800;font-size:13px;min-height:34px;border:0;background:none;color:var(--muted);text-shadow:var(--engrave);cursor:pointer}
.seg button.on{color:var(--text)}
.sl{position:relative;height:14px;border-radius:99px;margin:18px 4px 8px}
.sl .fill{position:absolute;inset:3px auto 3px 3px;border-radius:99px;background:linear-gradient(180deg,#3a3a3a,#2c2c2c);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.sl .kn{position:absolute;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--face-hi);box-shadow:var(--raise-sm)}
.dial{width:120px;height:120px;border-radius:50%;margin:6px auto;position:relative;display:grid;place-items:center}
.dial .k{width:84px;height:84px;border-radius:50%;background:var(--face);box-shadow:var(--raise);position:relative}
.dial .k::after{content:"";position:absolute;left:50%;top:10px;width:4px;height:16px;margin-left:-2px;border-radius:2px;background:var(--well);box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.06)}
.ticks{position:absolute;inset:-14px}
.in{width:100%;height:46px;border:0;border-radius:18px;padding:0 16px;font:inherit;font-weight:700;color:var(--text);text-shadow:var(--engrave);background:var(--well);box-shadow:var(--press);margin-bottom:10px;outline:0}
.in::placeholder{color:var(--faint)}
.in.f{box-shadow:var(--press),0 0 0 2px #1c1c1c,0 0 0 3px rgba(255,255,255,.12)}
.cd .img{height:96px;border-radius:16px;background:var(--well);box-shadow:var(--press);display:grid;place-items:center;margin-bottom:12px}
.cd b{display:block;font-size:15px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:11px;font-weight:700}
.cal span{height:26px;display:grid;place-items:center;border-radius:9px;color:var(--muted)}
.cal .dw{color:var(--faint);font-size:10px}
.cal .t{background:var(--face-hi);box-shadow:var(--raise-sm);color:var(--text)}
.cal .x{background:var(--well);box-shadow:var(--press)}
.st{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:14px;margin-bottom:8px;font-weight:700;font-size:13px}
.led{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 1px 1px rgba(255,255,255,.3),0 0 0 2px #1d1d1d,0 1px 0 2px rgba(255,255,255,.05)}
</style>
<div class="sheet">
 <div class="part" data-ui="button"><h3>Button</h3><div class="r"><button class="btn p">Export</button><button class="btn">Cancel</button><button class="btn" disabled>Disabled</button></div></div>
 <div class="part" data-ui="icon-button"><h3>Icon button</h3><div class="r">
  <button class="ib raised" aria-label="Search"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/></svg></button>
  <button class="ib sq raised" aria-label="Add"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></button>
  <button class="ib well" aria-label="Pressed"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z"/></svg></button></div></div>
 <div class="part" data-ui="toggle"><h3>Toggle</h3><div class="r"><button class="tg well on" aria-label="on"><i></i></button><span class="m">On</span><button class="tg well" aria-label="off"><i></i></button><span class="m">Off</span></div></div>
 <div class="part" data-ui="segmented"><h3>Segmented</h3><div class="seg well"><div class="th"></div><button>Low</button><button class="on">Medium</button><button>High</button></div></div>
 <div class="part" data-ui="slider"><h3>Slider · <span id="sv">62</span></h3><div class="sl well"><div class="fill" style="width:62%"></div><div class="kn" style="left:62%"></div></div></div>
 <div class="part" data-ui="dial"><h3>Dial</h3><div class="dial"><svg class="ticks" viewBox="0 0 148 148"><g stroke="#5c5c5c" stroke-width="2" stroke-linecap="round"></g></svg><div class="k" style="transform:rotate(40deg)"></div></div></div>
 <div class="part" data-ui="input"><h3>Input</h3><input class="in" placeholder="Search recordings"><input class="in f" value="harbor at dawn"></div>
 <div class="part cd" data-ui="card"><h3>Card</h3><div class="img"><svg width="64" height="44" viewBox="0 0 64 44"><path d="M4 40l16-18 10 10 8-8 22 16z" fill="#2e2e2e" stroke="#3c3c3c"/><circle cx="46" cy="10" r="5" fill="#333"/></svg></div><b>Harbor at dawn</b><p class="m" style="margin:2px 0 12px">Field recording · 3:12</p><button class="btn p" style="min-height:36px">Open</button></div>
 <div class="part" data-ui="calendar"><h3>October</h3><div class="cal" id="cal"></div></div>
 <div class="part" data-ui="status"><h3>Status</h3>
  <div class="st well"><span class="led" style="background:#7fa58a"></span>Synced 2 min ago</div>
  <div class="st well"><span class="led" style="background:#b8a06a"></span>Rate limited, retrying</div>
  <div class="st well"><span class="led" style="background:#b97272"></span>Source offline</div></div>
</div>
<script>const g=document.querySelector('.ticks g');for(let i=0;i<=10;i++){const a=(-135+i*27)*Math.PI/180,r1=66,r2=i%5?60:57;const l=document.createElementNS('http://www.w3.org/2000/svg','line');l.setAttribute('x1',74+r1*Math.sin(a));l.setAttribute('y1',74-r1*Math.cos(a));l.setAttribute('x2',74+r2*Math.sin(a));l.setAttribute('y2',74-r2*Math.cos(a));g.appendChild(l)}
const c=document.getElementById('cal');c.innerHTML='MTWTFSS'.split('').map(d=>'<span class="dw">'+d+'</span>').join('')+'<span></span><span></span>'+Array.from({length:31},(_,i)=>'<span class="'+(i==22?'t':[6,13,20].includes(i)?'x':'')+'">'+(i+1)+'</span>').join('');
document.querySelectorAll('.tg').forEach(t=>t.onclick=()=>{t.classList.toggle('on');t.nextElementSibling.textContent=t.classList.contains('on')?'On':'Off'});
const seg=document.querySelector('.seg'),th=seg.querySelector('.th');seg.querySelectorAll('button').forEach((b,i)=>{b.onclick=()=>{seg.querySelectorAll('button').forEach(x=>x.classList.remove('on'));b.classList.add('on');th.style.transform='translateX(calc('+i+' * (100% + 4px)))'}});th.style.transform='translateX(calc(100% + 4px))';
const sl=document.querySelector('.sl');sl.onpointerdown=e=>{const m=ev=>{const r=sl.getBoundingClientRect(),v=Math.round(Math.max(0,Math.min(1,(ev.clientX-r.left)/r.width))*100);sl.querySelector('.fill').style.width=v+'%';sl.querySelector('.kn').style.left=v+'%';document.getElementById('sv').textContent=v};m(e);addEventListener('pointermove',m);addEventListener('pointerup',()=>removeEventListener('pointermove',m),{once:true})};</script>
```

```html example In use
<!doctype html><meta charset="utf-8"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&display=swap">
<style>
:root{
--ground:#282828;--text:#b4b4b4;--muted:#7a7a7a;--faint:#5c5c5c;
--room:radial-gradient(120% 90% at 15% 0%,#313131 0%,#282828 50%,#1e1e1e 100%);
--engrave:0 -1px 0 rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.04);
--groove:rgba(0,0,0,.45);--groove-hi:rgba(255,255,255,.035);
--face:radial-gradient(140% 160% at 25% 0%,#424242 0%,#2e2e2e 45%,#212121 100%);
--face-hi:radial-gradient(140% 160% at 25% 0%,#555 0%,#3a3a3a 45%,#2a2a2a 100%);
--well:linear-gradient(180deg,#1c1c1c 0%,#222 60%,#262626 100%);
--slab:linear-gradient(180deg,#303030 0%,#2b2b2b 100%);
--raise:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -2px 2px rgba(0,0,0,.4),inset 10px 12px 20px rgba(255,255,255,.03),inset -10px -14px 24px 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),-8px -8px 24px rgba(255,255,255,.025);
--raise-sm:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 2px rgba(0,0,0,.4),inset 4px 5px 8px rgba(255,255,255,.035),inset -4px -6px 10px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.75),0 4px 8px rgba(0,0,0,.4),0 12px 22px rgba(0,0,0,.4),-5px -5px 12px rgba(255,255,255,.025);
--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);
--press:inset 0 2px 3px rgba(0,0,0,.65),inset 5px 7px 14px rgba(0,0,0,.5),inset -4px -5px 10px rgba(255,255,255,.03),0 1px 0 rgba(255,255,255,.06);
}
*{box-sizing:border-box}
html,body{margin:0;background:#282828}
body{background:var(--room);color:var(--text);font:500 14px/1.4 Nunito,ui-rounded,system-ui,sans-serif;text-shadow:var(--engrave);-webkit-font-smoothing:antialiased;padding:28px;min-height:100vh;position:relative}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h3{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.m{color:var(--muted);font-size:12px;font-weight:700}
.btn{font:inherit;font-weight:800;min-height:42px;padding:0 20px;border:0;border-radius:18px;background:var(--face);color:var(--text);text-shadow:var(--engrave);box-shadow:var(--raise-sm);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:active:not(:disabled){transform:translateY(1px) scale(.98);background:var(--well);box-shadow:var(--press)}
.btn.p{background:var(--face-hi)}
.btn:disabled{opacity:.4;cursor:default}
.well{background:var(--well);box-shadow:var(--press)}
.raised{background:var(--face);box-shadow:var(--raise-sm)}
.lit{background:var(--face-hi);box-shadow:var(--raise-sm)}
.slab{background:var(--slab);box-shadow:var(--raise-slab);border-radius:24px}

.app{max-width:640px;margin:0 auto}
.top{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.top h1{margin:0;font-size:28px;font-weight:900;letter-spacing:-.02em;margin-right:auto}
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;gap:5px;border-radius:20px}
.seg .th{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 7.5px);border-radius:16px;background:var(--face-hi);box-shadow:var(--raise-sm)}
.seg button{position:relative;font:inherit;font-weight:800;font-size:13px;min-height:36px;padding:0 16px;border:0;background:none;color:var(--muted);text-shadow:var(--engrave)}
.seg button.on{color:var(--text)}
.bar{display:flex;gap:12px}
.bar input{flex:1;min-width:0;height:52px;border:0;border-radius:20px;padding:0 18px;font:inherit;font-size:16px;font-weight:700;color:var(--text);text-shadow:var(--engrave);background:var(--well);box-shadow:var(--press);outline:0}
.under{display:flex;gap:10px;align-items:center;margin:14px 2px 0;flex-wrap:wrap}
.pill{font:inherit;font-size:12px;font-weight:800;min-height:32px;padding:0 14px;border:0;border-radius:99px;color:var(--muted);text-shadow:var(--engrave)}
.pill.on{color:var(--text)}
.chk{display:inline-flex;gap:8px;align-items:center;font-size:12px;font-weight:800;color:var(--muted)}
.box{width:22px;height:22px;border-radius:8px;display:grid;place-items:center}
.box.on::after{content:"";width:9px;height:5px;border:3px solid var(--text);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
h2{font-size:22px;font-weight:900;margin:28px 4px 12px}
.list{border-radius:24px;padding:4px 0}
.row{display:flex;align-items:center;gap:12px;padding:11px 20px;border-top:1px solid var(--groove);box-shadow:inset 0 1px 0 var(--groove-hi)}
.row:first-child{border-top:0;box-shadow:none}
.row div{flex:1;min-width:0}.row b{display:block;font-weight:800}
.row .n{font-weight:800;font-variant-numeric:tabular-nums}
</style>
<div class="app">
 <div class="top"><h1>Library</h1><div class="seg well"><div class="th"></div><button class="on">Recordings</button><button>Playlists</button></div></div>
 <div class="bar"><input value="harbor"><button class="btn p" style="min-height:52px;border-radius:20px">Play</button></div>
 <div class="under"><button class="pill lit on">Field</button><button class="pill well">Studio</button><span class="chk"><span class="box lit on"></span>Stereo</span><span class="chk"><span class="box well"></span>Tagged</span></div>
 <h2>14 <span class="m">recordings · 52 min</span></h2>
 <div class="list slab">
  <div class="row"><div><b>Harbor at dawn</b><span class="m">Field · stereo · 48 kHz</span></div><span class="n">3:12</span></div>
  <div class="row"><div><b>Harbor, foghorn</b><span class="m">Field · mono · 44.1 kHz</span></div><span class="n">1:47</span></div>
  <div class="row"><div><b>Harbor rain, close</b><span class="m">Field · stereo · 96 kHz</span></div><span class="n">6:05</span></div>
 </div>
</div>
```

```html example Do and don't
<!doctype html><meta charset="utf-8"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&display=swap">
<style>
:root{
--ground:#282828;--text:#b4b4b4;--muted:#7a7a7a;--faint:#5c5c5c;
--room:radial-gradient(120% 90% at 15% 0%,#313131 0%,#282828 50%,#1e1e1e 100%);
--engrave:0 -1px 0 rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.04);
--groove:rgba(0,0,0,.45);--groove-hi:rgba(255,255,255,.035);
--face:radial-gradient(140% 160% at 25% 0%,#424242 0%,#2e2e2e 45%,#212121 100%);
--face-hi:radial-gradient(140% 160% at 25% 0%,#555 0%,#3a3a3a 45%,#2a2a2a 100%);
--well:linear-gradient(180deg,#1c1c1c 0%,#222 60%,#262626 100%);
--slab:linear-gradient(180deg,#303030 0%,#2b2b2b 100%);
--raise:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -2px 2px rgba(0,0,0,.4),inset 10px 12px 20px rgba(255,255,255,.03),inset -10px -14px 24px 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),-8px -8px 24px rgba(255,255,255,.025);
--raise-sm:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 2px rgba(0,0,0,.4),inset 4px 5px 8px rgba(255,255,255,.035),inset -4px -6px 10px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.75),0 4px 8px rgba(0,0,0,.4),0 12px 22px rgba(0,0,0,.4),-5px -5px 12px rgba(255,255,255,.025);
--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);
--press:inset 0 2px 3px rgba(0,0,0,.65),inset 5px 7px 14px rgba(0,0,0,.5),inset -4px -5px 10px rgba(255,255,255,.03),0 1px 0 rgba(255,255,255,.06);
}
*{box-sizing:border-box}
html,body{margin:0;background:#282828}
body{background:var(--room);color:var(--text);font:500 14px/1.4 Nunito,ui-rounded,system-ui,sans-serif;text-shadow:var(--engrave);-webkit-font-smoothing:antialiased;padding:28px;min-height:100vh;position:relative}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h3{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.m{color:var(--muted);font-size:12px;font-weight:700}
.btn{font:inherit;font-weight:800;min-height:42px;padding:0 20px;border:0;border-radius:18px;background:var(--face);color:var(--text);text-shadow:var(--engrave);box-shadow:var(--raise-sm);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:active:not(:disabled){transform:translateY(1px) scale(.98);background:var(--well);box-shadow:var(--press)}
.btn.p{background:var(--face-hi)}
.btn:disabled{opacity:.4;cursor:default}
.well{background:var(--well);box-shadow:var(--press)}
.raised{background:var(--face);box-shadow:var(--raise-sm)}
.lit{background:var(--face-hi);box-shadow:var(--raise-sm)}
.slab{background:var(--slab);box-shadow:var(--raise-slab);border-radius:24px}

.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.col{padding:20px;border-radius:24px;background:var(--slab);box-shadow:var(--raise-slab)}
.col h3{display:flex;gap:8px;align-items:center}
.stage{height:150px;border-radius:18px;display:grid;place-items:center;margin-bottom:16px;background:var(--room)}
ul{margin:0;padding-left:18px;font-size:13px}li{margin:5px 0}
.bad{border:0;font:inherit;font-weight:800;min-height:44px;padding:0 22px;border-radius:18px;color:#fff;text-shadow:none;
 background:linear-gradient(135deg,#a98bff,#ff8fb1);box-shadow:8px 8px 24px rgba(140,108,255,.45),-8px -8px 24px rgba(255,255,255,.08)}
.flat{border:1px solid #3a3a3a;font:inherit;font-weight:800;min-height:44px;padding:0 22px;border-radius:18px;color:#eee;background:#2b2b2b;box-shadow:8px 8px 16px #1d1d1d,-8px -8px 16px #393939;text-shadow:none}
</style>
<div class="two">
 <div class="col"><h3>Do</h3><div class="stage"><div style="display:flex;gap:14px"><button class="btn p">Export</button><button class="btn well" style="box-shadow:var(--press);background:var(--well)">Off</button></div></div>
 <ul><li>One gray; selection is raised and lit, off is carved in.</li><li>Curved face lit from the top-left, bright 1px top lip, dark bottom edge.</li><li>Three outer shadows: contact, mid, ambient.</li><li>Dim engraved text, no borders.</li></ul></div>
 <div class="col"><h3>Don't</h3><div class="stage"><div style="display:flex;gap:14px"><button class="bad">Export</button><button class="flat">Off</button></div></div>
 <ul><li>Pastel or gradient fills with hue-tinted glow.</li><li>A single blurred dual shadow around a flat fill (it reads as fog).</li><li>Borders on raised shapes; they flatten the bevel.</li><li>Bright white text on dark clay.</li></ul></div>
</div>
```

## References

- https://www.setproduct.com/blog/claymorphism-design-guide: the standard claymorphism recipe (pastel fills, hue-matched 4-layer shadows). Useful for its structure, but its color approach is what this post moves away from.
- https://ayeeye.net/posts/claude-opus/anti-vibe-coded-ui: why default AI styling (purple glow, card kits) reads as generated.
- https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow: stacking multiple inset and outer shadows.
- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence: the noise filter used for the matte grain.