Materials

Overview

Materials cover how surfaces lift, how corners round, and how scroll edges soften. Shadows use elevation levels 100–400, exposed as shadow-sm through shadow-xl, plus a dedicated hairline edge. Radius runs from 2xs to 4xl. Glass pairs masked backdrop-blur-md with a surface tint gradient.

Shadow scale

Four elevation levels plus a hairline edge token.

Component mapping

Pick elevation from the role of the surface, not from visual preference alone.

Shadow and hairline

Elevation and edge are separate tokens. Choose based on whether the surface floats or sits flat in the layout.

Prefer one clear edge treatment — hairline or border — unless the pattern needs both with shadow-lg.

Hover states

Increasing elevation on hover signals that a surface is interactive.

<div className="shadow-sm hover:shadow-md active:shadow-sm transition-shadow">
  Card content
</div>

Radius

Prefer these corner radii over arbitrary rounded-[…] values.

Nested radius

When a rounded child sits inside a padded, rounded parent, keep curves concentric: inner = outer − padding. Pick the nearest lower scale step when the result is not exact.

{/* Select popup: rounded-md + p-1 → items use rounded-xs */}
<div className="rounded-md border p-1">
  <button type="button" className="rounded-xs px-2.5 py-1.5">
    Apple
  </button>
</div>

Glass

Soften content as it scrolls under sticky chrome. Stack a masked blur with a tint gradient — not a solid translucent bar. Prefer EdgeFade so top and bottom edges stay consistent.

Composition

Two absolute layers behind the chrome. Blur and tint share one mask so they ease out together — separate fade curves read as a milky wash. Tint uses from-surface/80 via-surface/40 to-transparent (or background-primary on the page canvas). Avoid overflow: hidden on ancestors of the fade or backdrop-filter may not sample the scrolling content.

import { EdgeFade } from "@/components/edge-fade"

<div className="sticky top-0 z-10">
  <div className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[calc(100%+0.75rem)]">
    <EdgeFade edge="top" tone="surface" />
  </div>
  <div className="relative px-5 pt-5 pb-4">
    {/* sticky chrome */}
  </div>
</div>

{/* Bottom edge — pin to the scroll viewport */}
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-12">
  <EdgeFade edge="bottom" tone="surface" />
</div>

Add bottom padding on the scroll content so the last items can clear the fade (about the same height as the bottom edge).