Surface
Simulated real materials
The surface clearly resembles paper, leather, wood, fabric, or metal.
SkillCodexOpen favorites and history
Established movement
The interface imitates a real object through materials, lighting, and physical details.
Also called: skeuomorphic design, realistic UI, real-world metaphor UI
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.
The four defining signals should remain visible without relying on the style name.
Surface
The surface clearly resembles paper, leather, wood, fabric, or metal.
Depth
Highlights, bevels, and inner shadows describe a coherent light source.
Layout
The whole surface is drawn as the object it replaces, such as a notebook or console.
Geometry
Stitching, embossing, and crafted edges extend the chosen material logic.
Decisive difference with the closest neighbor
Understand → Recognize → Choose → Compare
Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.
implementation
# 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. ## Non-goals - 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.
sha256:f16706dc0ca27ee2fafb7b3776669ea8ad51bcb52adab57d9dc5b9a199b48fb7
debugging
# Debug Skeuomorphism in your agent ## Observed symptom [DÉCRIS ICI LE SYMPTÔME] ## 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.
sha256:bcefef0be97f70f9bd5a45ed9201c9f44f5c48e98e3f422c9f769fd30e8a97dc
Pack digest: sha256:acbd531981db8d5b9e79c2fc103c599810a6126665dbd5e5c4be15d8de11e3c0