Tactile edges

Grouping

Use proximity, spacing, alignment, and tonal containers to group related content. Minimize divider lines. Give a container one purpose; avoid nested boxes around individual paragraphs.

App bars and sidebars share one continuous surface. Use shape and state for navigation and actions, with underlines reserved for links inside prose when an extra cue is needed.

Surface geometry

Light comes from above. A raised edge has a one-pixel top highlight and a one-pixel lower shadow. An impressed edge reverses that relationship. Keep the surface fill flat: no gloss gradients, blurred halos, or extra rings.

Controls use a 14-pixel radius, compact controls 12 pixels, and larger specimen surfaces 20 pixels. Keep the MD3 shape and state system underneath. Hover increases the lower shadow to two pixels; press moves the edge inside. Focus keeps an independent, visible outline.

Pixel relief

Icon relief is drawn inside the SVG: a one-cell highlight and a one-cell shadow. On a 16-unit icon displayed at 64 pixels, one cell is four CSS pixels. Never add a one-pixel CSS drop shadow to that enlarged artwork. Keep both layers on integer coordinates, use crisp edges, and render at integer scales.

Tokens

The CSS and JSON downloads contain these same values. Apply the raised, impressed, hover, or pressed recipe rather than inventing a new shadow for each component.