buy film for the trip
call the framer back
water the ferns…
Leather, stitching, ruled paper — the app is drawn as the object
Skeuomorphism
Established movement
Borrowed from archaeology (a skeuomorph is a derivative object keeping ornamental traces of its original material); standard HCI vocabulary since the 1980s desktop metaphor.
also called skeuomorphic design, realistic UI, real-world metaphor UI
Skeuomorphism carries real-world materials and objects into digital UI: controls are rendered as if physically made of something — glossy plastic, brushed metal, leather, paper — with the lighting, texture, and affordances of the real thing. A skeuomorphic app teaches itself: a page that looks tearable invites turning, a raised glossy button invites pressing. It peaked in early iOS and Mac OS X, and was largely displaced by flat design around 2013.
Scope: This entry covers the visual style. The interaction-metaphor sense (a 'trash can' you drag files to) is the same idea one level up, and NN/g treats both together — but the atlas signals below are about pixels, not metaphors.
If you called it…
…you meant Skeuomorphism.
What makes it this — the defining signals
- Simulated real materialsSurface & material
Surfaces look made of something physical — leather, paper, linen, brushed metal, green felt — usually with visible texture or grain.
- Physical lighting modelDepth & light
Gloss highlights, bevels, and inner shadows imply a light source: buttons bulge outward, fields sink inward, edges catch light.
- Real-object metaphorsImagery & ornament
The UI is drawn AS the object it replaces: a notepad with ruled paper, a bookshelf of covers, a dial you rotate.
- Crafted physical detailsGeometry & borders
Stitching, torn-paper edges, embossed or letterpress text, rivets — ornamental traces of how the 'real' object would be manufactured.
Style brief — paste into your agent
Create the surface using skeuomorphism. Defining signals: controls rendered as simulated physical materials (e.g. leather, paper, brushed metal) with visible texture; a consistent lighting model — gloss highlights on raised elements, inner shadows on recessed fields; real-object metaphors for whole surfaces (a notepad drawn as ruled paper); crafted physical details like stitching or embossed text. Keep the specific material palette and density flexible. Use layered gradients with specular highlights, inset box-shadows for recessed fields, and subtle texture images or noise. Do not drift into neumorphism: the decisive difference is that skeuomorphic surfaces imitate real nameable materials, not one uniform soft-extruded surface. Preserve readable text contrast on textured backgrounds, visible controls and focus states, and reduced-motion support.
Often confused with Neumorphism
The same little app, rendered in both styles — only the style changes, so the difference you see IS the difference.
Welcome back
Pick up where you left off.
Skeuomorphism
Welcome back
Pick up where you left off.
Skeuomorphism
This is skeuomorphism because surfaces imitate REAL, nameable materials — leather, paper, metal — with rich lighting, texture, and object metaphors.
It would become neumorphism if every material and texture vanished and all controls were instead extruded from one continuous matte surface with soft dual shadows.
vs Frutiger Aero: This is skeuomorphism when the point is imitating a specific physical object or material in the interface itself. It would become Frutiger Aero if the gloss stayed but the materials turned into a glassy blue-green tech-nature mood — sky, water, grass — rather than any one imitated object.
Full style DNA
Surface & material
Surfaces look made of something physical — leather, paper, linen, brushed metal, green felt — usually with visible texture or grain.
Large flat single-color surfaces with no lighting break the illusion — that's the doorway to Flat Design.
Depth & light
Gloss highlights, bevels, and inner shadows imply a light source: buttons bulge outward, fields sink inward, edges catch light.
Buttons and bars carry vertical gradients with a specular top highlight — the 'gel' or 'aqua' look of pressable plastic.
Imagery & ornament
The UI is drawn AS the object it replaces: a notepad with ruled paper, a bookshelf of covers, a dial you rotate.
Geometry & borders
Stitching, torn-paper edges, embossed or letterpress text, rivets — ornamental traces of how the 'real' object would be manufactured.
Color & contrast
Color comes from the simulated material (tan leather, grey linen), so almost any palette can be skeuomorphic.
In code — optional starting points
The brief above is framework-neutral; these are concrete handles if your stack matches.
| CSS | background: linear-gradient(#fdfdfd, #d8d8d8); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.35); | Raised glossy control: top highlight + drop shadow |
| CSS | box-shadow: inset 0 2px 4px rgba(0,0,0,.35); background: #f3efe6; | Recessed field: inner shadow sinks it into the surface |
| CSS | text-shadow: 0 1px 0 rgba(255,255,255,.6); | Letterpress/embossed text on light materials |
Accessibility & misuse
- Text over textures (leather, linen, wood) needs a measured 4.5:1 contrast against the BUSIEST region of the texture, not its average color.
- Decorative bevels and gloss must not be the only pressed/unpressed signal — pair states with a color or content change.
- Heavy texture images add page weight; ship them compressed and let the UI stand without them.
Origin
As old as the GUI itself (the 1980s desktop metaphor), but the style label usually points at Apple's 2007–2012 era — iOS's leather calendars, felt Game Center, and reel-to-reel Podcasts app under Scott Forstall — ended publicly by iOS 7's flat redesign in 2013.