SkeuomorphiqueClassiqueTexture

Skeuomorphism

Overview

Skeuomorphism (also called Realistic Design, Realistic UI, or Skiamorphism) is a design aesthetic where interface elements, objects, and decorations mimic the appearance, materials, and textures of their real-world counterparts, even when those features no longer serve a practical function. The purpose is to make digital contexts feel familiar by replicating analog forms and recognizable physical materials. Buttons look like physical buttons you could press; calendars resemble leather-bound desk calendars with torn pages; a notes app mimics a yellow legal pad. The approach dominated digital interface design from the early 2000s through 2012, reaching its peak expression in Apple's iOS 1-6 and Mac OS X Aqua interface. As users grew more literate in digital conventions, the trend gave way to Flat Design, but the core technique -- grounding digital abstractions in tangible physical metaphors -- remains one of the most influential ideas in UI history.

Visual Characteristics

Realistic material simulation: Every surface imitates a specific real-world material -- leather, wood grain, brushed metal, linen, felt, paper, glass -- rendered with enough fidelity that users instinctively recognize the source material
Three-dimensional depth: Elements have pronounced volume achieved through layered shadows, bevels, inner highlights, and multi-stop gradients; nothing appears flat
Glossy, reflective surfaces: Buttons, icons, and panels feature specular highlights and gloss strips across their upper halves, simulating lacquered plastic or polished glass
Rich shadows and bevels: Hard inner and outer shadows define edges and create the illusion of physical thickness; bevel effects simulate chamfered or rounded edges catching light
Stitched details: Decorative stitching lines along leather-textured surfaces, rendered as dashed borders with subtle inner shadows to mimic thread pulling through material
Physical dials, knobs, and sliders: Interface controls faithfully replicate their analog counterparts -- rotary dials with metallic rims, toggle switches with visible tracks, sliders with grooved channels
Textured backgrounds: Surfaces are never plain solid colors; they carry visible grain, weave, fiber, or noise patterns that reference a physical material
Layered composition: Interfaces stack visual layers -- a leather backing behind a paper notepad on top of a wooden desk -- creating depth through overlapping real-world materials
Realistic lighting: A consistent light source (typically top or top-left) casts highlights and shadows across all elements, maintaining physical coherence
Icon realism: App icons and UI icons are rendered as miniature photorealistic objects -- a compass with a real metallic bezel, a camera with a glass lens and chrome body, a microphone with a metal grille
Rivets, screws, and hardware: Decorative fasteners appear on metal surfaces, reinforcing the physical construction metaphor
Drop shadows with realistic falloff: Shadows beneath floating elements use soft Gaussian blur with opacity falloff, simulating actual light occlusion rather than flat box-shadows

Design Principles

Every digital element should reference a specific, recognizable physical counterpart -- never use an abstract visual treatment where a material metaphor is available
Maintain a single, consistent light source across the entire interface; mixed lighting breaks the physical illusion
Textures should be high-fidelity and tileable; low-resolution or obviously repeating textures undermine the realism
Use depth layering to communicate hierarchy: elements closer to the user should cast shadows on elements behind them
Interactive elements should communicate their affordance through physical metaphor -- buttons look pressable, sliders look draggable, switches look flippable
Decorative details (stitching, rivets, edge highlights) should reinforce the material identity, not contradict it
Transitions between materials should be deliberate and motivated -- a leather binding meets a paper surface at a visible seam, not an arbitrary boundary

Color Palette

Core Surface Colors

Skeuomorphic palettes are driven by the materials being simulated rather than abstract brand colors. Each material brings its own natural color range.

