Skeuomorphism

Also called: Skeuomorphic UI, Realistic UI, iOS 6 style

Interfaces dressed in real materials — stitched leather, brushed metal, linen, paper and glossy buttons — so every control looks like the object it replaces.

“Real materials”Soft & DimensionalEra: 2007–2013, revived 2020sNostalgicLuxuryFriendly

Open full screen ↗

skeuomorphism / landingEN

skeuomorphism / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm5pxRadius md9pxRadius lg12pxRadius xl18pxDensity×1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

stitched leatherbrushed metal toolbarlinen backgroundglossy bevelled buttonsembossed letterpress textpaper cardsLCD readoutlabel-maker tape

Skeuomorphism borrows the look of physical things so people instantly know how to use them. Toolbars are brushed aluminium with embossed labels, panels are stitched leather, content sits on cream paper over a linen desk, buttons are glossy and bevelled, displays glow like backlit LCDs and labels look like embossed tape. Every material is drawn with gradients, fine textures, inner highlights and real drop shadows. It is warm, tactile and nostalgic — ideal for media, reading and hobby apps that want character.

Best for

News, magazine and reading apps
Music, radio and podcast players
Notes, journals and hobby tools
Brands with a crafted, heritage personality

Avoid for

Minimal modern SaaS
Dense enterprise dashboards
Low-power devices with many textured layers

✓ Do

Give each material a job: brushed metal = web toolbar and stat plaques, leather = dashboard sidebar, hero folio, featured plan and CTA, paper = content, linen = desk, wood = feature shelves; keep ≤ 4 large-area materials per screen
Use one light from the top (slightly left): 1px white top highlight, darker bottom edge, drop shadow falling straight down
Emboss text on metal with text-shadow 0 1px 0 rgba(255,255,255,.6)
Draw every texture with CSS gradients so it stays crisp and light

✕ Don't

Don’t use photos as textures or let noise reduce text contrast
Don’t light from below or from more than one direction; no white bottom edges
Don’t make every surface a different material — content stays on plain paper
Don’t use flat, borderless buttons
Don’t put Thai text in the LCD mono face; it has no Thai glyphs

Not to be confused with

Neumorphism →Neumorphism is one abstract matte colour with soft shadows; Skeuomorphism imitates specific real materials with textures, gloss and stitching.3D & Hyperrealism →3D & Hyperrealism renders dramatic glossy 3D objects with deep perspective on dark stages; Skeuomorphism dresses flat UI panels in everyday materials.Frutiger Aero →Frutiger Aero is sky-blue glass, water bubbles and aqua gloss; Skeuomorphism is leather, metal, linen and paper in warm neutrals.

On mobile

Classic iOS 6 recipe: brushed-metal app bar with embossed title, paper content on linen, a dark glossy bottom tab bar whose active icon is lit and sits in a glass square, and leather-stitched hero cards. Keep textures as tiny CSS gradients (no images) and limit stacked shadows on long lists.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinBitter · 600/700/800

The quick brown fox

Heading · ThaiPridi · 500/600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinSource Sans 3 · 400/600/700

Clear words make shared decisions.

Body · ThaiSarabun · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Pridi’s slab-like serifs echo Bitter’s printed-label weight, and Sarabun is the classic looped Thai text face that reads like real print next to Source Sans 3.

Colour palette

Design tokens

