# Skeuomorphism > Interfaces dressed in real materials — stitched leather, brushed metal, linen, paper and glossy buttons — so every control looks like the object it replaces. - Nickname: Real materials - Also called: Skeuomorphic UI, Realistic UI, iOS 6 style - Category: Soft & Dimensional - Moods: Nostalgic, Luxury, Friendly - Industries: Media & Entertainment, Creative & Portfolio, Luxury & Premium, Food & Restaurant, Education - Style page: https://uilingo.dev/styles/skeuomorphism/ 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 ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Skeuomorphism" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Interfaces dressed in real materials — stitched leather, brushed metal, linen, paper and glossy buttons — so every control looks like the object it replaces. Design keywords: stitched leather, brushed metal toolbar, linen background, glossy bevelled buttons, embossed letterpress text, paper cards, LCD readout, label-maker tape. ## Visual language The app is a well-made physical object on a linen desk. Content sits on warm cream paper cards, the web top bar is brushed aluminium with embossed labels, the dashboard sidebar, hero folio, featured plan and CTA are dark brown stitched leather, buttons are glossy and bevelled like real keys, numbers glow on backlit green LCD readouts and section labels look like black label-maker tape. Light comes from the top (slightly left): 1px white top edges, darker bottom edges, soft drop shadows falling straight down. Warm, crafted and nostalgic — think iOS 6 Newsstand meets a leather notebook. ## Signature details (must be visible) - Linen desk background: two 1px repeating-linear-gradients (white 9% horizontal, brown 6% vertical, 3px period) on #D9D3C5 with a vignette radial-gradient(ellipse at center, transparent 60%, rgba(60,40,20,.18)) - Stitched leather: dot-noise radial-gradient(rgba(0,0,0,.18) 1px, transparent 1.5px) 0 0 / 4px 4px over linear-gradient(170deg,#74402A,#4A2414), with a 2px dashed rgba(255,232,200,.55) stitch line inset 8–10px - Brushed metal toolbars: 1px repeating vertical streaks over linear-gradient(#F2F1EE,#C9CBC9 55%,#B4B7B6), inset 0 1px 0 #fff, 1px #7E807F bottom edge - Glossy buttons: gloss overlay linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.1) 50%, rgba(0,0,0,.06) 51%, rgba(0,0,0,.16)) on the base colour, 1px dark border, debossed text-shadow 0 -1px 0 rgba(0,0,0,.45) - Letterpress headings: text-shadow 0 1px 0 rgba(255,255,255,.65) on linen, paper and metal - LCD readouts for dashboard KPIs and the hero folio stat cards only: #1D2A1A inset panel, #B9F59A digits in a "Share Tech Mono", "Sarabun", monospace stack with a soft green glow (text-shadow 0 0 8px rgba(185,245,154,.55)); keep LCD content numeric or Latin and put Thai captions outside the LCD in Sarabun - Label-maker tape eyebrows: black gradient strip rotated -1.2deg; Latin text = white Share Tech Mono uppercase tracked .14em; Thai text = Sarabun 600, no tracking, no uppercase (the mono face has no Thai glyphs). In mixed-script labels wrap Latin runs in so uppercase and .14em tracking apply only to Latin; :lang(th) resets them - Cream paper cards (#FBF7EC→#F3ECDB) with 1px #B6A98F paper edge, top white highlight and real drop shadow; feature and price cards carry a dashed rgba(120,95,60,.45) stitch inset 7px - Per viewport keep ≤ 4 large-area materials (linen desk, paper, leather, brushed metal, wood); small accents (brass, screws, LCD, label tape) don't count. Feature rows use wood instead of paper as the large material, so a features viewport = linen + wood + paper note + metal nav (4) - Brass (CTA button, step numbers, trust icons, featured badge): --sk-brass: radial-gradient(circle at 35% 30%, #FFF0B8, #D9A93E 45%, #8A6214 100%); brass button text #3A2600, border #7A5410, text-shadow 0 1px 0 rgba(255,240,190,.7) - Text on leather = #F7E9D4, muted #E6D3B8, sidebar labels #F1DFC5; headings on leather are debossed with text-shadow 0 -1px 0 rgba(0,0,0,.45); check icons on leather #E7C065 - Declared extra colours: input border #8F826B, paper edge #B6A98F, metal edge #7E807F, LCD #1D2A1A / #B9F59A, paper stitch rgba(120,95,60,.45), brass #FFF0B8 / #D9A93E / #8A6214 with #3A2600 text and #7A5410 border, leather text #F7E9D4 / #E6D3B8 / #F1DFC5, leather check #E7C065, screws #5B5D5C / #9A9C9B, graph-paper line rgba(74,110,138,.12), ruled-note line rgba(60,40,20,.12), inactive folder tab #E2D8C3, selected tab and field #FFFDF8 ## Design tokens — use these exact values Colours (light mode): - background #D9D3C5 - surface #F7F1E3 - surface-2 #ECE4D2 - text #2A211B - text-muted #55483B - primary #8E3B1E (text on it #FFF6E8) - secondary #46515C (text on it #FFFFFF) - accent #B8862B - border #A89C86 - success #3B7A2C · warning #946000 · danger #A8281E - chart series #8E3B1E, #B8862B, #4A6E8A, #5E7D3A, #7A6A58 Radius: sm 5px, md 9px, lg 12px, xl 18px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(40,25,10,0.35), inset 0 1px 0 rgba(255,255,255,0.6)`, 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)`, 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)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 140ms ease-out ## Typography (Latin + Thai) - Headings: Bitter 600/700/800 with Thai fallback Pridi 500/600/700 - Body: Source Sans 3 400/600/700 with Thai fallback Sarabun 400/500/600 - Mono: Share Tech Mono - Google Fonts URL: 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 - CSS stacks: heading `"Bitter", "Pridi", system-ui, sans-serif`; body `"Source Sans 3", "Sarabun", system-ui, sans-serif`; mono `"Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, "Sarabun", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Sarabun — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 5.4vw, 4.4rem), heading weight 700, heading tracking -0.01em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Primary button: glossy saddle-leather red key (#8E3B1E) with cream text — the only leather-red control; hover brightens 6%; pressed darkens and swaps to an inner shadow. Leather panels: hero folio, featured price card, CTA, dashboard sidebar, mobile featured card - Secondary button: brushed-metal key with dark embossed text and grey border - Inputs: recessed cream field, 1px #8F826B border, inset 0 2px 3px shadow and a white bottom highlight; focus adds a 3px brass glow - Switch: grey recessed track with a chrome ball knob; ON = glossy leather-red track - Segmented control: joined metal keys with 1px dividers; selected key is glossy steel-blue and pressed in - Tabs: folder tabs with 8px top radius — inactive tabs #E2D8C3 with a 1px #8F826B border, the selected tab #FFFDF8 with the same border and no bottom edge so it joins the paper panel below - Badges: small glossy pills in status colours with white debossed text; the 'featured' badge is a brass coin gradient - Charts: lines on a blue graph-paper grid = repeating-linear-gradient(0deg, transparent 0 19px, rgba(74,110,138,.12) 19px 20px), repeating-linear-gradient(90deg, transparent 0 19px, rgba(74,110,138,.12) 19px 20px); bars as glossy cylinders (vertical highlight overlay), donut with a real drop shadow, ledger-striped tables - Navigation: web top bar = brushed metal with embossed labels; dashboard sidebar = stitched leather with debossed cream labels and pressed-in active items; mobile tab bar = dark glossy iOS 6 bar with a lit gold active icon - Wood shelf (feature art): repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 7px) over linear-gradient(180deg, #9A6236, #6E3F1F); a 10px darker lip at the bottom #5A3218 with inset 0 1px 0 rgba(255,255,255,.25); about 300px tall holding a tilted (-4deg) ruled paper note = repeating-linear-gradient(180deg, transparent 0 14px, rgba(60,40,20,.12) 14px 15px) over the cream paper gradient - Landing stats = brushed-metal plaques (radius 6px, 1px #7E807F) with embossed Bitter numbers (text-shadow 0 1px 0 rgba(255,255,255,.65)) and four screws, each radial-gradient(circle at 12px 12px, #5B5D5C 0 2.5px, #9A9C9B 3px, transparent 4px), one in every corner - Footer = brushed-metal bar with embossed links and a 1px #7E807F top edge ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → features → showcase → stats → testimonials → pricing → cta. Feature section as alternating. Split hero: letterpress headline, label-tape eyebrow, glossy leather-red and metal keys, and the product shot mounted inside a stitched leather folio: the folio holds a paper chart card plus two LCD stat cards (a dashboard preview). Features alternate copy with ~300px wooden shelf panels holding a tilted ruled paper note and an icon. The showcase is a large paper panel with folder tabs (the selected tab joins the panel) holding 3 story cards with coloured cover blocks. Stats are brushed-metal plaques with embossed numbers and four screws, testimonials and pricing are paper cards (featured plan in leather), the CTA is a stitched leather panel with a brass button, and the footer is a brushed-metal bar. Dashboards: leather sidebar, metal top bar, paper widget cards, LCD KPI numbers. ## Content Use realistic product copy (fictional brand) suited to: News, magazine and reading apps. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Photo textures or heavy noise that lowers text contrast - Flat, borderless buttons or hairline-only cards — that is flat or minimal design - Monochrome soft shadows without materials — that reads as Neumorphism - Sky-blue aqua gloss and water bubbles — that is Frutiger Aero - Dramatic dark 3D stages with perspective tilt — that is 3D & Hyperrealism - Light from more than one direction (always from the top, slightly left) or more than four large-area materials on one screen - Letter-spacing or uppercase on Thai label text ## Stack notes One self-contained HTML file with a