Skeuomorphism
Realism via light physics – one consistent light source and a four-layer shadow stack that make pixels read as material you could touch.
Read the entrySkeuomorphism
Realism via light physics – one consistent light source and a four-layer shadow stack that make pixels read as material you could touch.
Lineage: Reigned 2007-2013 in early iOS; ended almost overnight by iOS 7; selectively revived 2025-26.
bg-page
bg-raised
text-primary
text-secondary
accent-solid
on-accent
radius · shadow
Aathe type voice
A working sample – the controls are live (hover, press, focus, the toggle's two states) and everything inside the frame is painted by the token block shown in the recipe below. Nothing saves anything; "Advanced options" jumps to the recipe. The page around the frame stays in Atlas's own system.
Spot it
- A consistent single top light source applied across every element – never mixed.
A four-layer shadow stack: an outer contact shadow, an outer ambient shadow, an inset top bevel (light) and an inset bottom shade (dark). This specific combination is what separates skeuomorphism from a simple drop shadow.
Generated with Gemini from this entry's own prompt vocabulary – the copyable brief doing its job. - A three-stop gradient, lightest at the top, simulating light falling on a curved or bevelled surface.
- Embossed or debossed text via text-shadow – a light shadow just below the text, simulating letterpress.
A warm, "material" palette that explicitly avoids pure white or pure black anywhere.
- linen ground
#e8e0d2 - parchment surface
#f6f0e4 - warm ink (never pure black)
#2e2820 - bronze action
#77451c - cream label (never pure white)
#fff8ec
- linen ground
- Fine surface texture via SVG noise (feTurbulence at 0.04-0.06 opacity) – enough to read as material without looking dirty.
- A pressed state that inverts the shadow direction and nudges the element down 1px, simulating physical depression.
Make the digital thing look like the physical thing it replaces, and people who have never used your interface already know how it works – a “save” icon shaped like a floppy disk borrows familiarity from an object users had actually touched. That instinct is skeuomorphism, and the stage above shows its modern form: not torn paper and stitched leather, but light behaving consistently across a warm material surface.
Where it came from
It reigned in mainstream software roughly 2007-2013, most visibly in early iOS, because it made touchscreens legible to people who had never used one. The watershed was iOS 7 in September 2013: Apple’s flat redesign ended the skeuomorphic era almost overnight, and the lineage note 09 traces – Dieter Rams through Jony Ive into flat design – took over for a decade.
The 2025-26 revival is real but partial, with three named drivers: minimalism fatigue (texture reads as fresh again), display technology catching up (realistic texture is now cheap to render), and a genuine usability argument – flat design’s lack of visual cueing can hide what’s interactive, and tactile cues help. Every source agrees on the shape of it: a flat foundation with selective tactile accents, not a return to fully-textured 2010 screens. (The usability-argument driver carries the note’s own hedge – it reads partly as post-hoc rationalisation.)
When it fits
Teaching an unfamiliar interaction through familiarity with a physical object – still genuinely useful for onboarding novel input methods – and brand contexts wanting warmth, craft or tactility as a signal.
When it’s wrong
As a wholesale interface treatment in 2026. The revival is selective and hybrid; over-applying it reads as dated rather than fresh. If every surface has texture, none of it is saying anything.
Don’t confuse it with
Neumorphism – the monochrome abstraction of this idea: it keeps the extrude-and-press metaphor but drops the materials, the warmth and most of the accessibility. Claymorphism – soft volume without referencing any real material. All three fake depth with shadow technique; only skeuomorphism points at actual objects. For Apple’s current variant, the source note carries a dedicated vocabulary: translucent glass material, refraction and specular highlights, adaptive tint from clear to fully tinted, elevates and distinguishes foreground controls from content beneath.
The recipe
The actual scope from style-scopes.css – the CSS that painted the stage above.
/* ===== style: skeuomorphism ===== */
/* Realism via light physics: one top light source, the four-layer shadow
stack (contact + ambient + inset bevel + inset shade), warm material
palette that never touches pure white or black. */
[data-style='skeuomorphism'] {
--bg-page: #e8e0d2;
--bg-raised: #f6f0e4;
--bg-active: #ded4c2;
--border-default: #857a66;
--border-hover: #6d6250;
--border-input: #857a66;
--text-primary: #2e2820;
--text-secondary: #5b5344;
--accent-solid: #77451c;
--accent-solid-hover: #5e3614;
--accent-text: #6d3f18;
--on-accent: #fff8ec;
--radius-s: 8px;
--radius-m: 12px;
--radius-l: 16px;
--shadow-1:
0 1px 2px rgba(46, 40, 32, 0.28),
0 3px 8px rgba(46, 40, 32, 0.16),
inset 0 1px 0 rgba(255, 252, 245, 0.85),
inset 0 -2px 3px rgba(46, 40, 32, 0.12);
--shadow-2:
0 2px 3px rgba(46, 40, 32, 0.3),
0 6px 14px rgba(46, 40, 32, 0.2),
inset 0 1px 0 rgba(255, 252, 245, 0.85),
inset 0 -2px 3px rgba(46, 40, 32, 0.12);
--font-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
}
.sty-card[data-style='skeuomorphism'],
[data-style='skeuomorphism'] .sty-panel {
background-image: linear-gradient(180deg, #faf5eb 0%, #f6f0e4 55%, #efe7d7 100%);
}
[data-style='skeuomorphism'] .sty-btn {
background-image: linear-gradient(180deg, #8f5a2c 0%, #77451c 55%, #66390f 100%);
box-shadow: inset 0 1px 0 rgba(255, 248, 236, 0.35), 0 1px 2px rgba(46, 40, 32, 0.4);
text-shadow: 0 -1px 0 rgba(46, 40, 32, 0.45);
}
/* Vignette: bevelled material bars under fine feTurbulence noise – the
note's 0.04-0.06 opacity band, enough to read as surface, never dirt. */
[data-style='skeuomorphism'] .sty-art {
background-image: linear-gradient(180deg, #efe8d9 0%, #e2d8c4 100%);
border-color: #b3a68e;
}
[data-style='skeuomorphism'] .sty-art::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-style='skeuomorphism'] .sty-art > i {
background-image: linear-gradient(180deg, #cfc3aa 0%, #b6a88b 100%);
background-color: #b6a88b;
box-shadow: inset 0 1px 0 rgba(255, 252, 245, 0.8), 0 1px 2px rgba(46, 40, 32, 0.35);
opacity: 1;
}
[data-style='skeuomorphism'] .sty-art .sty-art-c {
background-image: linear-gradient(180deg, #8f5a2c 0%, #66390f 100%);
}
/* Hover: the pressed state from the tell – shadow inverts, surface dips 1px. */
.sty-card[data-style='skeuomorphism']:hover {
transform: translateY(1px);
box-shadow:
0 1px 1px rgba(46, 40, 32, 0.2),
inset 0 2px 4px rgba(46, 40, 32, 0.18),
inset 0 -1px 0 rgba(255, 252, 245, 0.6);
}
/* ===== end skeuomorphism ===== */Prompt vocabulary
Meant to be copied, not paraphrased – anchors beat adjectives when briefing an agent.
- skeuomorphic
- single consistent top-left light source
- four-layer shadow stack with inset bevel
- warm material palette (never pure white or black)
- subtle noise texture
- embossed text via text-shadow
- pressed state inverts the shadow
Exemplars
Named links out – the vignettes above are reconstructions, never screenshots (ADR #006).
- Apple's Liquid Glass – the current apex – realism via light physics applied to translucent glass instead of leather
- iOS 6-era Notes, Calendar and Game Center – the pre-2013 exemplars – legal-pad texture, leather stitching, green felt; retired with iOS 7
- The Camera app's lens illustration – last seen in iOS 6, reintroduced 2025-26 – a literal skeuomorphic callback