Design for AI

Skeuomorphism: UI design prompt

Palette, type rules and a pasteable prompt for skeuomorphism. Also called skeuomorphic design, realistic UI, iOS 6 style, leather and linen UI, skeuomorph revival. 2007-2013 (iPhone to iOS 6); revival interest 2023 onward.

Traits

  • interfaces imitate physical materials: leather, linen, brushed metal, wood, glass, paper
  • realistic lighting: gradients that model a light from the top, highlights and drop shadows
  • stitched borders, embossed text, bevelled buttons, knobs and toggles that look mechanical
  • textures via repeating images or SVG noise; nothing is flat
  • objects behave physically: pages curl, switches slide, dials rotate
  • strong depth ordering with multiple shadow layers
  • warm, tactile colour: tan, dark brown, steel grey, felt green

Palette

#3b2a1e leather brown, #d9c8a9 stitching, #b8b8b8 brushed metal, #f4efe4 paper, #1f1f1f text, #2f6b3a felt green

Type

Helvetica-like (Arimo, Work Sans) for UI, Marker Felt-style is commercial; use Lora or Georgia for "paper" content; sizes 15-17px UI, 20px paper; text often embossed with a 1px white text-shadow below

Do

  • model one light source top-left and keep every gradient, highlight and shadow consistent with it
  • use textures from SVG noise or small tiling images; keep each under 20KB
  • make controls look like their physical counterpart (a real toggle, a real dial) and animate them physically

Don't

  • do not mix material metaphors on one panel; leather nav with metal buttons is fine, leather buttons on metal is not
  • do not use flat icons; icons need the same lighting as the surfaces
  • do not use it site-wide for reading content; reserve for controls and chrome, keep text on plain paper

Known for it: iOS 6 (Notes, Game Center, Find My Friends), Apple Podcasts 2012, Things 2, Garageband

CSS seed
:root {
  --bg: #3b2a1e;
   --paper: #f4efe4;
   --fg: #1f1f1f;
   --metal: linear-gradient(#e6e6e6,#a8a8a8);
   --stitch: #d9c8a9;
   --radius: 10px;
   --shadow: 0 2px 4px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.4);
   --font: 'Work Sans',sans-serif
}
Prompt

Build the site in skeuomorphic style. Nav and footer are dark leather: background #3b2a1e with an SVG noise texture (feTurbulence baseFrequency 0.8, opacity 0.15), a dashed 1px #d9c8a9 stitched line inset 6px from the edge, and inset 0 1px 0 rgba(255,255,255,0.15) for a top highlight. Content panels are paper #f4efe4 with a faint horizontal-line texture and box-shadow 0 3px 8px rgba(0,0,0,0.45). Buttons are brushed metal: linear-gradient(#ececec,#a8a8a8), 1px border #6b6b6b, border-radius 10px, inset 0 1px 0 rgba(255,255,255,0.7), text #1f1f1f embossed with text-shadow 0 1px 0 rgba(255,255,255,0.6); active state flips to inset shadow. Toggles look like real switches with a sliding knob (200ms ease-out). Font Work Sans at 16px for UI, Lora at 19px for paper content. One light source top-left in every gradient. No flat icons; icons get a gradient fill and a 1px bottom highlight.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in skeuomorphic style. Nav and footer are dark leather: background #3b2a1e with an SVG noise texture (feTurbulence baseFrequency 0.8, opacity 0.15), a dashed 1px #d9c8a9 stitched line inset 6px from the edge, and inset 0 1px 0 rgba(255,255,255,0.15) for a top highlight. Content panels are paper #f4efe4 with a faint horizontal-line texture and box-shadow 0 3px 8px rgba(0,0,0,0.45). Buttons are brushed metal: linear-gradient(#ececec,#a8a8a8), 1px border #6b6b6b, border-radius 10px, inset 0 1px 0 rgba(255,255,255,0.7), text #1f1f1f embossed with text-shadow 0 1px 0 rgba(255,255,255,0.6); active state flips to inset shadow. Toggles look like real switches with a sliding knob (200ms ease-out). Font Work Sans at 16px for UI, Lora at 19px for paper content. One light source top-left in every gradient. No flat icons; icons get a gradient fill and a 1px bottom highlight.

## Tokens
:root { --bg:#3b2a1e; --paper:#f4efe4; --fg:#1f1f1f; --metal:linear-gradient(#e6e6e6,#a8a8a8); --stitch:#d9c8a9; --radius:10px; --shadow:0 2px 4px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.4); --font:'Work Sans',sans-serif }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.