Material	Hex Range	Description
Rich leather (dark)	`#5C3A21`, `#6B3F23`	Deep saddle brown for premium leather surfaces
Warm leather (mid)	`#8B5E3C`, `#A0714B`	Medium tan leather, tooled or stitched
Leather highlight	`#C49A6C`, `#D4AA78`	Light edge on leather where light catches grain
Dark wood	`#3E2723`, `#4E342E`	Walnut or mahogany-toned wood panels
Medium wood	`#6D4C41`, `#795548`	Warm oak or cherry wood grain
Light wood	`#A1887F`, `#BCAAA4`	Birch or maple, lighter wood surfaces
Brushed metal (dark)	`#616161`, `#757575`	Dark aluminum or steel
Brushed metal (mid)	`#9E9E9E`, `#BDBDBD`	Standard brushed aluminum panel
Brushed metal (light)	`#E0E0E0`, `#EEEEEE`	Bright aluminum highlight
Linen / felt	`#E8E0D4`, `#D7CFC4`	Woven linen or felt texture base
Paper / notepad	`#FFFDE7`, `#FFF9C4`	Warm off-white to pale yellow, legal pad tones
Paper white	`#FAFAFA`, `#F5F5F5`	Clean white paper stock
Green felt	`#2E7D32`, `#388E3C`	Game table felt, casino green
Black plastic	`#212121`, `#1A1A1A`	Glossy black device housing
Chrome	`#CFD8DC`, `#ECEFF1`	Reflective chrome trim and bezels

Functional UI Colors

Role	Hex	Description
Button blue (iOS)	`#007AFF`	The canonical iOS skeuomorphic-era tint blue
Delete red	`#FF3B30`	Destructive action red, glossy rendered
Confirm green	`#34C759`	Positive action, toggle-on green
Warning amber	`#FF9500`	Alert and caution amber
Info purple	`#AF52DE`	Informational accent
Text primary	`#1C1C1E`	Near-black for primary text on light surfaces
Text secondary	`#6D6D72`	Medium gray for secondary text and labels
Text on dark	`#F2F2F7`	Light text for dark material surfaces
Gloss highlight	`rgba(255, 255, 255, 0.50)`	Specular highlight strip on glossy surfaces
Shadow base	`rgba(0, 0, 0, 0.30)`	Standard drop shadow for floating elements
Deep shadow	`rgba(0, 0, 0, 0.50)`	Heavy shadow for raised 3D elements
Inner light	`rgba(255, 255, 255, 0.25)`	Inner bevel highlight along top edges
Inner shadow	`rgba(0, 0, 0, 0.20)`	Inner shadow along bottom/right edges for inset depth

CSS Custom Properties

:root {
  /* Leather */
  --skeu-leather-dark: #5C3A21;
  --skeu-leather: #8B5E3C;
  --skeu-leather-light: #C49A6C;

  /* Wood */
  --skeu-wood-dark: #3E2723;
  --skeu-wood: #6D4C41;
  --skeu-wood-light: #A1887F;

  /* Metal */
  --skeu-metal-dark: #616161;
  --skeu-metal: #9E9E9E;
  --skeu-metal-light: #E0E0E0;
  --skeu-chrome: #CFD8DC;

  /* Paper / Linen */
  --skeu-linen: #E8E0D4;
  --skeu-paper: #FFFDE7;
  --skeu-paper-white: #FAFAFA;

  /* Functional */
  --skeu-blue: #007AFF;
  --skeu-red: #FF3B30;
  --skeu-green: #34C759;
  --skeu-amber: #FF9500;
  --skeu-purple: #AF52DE;

  /* Text */
  --skeu-text-primary: #1C1C1E;
  --skeu-text-secondary: #6D6D72;
  --skeu-text-light: #F2F2F7;

  /* Depth */
  --skeu-gloss: rgba(255, 255, 255, 0.50);
  --skeu-shadow: rgba(0, 0, 0, 0.30);
  --skeu-shadow-deep: rgba(0, 0, 0, 0.50);
  --skeu-inner-light: rgba(255, 255, 255, 0.25);
  --skeu-inner-shadow: rgba(0, 0, 0, 0.20);

  /* Black plastic */
  --skeu-black: #212121;
}

Typography

Typeface Characteristics

