Skeuomorphism
Also called: Skeuomorphic UI, Realistic UI, iOS 6 style
Interfaces dressed in real materials — stitched leather, brushed metal, linen, paper and glossy buttons — so every control looks like the object it replaces.
Design keywords
Say these words to ask for this style.
Skeuomorphism borrows the look of physical things so people instantly know how to use them. Toolbars are brushed aluminium with embossed labels, panels are stitched leather, content sits on cream paper over a linen desk, buttons are glossy and bevelled, displays glow like backlit LCDs and labels look like embossed tape. Every material is drawn with gradients, fine textures, inner highlights and real drop shadows. It is warm, tactile and nostalgic — ideal for media, reading and hobby apps that want character.
Best for
- News, magazine and reading apps
- Music, radio and podcast players
- Notes, journals and hobby tools
- Brands with a crafted, heritage personality
Avoid for
- Minimal modern SaaS
- Dense enterprise dashboards
- Low-power devices with many textured layers
✓ Do
- Give each material a job: brushed metal = web toolbar and stat plaques, leather = dashboard sidebar, hero folio, featured plan and CTA, paper = content, linen = desk, wood = feature shelves; keep ≤ 4 large-area materials per screen
- Use one light from the top (slightly left): 1px white top highlight, darker bottom edge, drop shadow falling straight down
- Emboss text on metal with text-shadow 0 1px 0 rgba(255,255,255,.6)
- Draw every texture with CSS gradients so it stays crisp and light
✕ Don't
- Don’t use photos as textures or let noise reduce text contrast
- Don’t light from below or from more than one direction; no white bottom edges
- Don’t make every surface a different material — content stays on plain paper
- Don’t use flat, borderless buttons
- Don’t put Thai text in the LCD mono face; it has no Thai glyphs
Not to be confused with
On mobile
Classic iOS 6 recipe: brushed-metal app bar with embossed title, paper content on linen, a dark glossy bottom tab bar whose active icon is lit and sits in a glass square, and leather-stitched hero cards. Keep textures as tiny CSS gradients (no images) and limit stacked shadows on long lists.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.