Exploded view

Nothing here is 3D. Each “moulded” button is a flat stack of SVG sheets, and the “machined” console is nested rounded rectangles. Tilt the camera, then drag Explode to lift the layers apart — slide it back to 0 and the illusion snaps together.

A button · 8 shapes

the real thing →
Button
State
1
2
3
4
5
6
7
8
  1. 8

    Press shadow · the depth

    An inner-shadow ring that fades in only while held. It stays at the socket centre as the cap drops, so the cap reads as sunk beneath the rim.

  2. 7

    Light · the symbol

    The crisp icon path itself. Off, an inner-shadow filter (dy 4, blur 2) engraves it into the cap; lit, it flips to the bright light colour and sits sharply on top of its own glow.

  3. 6

    Glow · the halo

    A blurred duplicate of the symbol (Gaussian blur, stdDev 2) laid behind the sharp icon. Only painted when lit — it is the soft bloom that sells a back-lit LED. Off, it is gone; here it stays faintly so you can see the layer.

  4. 5

    Divot · cap · dish

    The top disc (r35) with a radial gradient — bright near the lower centre, fading dark outward — dishing a concave thumb-rest into the cap.

  5. 4

    Peak · cap · gloss

    A slightly smaller disc (r36) banded light→dark→light. That bright-dim-bright strip is the specular streak of a glossy domed top.

  6. 3

    Slope · cap · edge

    The cap’s bottom bevel (r38): a hue gradient, darker low and lighter high, with a mid-tone stroke. It reads as the chamfered side wall of the cap.

  7. 2

    Hole · socket · gap

    A near-black circle (r39) laid over the bezel. Painting a smaller dark disc on the lighter one is the entire trick that carves the recess.

  8. 1

    Bezel · socket · slope

    One grey circle (r46) with a top-dark→bottom-light gradient, so the rim looks like it catches light along its lower lip. Never coloured. Home adds a second hairline ring.

  9. Drag Explode to 0: six flat sheets plus the glyph’s two coats — a soft glow under a sharp light — stack into the one moulded button your eye reads.

The console · 6 layers

1
2
3
4
5
6
  1. 6

    Caps · the keys

    Each button’s moving half — coloured cap, bevels, divot and engraved glyph — plus the pill toggles. This is the part your thumb pushes down into the socket below it.

  2. 5

    Sockets · the holes

    Each button’s fixed half: the metal bezel ring and the dark recess, printed flush into the face. These never move and never take the button colour — the same socket layer as the button above.

  3. 4

    LCD module · bezel ▸ frame ▸ glass

    Its own nested stack: a plastic bezel, a recessed metallic frame, then the e-ink glass — three rings deep before a single pixel is drawn.

  4. 3

    Face · the panel

    The light-grey panel (#d9d9d9) the controls are printed on. A 1px border plus radius is all it takes to sell a milled metal plate.

  5. 2

    Housing · the seam

    A dark inlay (#3a3939) inset a few pixels. You only ever see it as the thin black seam between the shell and the face — enough to imply a moulded gap.

  6. 1

    Stage · the shell

    The outer shell: a blue vertical gradient with a 15px radius. Only its top edge clears the fold — that sliver is the “lip” you grab to hide the console.

  7. Same trick all the way down: the buttons split into the very socket + cap you saw above, so the “console” is just sheets stacked on sheets.