# Skeuomorphism

Also called: skeuomorphic design, realistic UI, iOS 6 style, leather and linen UI, skeuomorph revival  
Era: 2007-2013 (iPhone to iOS 6); revival interest 2023 onward  
Page: https://designforai.dev/style/skeuomorphism

## Traits

- interfaces imitate physical materials: leather, linen, brushed metal, wood, glass, paper
- realistic lighting: gradients that model a light from the top, highlights and drop shadows
- stitched borders, embossed text, bevelled buttons, knobs and toggles that look mechanical
- textures via repeating images or SVG noise; nothing is flat
- objects behave physically: pages curl, switches slide, dials rotate
- strong depth ordering with multiple shadow layers
- warm, tactile colour: tan, dark brown, steel grey, felt green

Palette: #3b2a1e leather brown, #d9c8a9 stitching, #b8b8b8 brushed metal, #f4efe4 paper, #1f1f1f text, #2f6b3a felt green

Type: Helvetica-like (Arimo, Work Sans) for UI, Marker Felt-style is commercial; use Lora or Georgia for "paper" content; sizes 15-17px UI, 20px paper; text often embossed with a 1px white text-shadow below

## Do

- model one light source top-left and keep every gradient, highlight and shadow consistent with it
- use textures from SVG noise or small tiling images; keep each under 20KB
- make controls look like their physical counterpart (a real toggle, a real dial) and animate them physically

## Don't

- do not mix material metaphors on one panel; leather nav with metal buttons is fine, leather buttons on metal is not
- do not use flat icons; icons need the same lighting as the surfaces
- do not use it site-wide for reading content; reserve for controls and chrome, keep text on plain paper

Known for it: iOS 6 (Notes, Game Center, Find My Friends), Apple Podcasts 2012, Things 2, Garageband

## CSS seed

```css
:root{--bg:#3b2a1e; --paper:#f4efe4; --fg:#1f1f1f; --metal:linear-gradient(#e6e6e6,#a8a8a8); --stitch:#d9c8a9; --radius:10px; --shadow:0 2px 4px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.4); --font:'Work Sans',sans-serif}
```

## Prompt

Build the site in skeuomorphic style. Nav and footer are dark leather: background #3b2a1e with an SVG noise texture (feTurbulence baseFrequency 0.8, opacity 0.15), a dashed 1px #d9c8a9 stitched line inset 6px from the edge, and inset 0 1px 0 rgba(255,255,255,0.15) for a top highlight. Content panels are paper #f4efe4 with a faint horizontal-line texture and box-shadow 0 3px 8px rgba(0,0,0,0.45). Buttons are brushed metal: linear-gradient(#ececec,#a8a8a8), 1px border #6b6b6b, border-radius 10px, inset 0 1px 0 rgba(255,255,255,0.7), text #1f1f1f embossed with text-shadow 0 1px 0 rgba(255,255,255,0.6); active state flips to inset shadow. Toggles look like real switches with a sliding knob (200ms ease-out). Font Work Sans at 16px for UI, Lora at 19px for paper content. One light source top-left in every gradient. No flat icons; icons get a gradient fill and a 1px bottom highlight.