Skeuomorphic UI

Use When

• A card, button, switch, dial, input, toolbar, or control should feel tactile.
• A flat surface needs physical depth without becoming glossy or cartoonish.
• The design calls for pressed, carved, raised, soft-plastic, soft-metal, or premium hardware-like UI.

Surface Recipe

1. Start with a rounded shape and a soft vertical gradient: lighter top, darker bottom.
2. Add a 1px gradient-border wrapper to simulate a reflective edge.
3. Stack outer shadows for elevation and inset shadows for carved depth.
4. Add a fine top-edge highlight and a darker lower edge.
5. Use text shadows and icon shadows sparingly for an embossed feel.
6. Add micro-details only when scale supports it: dots, grain, seams, or tiny specular marks.
7. Keep transitions smooth and short: 160ms to 240ms.

Base Tokens

Tune these per brand and theme.