Skeuomorphic typography mirrors the material context it appears on:

Serif typefaces for paper and book contexts -- where text appears on paper, notepad, or book surfaces, use warm serif fonts that evoke printed text
Clean sans-serif for metal and glass contexts -- system UI text on toolbar surfaces and device chrome uses crisp, legible sans-serif faces
Medium to bold weights -- text must hold its own against the visual complexity of richly textured backgrounds
Embossed or debossed text effects -- text often appears stamped into leather, engraved into metal, or printed onto paper using subtle text-shadow techniques
Realistic sizing -- text scales should match the physical metaphor; a label on a dial should look like an actual printed label, not oversized UI text
No ultra-light weights -- thin text gets lost against busy textured surfaces; 400 weight is the minimum for body text

Recommended Web Fonts (Google Fonts)

Font	Weight(s)	Usage	Link
Georgia (system)	400, 700	Body text on paper/notepad surfaces; warm, readable serif	System font
Merriweather	400, 700, 900	Headlines and body on paper textures; sturdy, high-contrast serif	Merriweather
Lora	400, 500, 600, 700	Elegant body text on leather/paper surfaces; calligraphic feel	Lora
Roboto	400, 500, 700	System UI text on metallic and glass surfaces; clean and neutral	Roboto
SF Pro Display (system)	400, 600, 700	Apple-context UI labels and controls	System font (Apple)
Helvetica Neue (system)	400, 500, 700	Classic iOS skeuomorphic-era system font	System font
Open Sans	400, 600, 700	General-purpose UI text; neutral and legible	Open Sans
Playfair Display	400, 700, 900	Display text on rich material surfaces; high contrast, editorial	Playfair Display
Source Serif 4	400, 600, 700	Body text on paper; pairs well with sans-serif UI labels	Source Serif 4
Courier Prime	400, 700	Monospaced text on typewriter or terminal surfaces	Courier Prime

Font Pairing Suggestions

Heading Font	Body Font	Context
Playfair Display (700)	Merriweather (400)	Rich, editorial; for leather-and-paper surfaces
Roboto (700)	Open Sans (400)	Clean system UI; for metallic toolbars and glass panels
Merriweather (900)	Source Serif 4 (400)	Book-like; for notepad and paper metaphors
Roboto (500)	Lora (400)	Mixed context; metal UI labels with paper content areas

Typography CSS Example

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Roboto:wght@400;500;700&family=Lora:wght@400;500;700&display=swap');

body {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--skeu-text-primary);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 700;
  line-height: 1.3;
  color: var(--skeu-text-primary);
}

/* UI labels (toolbars, buttons, navigation) */
.skeu-ui-label {
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--skeu-text-secondary);
}

/* Embossed / debossed text effect */
.skeu-text-embossed {
  color: var(--skeu-leather-dark);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3),
    0 -1px 0 rgba(0, 0, 0, 0.2);
}

