Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← StylesCompare with another style

Skeuomorphism

Interfaces that imitate the real world, so the screen feels like the thing it replaced.

9:41 AM● ● ●

San Francisco

68°Clear skies
H 72° · L 55°
Now68°1270°372°665°
View week
Glossy weather app

Glass highlights, beveled chrome, and recessed controls make a forecast screen feel like a handheld instrument.

STEREO 77
-20-100+3
LEFT
-20-100+3
RIGHT
BASSVOLUMETREBLE
Hi-fi control deck

Brushed aluminum, engraved labels, inset meters, and machined knobs translate a physical stereo panel to the screen.

Field notesNo. 06

Coastal route

08:30 — North lookout

11:10 — Cypress trail

16:45 — Lighthouse road

logged
Stitched travel journal

Leather grain, sewn edges, letterpress, and a paper card turn navigation into a familiar travel organizer.

How it works

Color

Leather BrownCasino FeltBrushed AluminumLegal Pad YellowLinenGloss HighlightEmboss Shadow

Typography

Caveat
PT Sans
Georgia
Characteristics

Real-world metaphor

Interface objects mimic things the user already knows, a notepad, a switch, a bookshelf, so existing mental models do the explaining.

Material textures

Surfaces wear literal materials: leather, felt, wood, linen, brushed metal, and paper, rendered in convincing detail.

Depth from light and shadow

Gradients, bevels, drop shadows, inner shadows, and highlights simulate a single light source so elements feel three-dimensional.

Perceived affordances

Raised buttons, grooved sliders, and dials look operable, signaling how to interact before the user touches anything.

Glossy, dimensional icons

App icons and controls are reflective and beveled, often rounded-rectangle badges with realistic depicted objects.

Ornamental realism

Detail goes beyond function: torn paper edges, stitching, and felt that reassure rather than instruct. Keep the useful cues and drop the rest.

Use it

Figma
Glossy Aqua button
  1. Draw a rounded rectangle and apply a vertical linear gradient from a lighter top to a darker bottom of your base color.
  2. Add an Inner shadow in white at low opacity along the top edge for a glossy highlight.
  3. Add a second Inner shadow in black along the bottom edge to round the form.
  4. Add a soft Drop shadow below to lift the button off the surface.
  5. Duplicate for a pressed Variant: flip the gradient and deepen the inner shadow so it looks depressed.

Keep one light source: highlights on top, shadows on the bottom, on every element.

Stitched leather panel
  1. Fill a rectangle with a warm brown, then overlay a radial gradient for uneven lighting.
  2. Add a subtle grain texture, a low-opacity noise PNG or the Noise & Texture plugin, to break up the flat fill.
  3. Add an Inner shadow so the edges round inward like padded leather.
  4. Draw a stitch line just inside the edge with a dashed stroke in a lighter thread color.

Real leather is never one flat brown; layer two or three tones so light pools unevenly.

Letterpress text
  1. Set the text in a color close to the background material.
  2. On a light surface, add a Drop shadow of white at 1px Y offset and zero blur for a debossed look.
  3. For an embossed look, place the white highlight above the glyphs and a dark shadow below.
  4. Keep offsets to about 1px; the effect should be felt, not seen.

Letterpress reads best on mid-tone material; it disappears on pure white or black.

Reusable material styles
  1. Save each material gradient and its shadow stack as Figma Styles, or wrap a surface in a Component.
  2. Store base hue, highlight, and shadow opacity as Variables so a whole material retunes at once.
  3. Build default and pressed Variants for every control so states stay consistent.

Skeuomorphism gets heavy fast; componentizing keeps the file and the team sane.

Starting points
  1. Pick a real-world referent whose metaphor genuinely maps to the task, a notepad for notes, a switch for on and off.
  2. Build the base shape and round its corners to match the physical object.
  3. Fill it with a material: a gradient or texture for leather, paper, metal, or felt.
Research notes & sources

1980s to present (peak 2007 to 2013)

Apple interfaces and the GUI desktop metaphor

Operating-system & app UI

Skeuomorphic design, Realism, Rich textures

Related styles

  • ClaymorphismA partial return to tactile, real-world depth after flat design, built from soft inflated clay and paired shadows.
  • Retro-FuturismCarries the gloss-and-chrome surface finish forward; Y2K chrome and Frutiger Aero are skeuomorphic shine repurposed as nostalgia.
  • Flat DesignThe minimalist reaction that stripped the textures away and replaced skeuomorphism as the dominant idiom after iOS 7 in 2013.
  • Material DesignGoogle's system rejects literal imitation, keeping only an abstract, rule-based metaphor of paper with real light and shadow.
  • GlassmorphismA modern return to material realism that builds depth from translucent glass rather than literal textures; Apple's 2025 Liquid Glass extends the lineage.
  1. What is Skeuomorphism?Interaction Design Foundation
  2. SkeuomorphismNielsen Norman Group
  3. Skeuomorphic Design: Don't Apply It Blindly (Bruce Tognazzini)Nielsen Norman Group
  4. SkeuomorphWikipedia
  5. Word: SkeuomorphKinfolk
  6. A History of Skeuomorphism In Apple InterfacesMacStories
  7. What Apple learned from skeuomorphism and why it still mattersAppleInsider
  8. Jony Ive killed skeuomorphic design with iOS 7 ten years ago, and he was right toiMore
  9. Why Jony Ive Is Flattening iOS 7Fast Company
  10. Skeuomorphism in UX: Definitions, examples, and its relevance todayLogRocket
  11. OS X 10.8 (Mountain Lion) Notes AppFonts In Use
  12. Skeuomorphism: an unexpected comeback in 2025Kryzalid