| name | Skeuomorphism |
| description | Realistic, tactile design that mimics physical materials: leather, metal, wood, paper. Use this when you want to communicate luxury, familiarity, or nostalgia—perfect for wallets, note apps, premium products, and retro-inspired interfaces that feel tangible and trustworthy. |
What is Skeuomorphism?
Skeuomorphism is a design philosophy that creates digital interfaces resembling their real-world counterparts. Key characteristics:
- Material authenticity: Textures, finishes, and visual properties match actual materials
- Depth and realism: Layered shadows and highlights create tangible objects, not flat planes
- Familiarity: Users instantly understand interaction (leather feels like leather, glass reflects light)
- Nostalgia & luxury: Evokes craftsmanship, heritage, premium touch-and-feel
- Detailed gradients: Multiple color stops simulate surface curvature and material behavior
Historical context: Dominant in iOS 6-7 era (leather calendar, wooden bookshelves). Replaced by flat design, now resurging in luxury brands, audio interfaces, and retro-conscious products.
Core Principles
- Realistic gradients with 4-6 color stops — Simulate curvature and light interaction on surfaces
- Complex shadows (multiple layers) — Outer shadows for depth, inner shadows for surface detail
- Textures via background-image or patterns — Subtle noise, leather grain, brushed metal look
- Embossed/debossed text — text-shadow creates raised or sunken letterforms
- Highlights and shine — Pseudo-elements with semi-transparent white overlays simulate light reflection
- Material-specific properties — Metal has sharp edges & sharp shadows; leather has soft edges & warm tones
Visual Language
.leather {
background: linear-gradient(135deg, #8B6F47 0%, #6B5432 50%, #5A4A2A 100%);
background-image:
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4"/></filter><rect width="100" height="100" fill="%238B6F47" filter="url(%23noise)" opacity="0.05"/></svg>');
border-radius: 8px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -2px 3px rgba(0, 0, 0, 0.3),
0 4px 8px rgba(0, 0, 0, 0.4);
padding: 24px;
}
.metal {
background: linear-gradient(90deg, #E8E8E8 0%, #D4D4D4 20%, #C0C0C0 50%, #D4D4D4 80%, #E8E8E8 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
inset 0 -1px 2px rgba(0, 0, 0, 0.5),
0 2px 4px rgba(0, 0, 0, 0.5);
border: 1px solid #999;
}
.wood {
background:
linear-gradient(90deg,
transparent 0%,
rgba(0, 0, 0, 0.1) 10%,
transparent 20%,
rgba(255, 255, 255, 0.1) 40%),
linear-gradient(180deg, #A0692F 0%, #8B5A3C 50%, #704D2C 100%);
background-size: 4px 100%, 100% 100%;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 4px 8px rgba(0, 0, 0, 0.4);
}
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 8px 16px rgba(0, 0, 0, 0.2);
}
.paper {
background: #F5F1E8;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.1),
0 8px 16px rgba(0, 0, 0, 0.08);
border: 1px solid #E0D9CC;
}
Component Patterns
Skeuomorphic Button (Metal)
.btn-skeu-metal {
background: linear-gradient(180deg, #F0F0F0 0%, #D0D0D0 50%, #B0B0B0 100%);
border: 1px solid #666;
border-radius: 6px;
padding: 12px 24px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -2px 3px rgba(0, 0, 0, 0.3),
0 4px 6px rgba(0, 0, 0, 0.3);
font-weight: 600;
cursor: pointer;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.btn-skeu-metal:active {
box-shadow:
inset 0 2px 3px rgba(0, 0, 0, 0.3),
0 2px 3px rgba(0, 0, 0, 0.2);
}
Card (Leather Bound)
.card-skeu-leather {
background: linear-gradient(135deg, #8B6F47 0%, #6B5432 50%, #5A4A2A 100%);
border-radius: 8px;
padding: 32px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -3px 6px rgba(0, 0, 0, 0.4),
0 8px 20px rgba(0, 0, 0, 0.5);
color: #F5E6D3;
position: relative;
}
.card-skeu-leather::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%);
}
.card-skeu-leather h2 {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
Input Field (Paper)
.input-skeu-paper {
background: #F5F1E8;
border: 1px solid #D4CCBB;
border-radius: 4px;
padding: 12px 16px;
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.05),
0 2px 4px rgba(0, 0, 0, 0.08);
font-size: 1rem;
font-family: Georgia, serif;
}
.input-skeu-paper:focus {
outline: none;
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.05),
0 0 0 3px rgba(139, 111, 71, 0.2),
0 2px 4px rgba(0, 0, 0, 0.08);
}
Code Generation Guidance
When generating skeuomorphic design:
- Choose material first (leather, metal, wood, glass, paper) — determines color palette and shadow treatment
- Create 4-6 stop gradients that follow light direction (usually 135deg or 180deg)
- Layer shadows: inset light (1-2px, rgba(255,255,255,0.2-0.4)) + inset dark (2-4px, rgba(0,0,0,0.2-0.4)) + outer shadow
- Add texture via background-image with subtle noise or grain patterns
- Use text-shadow for embossing (raised: 0 1px 0 light; sunken: 0 -1px 0 dark)
- Highlight with pseudo-elements (::before/::after with semi-transparent white overlays)
For React (Leather Wallet Component):
const SkeuomorphicWallet = ({ balance }) => (
<div style={{
background: 'linear-gradient(135deg, #8B6F47 0%, #6B5432 50%, #5A4A2A 100%)',
borderRadius: '8px',
padding: '32px',
color: '#F5E6D3',
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -3px 6px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.5)',
}}>
<h2 style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.5)' }}>Balance</h2>
<p style={{ fontSize: '2.5rem', fontWeight: 700, textShadow: '2px 2px 4px rgba(0,0,0,0.4)' }}>
${balance}
</p>
</div>
);
Accessibility Notes
- Gradient contrast: Ensure text on gradients meets WCAG AA (4.5:1). Test endpoints of gradients.
- Texture as decoration: Never use texture to convey critical information; rely on text + color
- Shadows for depth only: Don't use shadows as the sole affordance for clickability—add clear focus states
- Serif fonts acceptable: Skeuomorphism often uses Georgia/serif; ensure ≥1.5 line-height and font-size ≥16px
- Focus indicators: Visible outline or box-shadow on all interactive elements (not reliant on gradient changes)
Examples
Input: Luxury Finance App Card
Output (Skeuomorphism/Leather):
<div style={{
background: 'linear-gradient(135deg, #8B6F47 0%, #6B5432 50%, #5A4A2A 100%)',
borderRadius: '12px',
padding: '28px',
color: '#F5E6D3',
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -3px 6px rgba(0,0,0,0.4), 0 10px 25px rgba(0,0,0,0.5)',
fontFamily: 'Georgia, serif',
}}>
<h3 style={{ fontSize: '0.875rem', letterSpacing: '0.05em', textTransform: 'uppercase' }}>
Checking Account
</h3>
<p style={{ fontSize: '1.75rem', fontWeight: 700, margin: '12px 0', textShadow: '1px 1px 2px rgba(0,0,0,0.5)' }}>
$12,450.00
</p>
</div>
Input: Audio Equalizer Knob
Output (Skeuomorphism/Metal):
<div style={{
width: '80px',
height: '80px',
borderRadius: '50%',
background: 'radial-gradient(circle at 30% 30%, #F0F0F0 0%, #D0D0D0 50%, #808080 100%)',
boxShadow: 'inset 0 2px 4px rgba(255,255,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.5), 0 8px 16px rgba(0,0,0,0.4)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
}}>
<div style={{
width: '4px',
height: '20px',
background: '#333',
borderRadius: '2px',
}} />
</div>