.skeu-text-engraved {
  color: rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* Monospaced for terminal/typewriter metaphor */
.skeu-mono {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

/* Display heading with dimensional shadow */
.skeu-display {
  font-family: 'Merriweather', Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.15);
}

Layout Principles

Grid and Structure

Material-driven backgrounds: The page background itself is a material -- linen, leather, dark felt, or wood -- never a flat solid color; the background texture sets the physical context for everything above it
Layered surface stacking: Content sits on surfaces that sit on other surfaces; a paper notepad rests on a leather desk pad which rests on a wooden desk; each layer has its own shadow
Centered, constrained containers: Content areas max out at 900-1000px width; the surrounding material (leather, wood, linen) frames the content like a physical desktop
Thick borders and bezels: Containers have visible rims, frames, and bezels (4-8px) that simulate physical casings -- the chrome rim around a clock face, the leather binding around a notepad
Generous padding: Content inside skeuomorphic containers has ample internal padding (32-48px) to mimic the proportions of physical objects where content doesn't extend to the edge
Realistic proportions: UI elements should be sized relative to their physical counterparts; a toggle switch is smaller than a dial, a notepad is larger than a single button
Top-bar toolbars: Navigation and tools live in metallic or dark plastic toolbar strips at the top of the page, mimicking physical device chrome

Section Organization

Toolbar / Navigation: A metallic or dark gradient bar at the top with embossed or inset text labels and glossy icon buttons; physical separator (shadow line, bevel) between toolbar and content
Hero / Title area: Display text on a prominent material surface -- embossed into leather, printed on paper, or engraved into metal; dimensional text-shadow reinforces the material
Content panels: Cards rendered as distinct physical objects -- paper cards, notepad sheets, or wooden plaques -- each with their own shadow, border, and texture
Interactive controls: Glossy pill-shaped buttons, metallic toggle switches, physical slider tracks with knobs; every control communicates its interaction through physical metaphor
Sidebar / secondary panels: Styled as separate material surfaces (e.g., a wooden shelf next to a leather desk area) with their own texture and shadow treatment
Footer: A recessed or darker material band (dark leather, dark metal) with debossed or lightly printed text

Responsive Approach

Simplify texture detail at smaller viewports; use solid color approximations of textures below 480px to maintain performance
Reduce shadow complexity on mobile; fewer shadow layers, smaller blur values
Stack layered surfaces vertically; maintain the physical stacking metaphor by using vertical overlap and shadow to communicate depth
Preserve glossy button treatments at all sizes; the tactile metaphor is especially important on touch devices

CSS Code Snippets

Linen Textured Background

/* Linen background using CSS noise pattern */
.skeu-linen-bg {
  background-color: #E8E0D4;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.03) 0px,
      rgba(0, 0, 0, 0.03) 1px,
      transparent 1px,
      transparent 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.03) 0px,
      rgba(0, 0, 0, 0.03) 1px,
      transparent 1px,
      transparent 4px
    );
}

Leather Surface

/* Leather-textured panel with stitched edge */
.skeu-leather {
  background: linear-gradient(
    180deg,
    #8B5E3C 0%,
    #7A5232 40%,
    #6B4628 100%
  );
  border-radius: 8px;
  padding: 32px;
  position: relative;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Stitched border detail */
.skeu-leather-stitched {
  border: 3px dashed rgba(194, 154, 108, 0.6);
  outline: 2px solid transparent;
  outline-offset: 4px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    inset 0 0 20px rgba(0, 0, 0, 0.15);
}

Wood Panel

/* Wood-grained surface using repeating gradients */
.skeu-wood {
  background-color: #6D4C41;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.04) 0px,
      transparent 2px,
      transparent 8px,
      rgba(0, 0, 0, 0.04) 10px
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 50%,
      rgba(0, 0, 0, 0.08) 100%
    );
  border-radius: 6px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

Brushed Metal Surface

/* Brushed aluminum toolbar */
.skeu-metal {
  background: linear-gradient(
    180deg,
    #E8E8E8 0%,
    #D4D4D4 30%,
    #C8C8C8 50%,
    #D0D0D0 70%,
    #BCBCBC 100%
  );
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px,
      transparent 2px
    ),
    linear-gradient(
      180deg,
      #E8E8E8, #D4D4D4 30%, #C8C8C8 50%, #D0D0D0 70%, #BCBCBC
    );
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

Glossy Skeuomorphic Button

/* Classic iOS-era glossy button */
.skeu-button {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: linear-gradient(
    180deg,
    #5BA7FF 0%,
    #007AFF 45%,
    #0066DD 55%,
    #0055CC 100%
  );
  color: #FFFFFF;
  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  transition: all 0.15s ease;
}

/* Top-half gloss reflection */
.skeu-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.10) 100%
  );
  border-radius: 10px 10px 0 0;
  pointer-events: none;
}

.skeu-button:hover {
  background: linear-gradient(
    180deg,
    #6EB5FF 0%,
    #1A8AFF 45%,
    #0077EE 55%,
    #0066DD 100%
  );
}

