Skeuomorphism

Live preview base style — press Wear

This month

$2,100

Revenue, up 12% from last month.

Customer	Plan	Status	MRR
Northwind	Studio	Active	$1,240
Acme Labs	Team	Trial	$0
Kaldi Coffee	Studio	Active	$860

Use this style 16 tokens

--bg oklch(86% 0.012 78)
--fg oklch(24% 0.02 52)
--muted oklch(44% 0.025 60)
--surface oklch(95% 0.055 97)
--surface-2 oklch(89% 0.02 80)
--border oklch(62% 0.04 62)
--accent oklch(52% 0.15 252)
--accent-fg oklch(99% 0 0)
--focus oklch(60% 0.18 252)

Token	Value
--font-body	`'Helvetica Neue', Helvetica, Arial, sans-serif`
--font-display	`'Lora', Georgia, 'Times New Roman', serif`
--font-mono	`'Courier New', Courier, monospace`
--radius	`8px`
--radius-sm	`6px`
--shadow	`0 1px 0 oklch(100% 0 0 / 0.65) inset, 0 2px 4px oklch(20% 0.02 60 / 0.35)`
--shadow-lg	`0 18px 40px oklch(15% 0.02 60 / 0.55)`

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,700;1,500&display=swap');

:root {
	--bg: oklch(86% 0.012 78);
	--fg: oklch(24% 0.02 52);
	--muted: oklch(44% 0.025 60);
	--surface: oklch(95% 0.055 97);
	--surface-2: oklch(89% 0.02 80);
	--border: oklch(62% 0.04 62);
	--accent: oklch(52% 0.15 252);
	--accent-fg: oklch(99% 0 0);
	--focus: oklch(60% 0.18 252);
	--font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-display: 'Lora', Georgia, 'Times New Roman', serif;
	--font-mono: 'Courier New', Courier, monospace;
	--radius: 8px;
	--radius-sm: 6px;
	--shadow: 0 1px 0 oklch(100% 0 0 / 0.65) inset, 0 2px 4px oklch(20% 0.02 60 / 0.35);
	--shadow-lg: 0 18px 40px oklch(15% 0.02 60 / 0.55);
}

Where it came from

Origin: Apple iOS 1–6, early macOS apps

The word comes from Greek skeuos (container, tool) and morphē (shape). Apple pushed it hardest under Steve Jobs and Scott Forstall: stitched leather in Calendar, a wooden shelf in iBooks, green felt in Game Center. When touchscreens were new, real-world metaphors told people what they could tap. iOS 7 (2013) replaced it with flat design almost overnight.

How to spot it

Photorealistic textures: leather, wood grain, paper, felt, metal
Bevels, gloss highlights and deep drop shadows
Physical metaphors — knobs, switches, torn paper edges, stitching
Dense detail with little empty space

Trade-offs

Strengths	Weaknesses
Instantly understandable for first-time users	Visually heavy and slow to scan
Strong affordances — it is obvious what can be pressed	Ages quickly as the referenced objects disappear
Warm, crafted personality	Hard to scale across screen sizes and densities

In the wild

iOS 6 Notes (yellow legal pad)
iBooks wooden bookshelf
Audio plugins with knobs and VU meters

Use it when

The digital tool maps directly onto a physical one people already know, like a synth, camera or notebook.