skeuomorphism

Skeuomorphism

"Digital interfaces that look and behave like their physical counterparts."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Realistic Textures: Leather, brushed metal, wood grain, paper. The UI should feel like a physical object you can touch.
2. Physical Lighting & Depth: Intense attention to specular highlights, drop shadows, inner shadows, bevels, and ambient occlusion.
3. Real-world Metaphors: Switches that look like hardware toggles, dials with physical notches, notepads with binding rings.

Visual DNA

• Colors: Highly dependent on the material being simulated. For rich, classic skeuomorphism, use the Industrial Chic (for metal/hardware) or Monochromatic Brown (for wood/leather) palettes.
• Typography: Fonts that match the physical object (e.g., typewriter fonts for paper, LCD fonts for digital screens, embossed sans-serifs for hardware buttons).
• Details: Screws, stitching, glare, and gradients are your primary tools.

Web Implementation

• Heavy use of layered background images (textures), complex gradients, and multiple box-shadows.
• CSS Example:

.skeuo-button {
  /* Brushed metal effect */
  background: linear-gradient(180deg, #e0e0e0