Radius	`sm 5px · md 9px · lg 12px · xl 18px · pill 999px`
Border	`1px`
Shadow	`0 2px 3px rgba(40,25,10,0.25), 0 10px 22px -6px rgba(40,25,10,0.35), inset 0 1px 0 rgba(255,255,255,0.75)`
Display	`clamp(2.6rem, 5.4vw, 4.4rem)`
Motion	`140ms ease-out`
Density	`×1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Skeuomorphism (skeuomorphism) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a light mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Bitter:wght@600;700;800&family=Source+Sans+3:wght@400;600;700&family=Share+Tech+Mono:wght@400&family=Pridi:wght@500;600;700&family=Sarabun:wght@400;500;600&display=swap
 */
:root {
  --radius: 12px;
  --background: #D9D3C5;
  --foreground: #2A211B;
  --card: #F7F1E3;
  --card-foreground: #2A211B;
  --popover: #F7F1E3;
  --popover-foreground: #2A211B;
  --primary: #8E3B1E;
  --primary-foreground: #FFF6E8;
  --secondary: #46515C;
  --secondary-foreground: #FFFFFF;
  --muted: #ECE4D2;
  --muted-foreground: #55483B;
  --accent: #ECE4D2;
  --accent-foreground: #2A211B;
  --destructive: #A8281E;
  --border: #A89C86;
  --input: #A89C86;
  --ring: #8E3B1E;
  --chart-1: #8E3B1E;
  --chart-2: #B8862B;
  --chart-3: #4A6E8A;
  --chart-4: #5E7D3A;
  --chart-5: #7A6A58;
  --sidebar: #F7F1E3;
  --sidebar-foreground: #2A211B;
  --sidebar-primary: #8E3B1E;
  --sidebar-primary-foreground: #FFF6E8;
  --sidebar-accent: #ECE4D2;
  --sidebar-accent-foreground: #2A211B;
  --sidebar-border: #A89C86;
  --sidebar-ring: #8E3B1E;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Skeuomorphism (skeuomorphism) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a light mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Bitter:wght@600;700;800&family=Source+Sans+3:wght@400;600;700&family=Share+Tech+Mono:wght@400&family=Pridi:wght@500;600;700&family=Sarabun:wght@400;500;600&display=swap
 */
@theme {
  --color-bg: #D9D3C5;
  --color-surface: #F7F1E3;
  --color-surface-2: #ECE4D2;
  --color-text: #2A211B;
  --color-text-muted: #55483B;
  --color-primary: #8E3B1E;
  --color-on-primary: #FFF6E8;
  --color-secondary: #46515C;
  --color-on-secondary: #FFFFFF;
  --color-accent: #B8862B;
  --color-border: #A89C86;
  --color-success: #3B7A2C;
  --color-warning: #946000;
  --color-danger: #A8281E;
  --color-chart-1: #8E3B1E;
  --color-chart-2: #B8862B;
  --color-chart-3: #4A6E8A;
  --color-chart-4: #5E7D3A;
  --color-chart-5: #7A6A58;
  --radius-sm: 5px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(40,25,10,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-md: 0 2px 3px rgba(40,25,10,0.25), 0 10px 22px -6px rgba(40,25,10,0.35), inset 0 1px 0 rgba(255,255,255,0.75);
  --shadow-lg: 0 4px 6px rgba(40,25,10,0.25), 0 24px 48px -12px rgba(40,25,10,0.45), inset 0 1px 0 rgba(255,255,255,0.75);
  --font-heading: "Bitter", "Pridi", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Sarabun", system-ui, sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, "Sarabun", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Skeuomorphism (skeuomorphism). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Bitter:wght@600;700;800&family=Source+Sans+3:wght@400;600;700&family=Share+Tech+Mono:wght@400&family=Pridi:wght@500;600;700&family=Sarabun:wght@400;500;600&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.8275,
            0.7725
          ],
          "hex": "#d9d3c5"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9686,
            0.9451,
            0.8902
          ],
          "hex": "#f7f1e3"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9255,
            0.8941,
            0.8235
          ],
          "hex": "#ece4d2"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1294,
            0.1059
          ],
          "hex": "#2a211b"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3333,
            0.2824,
            0.2314
          ],
          "hex": "#55483b"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5569,
            0.2314,
            0.1176
          ],
          "hex": "#8e3b1e"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9647,
            0.9098
          ],
          "hex": "#fff6e8"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2745,
            0.3176,
            0.3608
          ],
          "hex": "#46515c"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.5255,
            0.1686
          ],
          "hex": "#b8862b"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.6118,
            0.5255
          ],
          "hex": "#a89c86"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.4784,
            0.1725
          ],
          "hex": "#3b7a2c"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5804,
            0.3765,
            0
          ],
          "hex": "#946000"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.1569,
            0.1176
          ],
          "hex": "#a8281e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5569,
            0.2314,
            0.1176
          ],
          "hex": "#8e3b1e"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.5255,
            0.1686
          ],
          "hex": "#b8862b"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.4314,
            0.5412
          ],
          "hex": "#4a6e8a"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3686,
            0.4902,
            0.2275
          ],
          "hex": "#5e7d3a"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4784,
            0.4157,
            0.3451
          ],
          "hex": "#7a6a58"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 5,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 9,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1569,
              0.098,
              0.0392
            ],
            "hex": "#28190a",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "hex": "#ffffff",
            "alpha": 0.6
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1569,
              0.098,
              0.0392
            ],
            "hex": "#28190a",
            "alpha": 0.25
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 3,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1569,
              0.098,
              0.0392
            ],
            "hex": "#28190a",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 10,
            "unit": "px"
          },
          "blur": {
            "value": 22,
            "unit": "px"
          },
          "spread": {
            "value": -6,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "hex": "#ffffff",
            "alpha": 0.75
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1569,
              0.098,
              0.0392
            ],
            "hex": "#28190a",
            "alpha": 0.25
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 6,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1569,
              0.098,
              0.0392
            ],
            "hex": "#28190a",
            "alpha": 0.45
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 24,
            "unit": "px"
          },
          "blur": {
            "value": 48,
            "unit": "px"
          },
          "spread": {
            "value": -12,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "hex": "#ffffff",
            "alpha": 0.75
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Bitter",
        "Pridi",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Source Sans 3",
        "Sarabun",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Share Tech Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Sarabun",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 140,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0,
      0,
      0.58,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!