Skeuomorphism

Stylegeneral

Realistic, texture, depth, 3D appearance, real-world metaphors, shadows, gradients, tactile, detailed, material. Best for Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations, edu…

Realistic texture depth 3D appearance real-world metaphors shadows gradients tactile

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Skeuomorphism

Keywords: Realistic, texture, depth, 3D appearance, real-world metaphors, shadows, gradients, tactile, detailed, material
Primary colours: Rich realistic: wood, leather, metal colors, detailed gradients (8-12 stops), metallic effects
Secondary colours: Realistic lighting gradients, shadow variations (30-50% darker), texture overlays, material colors
Effects & animation: Realistic shadows (layers), depth (perspective), texture details (noise, grain), realistic animations (300-500ms)
Best for: Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations, education
Do not use for: Modern enterprise, critical accessibility, low-performance, web (use Flat/Modern)

## Prompt keywords
Design a realistic, textured interface with 3D depth, real-world metaphors (leather, wood, metal), complex gradients (8-12 stops), realistic shadows, grain/texture overlays, tactile press animations. Perfect for premium/luxury products.

## CSS / technical
background: complex gradient (8-12 stops), box-shadow: realistic multi-layer, background-image: texture overlay (noise, grain), filter: drop-shadow, transform: scale on press (300-500ms)

## Implementation checklist
☐ Realistic textures applied, ☐ Complex gradients 8-12 stops, ☐ Multi-layer shadows, ☐ Texture overlays present, ☐ Tactile animations smooth, ☐ Depth effect pronounced

## Design system variables
--gradient-stops: 8-12, --texture-overlay: noise+grain, --shadow-layers: 3+, --animation-duration: 300-500ms, --depth-effect: pronounced, --tactile: true

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source