Get started
All interface styles

Skeuomorphism

Controls that imitate physical objects: bevelled edges, material texture, directional light and depth that says what a thing does.

Also called: realistic UI, textured, physical metaphor, tactile

Your Design Kit keeps

Colors, typefaces, the spacing scale, motifs, and brand voice.

Skeuomorphism changes

Surface material, borders, shape, depth, component layout, states, and motion.

Skeuomorphism specimen

Base components
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago
Skeuomorphism applied
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago

Look for: One light source, top-left, applied to everything: the button's highlight is on its top edge, the input's shadow is on its inner top edge. That consistency is what makes the depth legible rather than decorative.

Both panels use the same sample Design Kit and account screen. Only the interface style changes on the right.

Choose what to restyle

Select a scope to create a prompt for your coding agent. Start with one component family or apply the style across the interface.

Choose what the style should change
Apply Skeuomorphism to cards, panels, sheets, and modals only. Keep my Design Kit's colors, typefaces, and motifs. Leave navigation, forms, actions, and page structure unchanged. Show me one representative card first, then explain the accessibility trade-offs before changing the rest.
Paste this into your coding agent, then add any product-specific constraints.

What you see

The perceptual fingerprint, in the order you notice it.

  • Bevelled highlights on the top edge and shadow on the bottom of every control
  • Surface texture — paper, brushed metal, leather grain — instead of a flat fill
  • A consistent light source, so every element is lit from the same direction
  • Buttons that visibly sit above the surface and depress when pressed
  • Inset wells for inputs, as if cut into the panel

Best for

  • Product pages for physical goods, instruments and tools
  • Playful or nostalgic brands where the interface itself is part of the story
  • Single-purpose surfaces with few controls, each of which can be rendered carefully

Avoid when

  • The interface has many controls; the rendering cost per element does not scale
  • You need a modern, efficient impression — this reads as period-specific
  • The kit's colours are flat and saturated; skeuomorphism needs tonal range to model light

Accessibility

Where this style tends to fail an audit, and what fixes it.

  • Bevels are decoration, not contrast. The control's boundary needs a real 3:1 edge that survives when the highlight is invisible on a dark surface.
  • Texture under text is a contrast hazard: keep the noise amplitude low and measure against the darkest and lightest points of the texture.
  • Pressed and disabled states must differ by more than depth — depth is invisible to many users and absent in forced-colors mode.

Built for

The site archetypes this render grammar suits. Each opens the catalog on that lane.

Matching design kits

A style is a render grammar. A design kit supplies the colour, type and personality it paints.

Surfaces mimic real materials — leather, brushed metal, paper — via gradients, bevels, inset highlights and texture. The pre-flat tactile look, now resurgent.

Implementation bundle

Pro

What an agent needs in order to actually build Skeuomorphism on top of your design kit — surface rules, per-component behaviour, responsive behaviour, fallbacks and QA.

Loading the implementation bundle…

Agent tags

The vocabulary a coding agent can match this style on.

  • bevel
  • inset-well
  • surface-texture
  • directional-light
  • tactile-depth