Skip to content
SkillCodex
Updated
Version
v1.3.0
Sources
2 sources
Status
Published

Terminology classification · Established movement

Skeuomorphism

The interface imitates a real object through materials, lighting, and physical details.

Also called: skeuomorphic design, realistic UI, real-world metaphor UI

Paper notebook with depth and material details.

Understand

Definition and scope

Skeuomorphism carries recognizable objects and materials into the interface. Paper, leather, metal, relief, and crafted details help explain how a control behaves.

Scope: This entry covers the visual style. An interaction metaphor such as a trash can for deleting a file applies the same principle at a conceptual level.

Recognize

The four defining signals should remain visible without relying on the style name.

Surface

Simulated real materials

The surface clearly resembles paper, leather, wood, fabric, or metal.

Depth

Physical lighting

Highlights, bevels, and inner shadows describe a coherent light source.

Layout

Object metaphor

The whole surface is drawn as the object it replaces, such as a notebook or console.

Geometry

Crafted details

Stitching, embossing, and crafted edges extend the chosen material logic.

Choose

Good context

  • A specialized tool where the real object immediately explains the interaction.
  • A narrative or heritage experience where material carries brand meaning.

Misuse

  • Mixing leather, metal, glass, and wood without a guiding object.
  • Replacing accessible labels and states with an ambiguous visual imitation.

Compare

Decisive difference with the closest neighbor

Ready-to-use briefs

Choose the intent that matches your work, then copy this static brief into your agent.

Create

Create this surface with skeuomorphism around one identifiable real object. Simulate its material, apply coherent lighting, and use physical details only to clarify affordance.

Modify

Preserve functional structure, then apply one material metaphor to primary controls. Harmonize light direction, relief, and texture instead of adding competing materials.

Repair

Repair the rendering by removing ornaments that do not match the chosen material or object. Strengthen labels, states, and contrast so decoration never carries meaning alone.

Understand → Recognize → Choose → Compare

Pack for your agent

Pre-written instructions to paste into your agent. Copying executes nothing.

Implement correctly

Create a coherent Skeuomorphism direction

# Implement Skeuomorphism in your agent

## Objective
Create this surface with skeuomorphism around one identifiable real object. Simulate its material, apply coherent lighting, and use physical details only to clarify affordance.

## Prerequisites
- Inspect existing components, tokens, and brand constraints.
- Confirm that this style fits the surface and content.
- Preserve existing structure, semantics, and interactions.

## Behavior and surfaces
- Simulated real materials — The surface clearly resembles paper, leather, wood, fabric, or metal.
- Physical lighting — Highlights, bevels, and inner shadows describe a coherent light source.
- Object metaphor — The whole surface is drawn as the object it replaces, such as a notebook or console.
- Crafted details — Stitching, embossing, and crafted edges extend the chosen material logic.

## States
- Cover existing default, hover, focus, active, disabled, loading, and error states.
- Provide a static state when reduced motion is requested.

## Accessibility
- Measure contrast against the busiest region of every texture.
- Pair relief and shine with a color, text, or programmatic state change.
- Compress textures and ensure the interface remains usable without them.

## When not to use
- Mixing leather, metal, glass, and wood without a guiding object.
- Replacing accessible labels and states with an ambiguous visual imitation.

## Acceptance criteria
- A specialized tool where the real object immediately explains the interaction.
- A narrative or heritage experience where material carries brand meaning.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.
  • Requires · Existing tokens, components, and brand constraints
Why it works
  • The style is framed by signals and surfaces, not just a visual reference.
  • States and fallbacks preserve use when motion or an API is unavailable.
  • Accessibility and performance criteria prevent aesthetics from becoming debt.

Try next

Audit Skeuomorphism in the product

# Audit Skeuomorphism on the real surface

## Objective
Check that Skeuomorphism remains consistent, accessible, and measured on the components that actually use it.

## Checks
- Compare interactive states and fallbacks.
- Check contrast, focus, and reduced motion.
- Report visual effects that weaken hierarchy or performance.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

sha256:caaf996644618a871a2baf0e31efd8b10d314de95999d6e5db8b0a3003e0595b

Diagnose a problem

Fix Skeuomorphism inconsistencies

# Debug Skeuomorphism in your agent

## Observed symptom
[DESCRIBE THE SYMPTOM HERE]

## Observable checks
- Compare the surface with the documented visual signals.
- Verify contrast, focus, reduced motion, and fallback behavior.
- Isolate the visual layer without changing functional structure.

## Possible causes
- The style hides hierarchy or reduces contrast.
- The effect is applied to too many surfaces or depends on an unavailable API.
- An interactive state is no longer perceivable.

## Bounded corrections
Repair the rendering by removing ornaments that do not match the chosen material or object. Strengthen labels, states, and contrast so decoration never carries meaning alone.

## Final verification
- Measure contrast against the busiest region of every texture.
- Pair relief and shine with a color, text, or programmatic state change.
- Compress textures and ensure the interface remains usable without them.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.
  • Requires · Existing tokens, components, and brand constraints
Why it works
  • The diagnosis compares observable signals instead of judging taste.
  • The visual layer is isolated to preserve structure and interactions.
  • The fix stays tied to fallbacks, contrast, and interactive states.

Try next

Stabilize Skeuomorphism in the design system

# Prevent Skeuomorphism drift

## Objective
Turn the visual fix into a reusable rule and focused check without freezing the whole interface.

## Checks
- Isolate the responsible tokens or variants.
- Add focused evidence for the affected states.
- Compare nearby styles before widening the rule.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

sha256:f3f91e96cc886d3d423f938454dfc5fada669bf5a0f376d1641722be45dc93f5

Full entry, saving and provenance

Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

Pack digest: sha256:f75d3bc549dbbcc1bbff2220c515e718ad6b35c94801ff349ebbbc07b640b4fd

Accessibility and verification

  1. 1Measure contrast against the busiest region of every texture.
  2. 2Pair relief and shine with a color, text, or programmatic state change.
  3. 3Compress textures and ensure the interface remains usable without them.

Sources

Content revision
1.3.0
Sources consulted on
2026-07-20
Source catalog digest
sha256:e2e112ed9b0cabe7c6e72351765c2d7c1d0d309274926a8b1efe2aa9aa4f66b6
sha256-utf8-canonical-json-lf/v1
Open the versioned source catalog