SuperAPI AI Directory
Partner中文AI newsFavorites
SkillsSkeuomorphism

Skeuomorphism

Design & creation

View repository

Updated 10-28 04:34

About this skill

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

  1. Realistic gradients with 4-6 color stops — Simulate curvature and light interaction on surfaces
  2. Complex shadows (multiple layers) — Outer shadows for depth, inner shadows for surface detail
  3. Textures via background-image or patterns — Subtle noise, leather grain, brushed metal look
  4. Embossed/debossed text — text-shadow creates raised or sunken letterforms
  5. Highlights and shine — Pseudo-elements with semi-transparent white overlays simulate light reflection
  6. Material-specific properties — Metal has sharp edges & sharp shadows; leather has soft edges & warm tones

Visual Language

/* Leather: warm brown, soft edges, subtle texture */
.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: cold grays, sharp reflections, high contrast */
.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: warm orange-browns, vertical grain, organic flow */
.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: transparent with subtle frosting */
.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: warm white, subtle shadow, torn edge effect */
.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:

  1. Choose material first (leather, metal, wood, glass, paper) — determines color palette and shadow treatment
  2. Create 4-6 stop gradients that follow light direction (usually 135deg or 180deg)
  3. 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
  4. Add texture via background-image with subtle noise or grain patterns
  5. Use text-shadow for embossing (raised: 0 1px 0 light; sunken: 0 -1px 0 dark)
  6. 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>