.skeu-button:active {
  background: linear-gradient(
    180deg,
    #004AB5 0%,
    #0055CC 45%,
    #0066DD 55%,
    #007AFF 100%
  );
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.skeu-button:active::before {
  opacity: 0.3;
}

Glossy Red Delete Button

.skeu-button-red {
  background: linear-gradient(
    180deg,
    #FF6B5E 0%,
    #FF3B30 45%,
    #E0332A 55%,
    #CC2D26 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow:
    0 3px 8px rgba(204, 45, 38, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

Paper Notepad Card

/* Notepad-style card with torn-top edge illusion */
.skeu-notepad {
  background: linear-gradient(
    180deg,
    #FFFDE7 0%,
    #FFF9C4 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 32px 28px;
  position: relative;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Ruled lines on notepad */
.skeu-notepad-ruled {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 27px,
      #CFD8DC 27px,
      #CFD8DC 28px
    );
  background-size: 100% 28px;
  background-position: 0 16px;
  line-height: 28px;
  padding-top: 20px;
}

/* Red margin line */
.skeu-notepad-ruled::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 60px;
  width: 1px;
  background: rgba(239, 83, 80, 0.3);
}

Metallic Toggle Switch

/* Physical toggle switch with metallic track */
.skeu-toggle {
  width: 60px;
  height: 32px;
  background: linear-gradient(
    180deg,
    #B0B0B0 0%,
    #888888 50%,
    #A0A0A0 100%
  );
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  position: relative;
  cursor: pointer;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.2);
  transition: background 0.3s ease;
}

.skeu-toggle::after {
  content: '';
  width: 26px;
  height: 26px;
  background: linear-gradient(
    180deg,
    #FFFFFF 0%,
    #E8E8E8 40%,
    #D4D4D4 100%
  );
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.3s ease;
}

.skeu-toggle.active {
  background: linear-gradient(
    180deg,
    #5BD660 0%,
    #34C759 50%,
    #2DB84E 100%
  );
}

.skeu-toggle.active::after {
  transform: translateX(28px);
}

Inset / Recessed Input Field

/* Input field that appears cut into the surface */
.skeu-input {
  background: linear-gradient(
    180deg,
    #F0F0F0 0%,
    #FAFAFA 30%,
    #FFFFFF 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 10px 14px;
  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
  font-size: 1rem;
  color: var(--skeu-text-primary);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.5);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.skeu-input:focus {
  border-color: var(--skeu-blue);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.12),
    0 0 0 3px rgba(0, 122, 255, 0.25);
}

.skeu-input::placeholder {
  color: var(--skeu-text-secondary);
  opacity: 0.6;
}

Glass Panel (for status bars and overlays)

/* Semi-transparent glass pane with specular edge */
.skeu-glass {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.40) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  padding: 20px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

Realistic Shadow for Floating Elements

.skeu-floating {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.15),
    0 4px 8px rgba(0, 0, 0, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.10);
}

Bevel Effect for Raised Panels

.skeu-beveled {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

Full Page Starter Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Skeuomorphism Layout</title>
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --skeu-leather: #8B5E3C;
      --skeu-leather-dark: #5C3A21;
      --skeu-wood: #6D4C41;
      --skeu-linen: #E8E0D4;
      --skeu-paper: #FFFDE7;
      --skeu-metal-light: #E0E0E0;
      --skeu-blue: #007AFF;
      --skeu-text-primary: #1C1C1E;
      --skeu-text-secondary: #6D6D72;
      --skeu-text-light: #F2F2F7;
      --skeu-shadow: rgba(0, 0, 0, 0.30);
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Merriweather', Georgia, serif;
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.7;
      color: var(--skeu-text-primary);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;

      /* Linen background texture */
      background-color: #E8E0D4;
      background-image:
        repeating-linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.03) 0px,
          rgba(0, 0, 0, 0.03) 1px,
          transparent 1px,
          transparent 4px
        ),
        repeating-linear-gradient(
          90deg,
          rgba(0, 0, 0, 0.03) 0px,
          rgba(0, 0, 0, 0.03) 1px,
          transparent 1px,
          transparent 4px
        );
    }

    /* Metal toolbar */
    nav {
      background: linear-gradient(180deg, #E8E8E8, #D4D4D4 30%, #C8C8C8 50%, #D0D0D0 70%, #BCBCBC);
      border-bottom: 1px solid rgba(0, 0, 0, 0.25);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.6);
      padding: 12px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    nav .logo {
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--skeu-text-primary);
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
      text-decoration: none;
    }

    nav ul {
      display: flex;
      gap: 8px;
      list-style: none;
    }

    nav ul a {
      display: inline-block;
      padding: 6px 18px;
      border-radius: 6px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      background: linear-gradient(180deg, #F2F2F2 0%, #DCDCDC 100%);
      color: var(--skeu-text-primary);
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      font-size: 0.85rem;
      text-decoration: none;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
      transition: all 0.15s ease;
      position: relative;
      overflow: hidden;
    }

    nav ul a::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 50%;
      background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.05));
      pointer-events: none;
    }

    nav ul a:active {
      background: linear-gradient(180deg, #C8C8C8 0%, #D8D8D8 100%);
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    /* Main content wrapper */
    .content {
      max-width: 880px;
      margin: 2.5rem auto;
      padding: 0 1.5rem;
    }

    /* Leather hero panel */
    .hero {
      background: linear-gradient(180deg, #8B5E3C 0%, #7A5232 40%, #6B4628 100%);
      border-radius: 10px;
      padding: 48px 40px;
      text-align: center;
      color: var(--skeu-text-light);
      position: relative;
      box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        inset 0 0 30px rgba(0, 0, 0, 0.1);
      border: 3px dashed rgba(194, 154, 108, 0.4);
    }

    .hero h1 {
      font-size: clamp(2rem, 4.5vw, 3rem);
      font-weight: 900;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.1);
      margin-bottom: 0.75rem;
    }

    .hero p {
      font-size: 1.05rem;
      opacity: 0.85;
      max-width: 540px;
      margin: 0 auto 1.5rem;
      line-height: 1.6;
    }

    /* Glossy CTA button */
    .btn {
      display: inline-block;
      padding: 12px 32px;
      border-radius: 10px;
      border: 1px solid rgba(0, 0, 0, 0.3);
      background: linear-gradient(180deg, #5BA7FF 0%, #007AFF 45%, #0066DD 55%, #0055CC 100%);
      color: #ffffff;
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      font-size: 0.95rem;
      text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      text-decoration: none;
      position: relative;
      overflow: hidden;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
      transition: all 0.15s ease;
    }

    .btn::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 50%;
      background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.1));
      border-radius: 10px 10px 0 0;
      pointer-events: none;
    }

    .btn:active {
      background: linear-gradient(180deg, #004AB5 0%, #0055CC 45%, #0066DD 55%, #007AFF 100%);
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    /* Paper notepad cards */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 24px;
      margin-top: 2rem;
    }

    .card {
      background: linear-gradient(180deg, #FFFDE7 0%, #FFF9C4 100%);
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      padding: 28px 24px;
      box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.06);
      position: relative;
    }

    /* Ruled line effect */
    .card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-image: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 27px,
        #CFD8DC 27px,
        #CFD8DC 28px
      );
      background-size: 100% 28px;
      background-position: 0 20px;
      opacity: 0.4;
      pointer-events: none;
      border-radius: 4px;
    }

    .card h3 {
      font-size: 1.1rem;
      margin-bottom: 0.5rem;
      position: relative;
      z-index: 1;
    }

    .card p {
      color: var(--skeu-text-secondary);
      font-size: 0.92rem;
      line-height: 1.65;
      position: relative;
      z-index: 1;
    }

    /* Footer */
    footer {
      margin-top: 3rem;
      padding: 20px;
      text-align: center;
      background: linear-gradient(180deg, #4E342E, #3E2723);
      border-radius: 8px;
      color: rgba(255, 255, 255, 0.6);
      font-family: 'Roboto', sans-serif;
      font-size: 0.8rem;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    @media (max-width: 768px) {
      .content { padding: 0 1rem; }
      .hero { padding: 32px 24px; }
      nav { flex-direction: column; gap: 10px; padding: 10px 16px; }
      nav ul { gap: 6px; flex-wrap: wrap; justify-content: center; }
    }
  </style>
</head>
<body>
  <nav>
    <a href="#" class="logo">SkeuoApp</a>
    <ul>
      <li><a href="#">Features</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>

  <div class="content">
    <div class="hero">
      <h1>Designs that feel real</h1>
      <p>Leather, wood, metal, and paper -- interfaces built from the materials you already know and trust.</p>
      <a href="#" class="btn">Get Started</a>
    </div>

    <div class="card-grid">
      <div class="card">
        <h3>Tactile Controls</h3>
        <p>Buttons you can press, switches you can flip, and dials you can turn -- every interaction grounded in physical reality.</p>
      </div>
      <div class="card">
        <h3>Rich Materials</h3>
        <p>Stitched leather, grained wood, brushed aluminum, and lined paper bring warmth and familiarity to every surface.</p>
      </div>
      <div class="card">
        <h3>Honest Depth</h3>
        <p>Shadows, bevels, and highlights create real dimensionality -- layers you can almost reach into and touch.</p>
      </div>
    </div>

    <footer>
      Crafted from real materials. Skeuomorphism in action.
    </footer>
  </div>
</body>
</html>

Implementation Tips

Texture fidelity matters: Low-quality or obviously tiling textures immediately break the illusion. CSS-generated textures (using repeating gradients) are often more reliable than small image tiles, especially at different zoom levels.
Glossy highlights are non-negotiable: The characteristic skeuomorphic gloss comes from a ::before pseudo-element covering the top half of buttons and icons with a white-to-transparent gradient. Without it, elements look flat rather than realistic.
Layer your shadows: Real objects cast complex shadows. Use 2-3 box-shadow values per element -- a tight, dark shadow for the contact edge and a softer, larger shadow for ambient occlusion.
Consistent light direction: All highlights should come from the top or top-left. All shadows should fall toward the bottom-right. Mixed lighting destroys the physical coherence.
Inner shadows for inset elements: Input fields, tracks, and recessed areas use inset box-shadow to appear cut into the surface. Pair with a subtle top-to-bottom gradient (darker at top, lighter at bottom) for enhanced realism.
Border bevels communicate thickness: Use lighter border-top and border-left with darker border-bottom and border-right to simulate a beveled, three-dimensional edge.
Text-shadow for embossing: On textured surfaces, add text-shadow: 0 1px 0 rgba(255,255,255,0.3) for light-embossed text or text-shadow: 0 -1px 0 rgba(0,0,0,0.3) for dark-engraved text. This small detail adds significant realism.
Match material to context: A notepad should use paper textures and serif fonts. A toolbar should use metallic surfaces and sans-serif labels. Mixing materials without contextual logic (metal textures on a notepad surface) looks incoherent.
Limit material variety per screen: Using leather, wood, metal, glass, paper, and linen all on one page creates visual chaos. Pick 2-3 complementary materials and commit to them.
Active/pressed states invert the lighting: When a button is pressed, the gradient flips (darker on top, lighter on bottom) and the outer shadow becomes an inset shadow. This communicates physical depression.
Performance with CSS textures: repeating-linear-gradient patterns for linen and wood grain are GPU-friendly, but stacking many gradient layers can affect paint performance. Profile on lower-end devices.
Accessibility: The heavy texturing and dimensional effects can reduce text readability. Ensure text always meets WCAG AA contrast (4.5:1 for body text) against its background surface. Consider slightly bolder font weights than you would use on a clean flat surface.

Materials and Textures (Visual Metaphors for Web)

Physical Material	Web Equivalent
Stitched leather	Dark brown gradient + `repeating-linear-gradient` noise + dashed border (stitch line) + inner shadow for grain depth
Wood grain	Warm brown base + horizontal `repeating-linear-gradient` stripes at subtle opacity for grain + directional lighting gradient
Brushed aluminum	Light gray multi-stop gradient + fine horizontal stripe `repeating-linear-gradient` + sharp top highlight border
Linen / canvas	Beige base + crossed `repeating-linear-gradient` grid pattern at low opacity
Paper / notepad	Off-white to pale-yellow gradient + ruled-line `repeating-linear-gradient` + thin red margin line via `::before`
Green felt	Solid deep green + subtle noise pattern + inner shadow for depth
Glossy plastic	Vivid color gradient (light-to-dark, 3+ stops) + `::before` white-to-transparent top-half overlay for gloss
Glass pane	Semi-transparent white gradient + `backdrop-filter: blur()` + bright border-top for refraction edge
Chrome bezel	Tight multi-stop gradient alternating light and dark grays, simulating cylindrical metallic reflection
Rivets / screws	Small circles with radial gradient (highlight top-left, shadow bottom-right) + dark border

Associated Products and Interfaces

The following exemplify the skeuomorphic aesthetic at its peak:

Apple iOS 1-6 -- The definitive skeuomorphic UI; every app used real-world material metaphors (leather calendar, felt game table, lined notepad, wooden bookshelves in iBooks)
Apple Mac OS X Aqua -- Translucent, candy-colored buttons with specular highlights; gel-like scrollbars and window controls
Apple GarageBand -- Virtual instrument interfaces faithfully replicating wooden amp housings, metallic microphone grilles, and analog control knobs
Apple iCal -- Leather-stitched header, torn-page effect, realistic calendar binding
Apple iBooks -- Wooden bookshelf texture, page-curl animation mimicking physical book pages
Microsoft Windows XP -- Glossy blue taskbar and Start button, rounded candy-like window controls, nature-photography wallpaper
Microsoft Windows Vista (Aero) -- Transparent glass window borders, glossy reflective surfaces, frosted glass effects
Samsung Galaxy Note 3 -- Physical device with leather-textured back cover mimicking a notebook
Android apps (2013 era) -- Third-party apps with heavy leather, wood, and paper texturing
Angry Birds (2010-2011) -- Splash screens and UI with wooden frames, glossy buttons, and textured backgrounds

Aesthetic	Relationship to Skeuomorphism
Flat Design	Direct successor and reaction; strips away all textures, gradients, shadows, and 3D effects in favor of solid colors, clean typography, and minimal ornamentation
Neumorphism	Modern descendant; inherits the physical-object metaphor but replaces realistic textures with a single extruded-surface illusion using paired shadows on monochromatic backgrounds
Frutiger Aero	Contemporary sibling; employs skeuomorphic gloss and depth but specifically in an optimistic, nature-infused, technology-and-nature-harmony context
Glassmorphism	Retains the glass-pane metaphor from skeuomorphism but strips away other material textures in favor of frosted transparency and blur
Claymorphism	Descendant; takes the 3D, tactile quality and softens it into colorful, clay-like rounded surfaces
Dark Aero	Dark variant of the glossy skeuomorphic era; same depth and reflections applied to dark UI surfaces
Y2K Futurism	Predecessor; shares glossy surfaces and 3D rendering but with a chrome-heavy, futuristic orientation rather than analog material replication
Old Web	Shares era context; early web skeuomorphism included beveled buttons, embossed text, and textured tiled backgrounds
Corporate Memphis	Contrasting contemporary; the flat-illustration corporate style represents the opposite end of the realism spectrum

← Zurück zu den Designs