Style · 21

Skeuomorphic

Skeuomorphic = realistic material gradients, bevels, inset shadows, gloss; the UI mimics a physical object.

Beveled panels. Glossy buttons. Real material.

North Search docs

Real material. Real depth.

Real material. Real depth. Beveled panels, glossy buttons, a linen ground.

Molded panel

Material

Bevel

A lit top edge and a recessed bottom. Molded, not printed.

Gloss

Primary buttons keep a visible top highlight.

Depth

Inset fields, raised controls. That contrast is the language.

Showcase

Product promo Skeuomorphic

Premium tool Skeuomorphic · Dark UI

Glossy card Skeuomorphic · Y2K

Page Overall

Page

Formulas stay in English so you can paste them straight into your tool.

STYLE
- Skeuomorphic: realistic material gradients, beveled edges, inset fields, glossy buttons, a soft linen ground
- Background a warm linen wash linear-gradient(180deg, #F3EBDA 0%, #E6D4B3 100%); panels are molded material, not flat slabs
- Accent burnt orange #C2410C for kickers; glossy blue #2F6FB0 for primary actions; ink #3A2E1C; rim #CBB89A
- Radius 14px on panels, 10px on buttons. Every surface carries a top bevel inset 0 1px 0 #FFFFFF and a soft drop shadow
- Type: a humanist sans (Inter / Georgia for display) over the linen. No neon, no gradient mesh

LAYOUT
- Container max-width 1120px. Linen wallpaper; every block is a molded panel with a lit top edge
- Top bar is a molded chrome: wordmark left, three links, search field, glossy CTA — beveled, 12px off the top
- Fields and inputs are recessed (inset shadow), controls are raised (drop shadow) — that contrast is the language

SECTIONS
1. Hero: a large embossed panel, headline "Real material. Real depth.", kicker NEW, one dek line, glossy CTA Start free plus embossed See the kit
2. Three embossed value cards: Material, Bevel, Gloss — kicker, one line, Read more each
3. Feature band: two columns, left a recessed cover block, right a short list of four claims
4. Pricing strip: three embossed columns, the middle one glossy blue with white text
5. Closing CTA band: a wide embossed panel with one glossy CTA
6. Three-column embossed footer: Product / Company / Colophon

INTERACTION
- Hover lifts each panel 2px and deepens its drop shadow; the top bevel brightens. Glossy buttons press on :active
- Focus is a 2px solid #C2410C outline, never a glow ring
- Inset fields should visibly recess on focus — that is the physical read

MOTION
- Motion is tactile and short: 160ms ease for lifts and presses, no overshoot, no bounce
- Use ease, not steps; surfaces settle like physical objects
- Entrance is a 8px rise with the bevel fading in, staggered 50ms per card
- prefers-reduced-motion: no rise, no stagger, panels appear instantly

TECHNICAL
- React, Tailwind CSS, a .panel surface utility (material gradient + bevel + drop). One homepage route.

DON'Ts
- Do not call this neumorphism: skeuomorphic has visible material gradients and gloss, not a same-hue soft extrude
- Do not call this claymorphism: edges are beveled and crisp, not inflated and pillowy
- No flat solid fills, no gradient mesh, no neon, no glass
- Do not output only a headline plus two empty cells. Do not make every surface matte

Card

Formulas stay in English so you can paste them straight into your tool.

Build a single Skeuomorphic card. Not a page, not a dashboard.

STYLE
- Skeuomorphic: a panel that reads as molded material — a soft top bevel and a recessed bottom edge
- Fill linear-gradient(180deg, #FFFDF8 0%, #EFE7D6 100%); border 1px solid #CBB89A; radius 14px
- Shadow inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(0, 0, 0, 0.06), 0 4px 10px rgba(60, 40, 10, 0.18)
- Kicker in #C2410C; title in ink #3A2E1C. The card looks embossed, not printed

LAYOUT
- One card only: kicker, title, one-line summary, one primary button
- No navbar, no secondary tiles, no image

INTERACTION
- Hover lifts the panel 2px and deepens the drop shadow; the top bevel brightens. Never a flat fade

CONSTRAINTS
- This is NOT neumorphism: the material has a visible gradient and gloss, not a same-hue soft extrude
- This is NOT claymorphism: edges are beveled and crisp, not inflated and pillowy
- No flat solid fills, no gradient mesh, no neon

TECHNICAL
- React, Tailwind CSS, a .panel surface utility (material gradient + bevel + drop). One component

Buttons

Formulas stay in English so you can paste them straight into your tool.

Build a Skeuomorphic button row only: Continue (glossy), Save (embossed), Skip (ghost). Not a card, not a page.

STYLE
- Radius 10px. Continue: glossy blue linear-gradient(180deg, #5AA0F2 0%, #2F6FB0 100%), white label, 1px #2A639F rim
- Gloss is a top highlight inset 0 1px 0 rgba(255, 255, 255, 0.7); drop 0 3px 6px rgba(20, 50, 90, 0.4)
- Save: embossed panel linear-gradient(180deg, #FFFDF8, #E9DFC8), ink label, 1px #CBB89A border
- Skip is text only in #6B5A3A

LAYOUT
- One horizontal row, 12px gap. No card chrome, no helper text

INTERACTION
- Hover brightens the gloss and presses the button 1px (active scale 0.98). Gloss stays on top

CONSTRAINTS
- Every primary button keeps a visible gloss; matte buttons lose the skeuomorphic read
- No square corners, no neon text, no flat fills

TECHNICAL
- React, Tailwind CSS, restyle shadcn Button into glossy and embossed variants

Navbar

Formulas stay in English so you can paste them straight into your tool.

Build a Skeuomorphic site navbar only, as a molded title bar. Not tabs, not a page.

STYLE
- Bar fill linear-gradient(180deg, #FFFDF8, #E6D4B3) with a 1px #CBB89A top bevel; radius 12px
- Wordmark NORTH in #3A2E1C weight 700; two links in #3A2E1C at 75% alpha
- CTA Continue: glossy blue pill with rim and gloss

LAYOUT
- Single horizontal chrome: wordmark left, two links, CTA right. No dropdown

INTERACTION
- Bar hover deepens the bevel; CTA presses on :active with an inset shadow

CONSTRAINTS
- The bar must read as a physical strip with a lit top edge; a flat bar is the wrong style
- No thin hairlines as the only border, no neon, no gradient mesh

TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation into a molded bar

Tabs

Formulas stay in English so you can paste them straight into your tool.

Build a Skeuomorphic Tabs component with three tabs: Overview (selected), Billing, Activity. Not a navbar, not a page.

STYLE
- Tabs are embossed pills; selected tab is glossy blue linear-gradient(180deg, #5AA0F2, #2F6FB0) with white label weight 700 and a rim
- Unselected tabs are text in #3A2E1C at 60% alpha
- Panel: embossed panel with bevel and 10px drop shadow, 14px radius

LAYOUT
- Horizontal pill tablist plus one panel below. No wordmark, no CTA

INTERACTION
- Switching tabs slides the gloss fill; selected locks brighter. No bounce

CONSTRAINTS
- Panel and selected tab must both read as molded material; no matte panels
- No square tabs, no neon, no flat fill

TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs into embossed pills

What is Skeuomorphic?

Skeuomorphism mimics real objects. Name a material gradient, an inset bevel, and a gloss highlight, then let the surface read as physical. It is the opposite of flat: texture and depth stand in for color.

Elements

Material gradients
Beveled edges
Inset + gloss

Put this word in the prompt.

Typical colors

#C2410C
#2F6FB0
#3A2E1C

Use on

Product promo
Premium tools
Touch-first interfaces

Prompt formula

[Component] + Skeuomorphic + Material gradient + Bevel + Gloss

BUILD - Build a complete Skeuomorphic marketing homepage. Not a card, not an isolated navbar, not a dashboard, not tabs. - Domain from Use on: product promo and premium tools first; enterprise reuses the bevels, not the linen warmth. STYLE - Skeuomorphic: realistic material gradients, beveled edges, inset fields, glossy buttons, a soft linen ground - Background a warm linen wash linear-gradient(180deg, #F3EBDA 0%, #E6D4B3 100%); panels are molded material, not flat slabs - Accent burnt orange #C2410C for kickers; glossy blue #2F6FB0 for primary actions; ink #3A2E1C; rim #CBB89A - Radius 14px on panels, 10px on buttons. Every surface carries a top bevel inset 0 1px 0 #FFFFFF and a soft drop shadow - Type: a humanist sans (Inter / Georgia for display) over the linen. No neon, no gradient mesh LAYOUT - Container max-width 1120px. Linen wallpaper; every block is a molded panel with a lit top edge - Top bar is a molded chrome: wordmark left, three links, search field, glossy CTA — beveled, 12px off the top - Fields and inputs are recessed (inset shadow), controls are raised (drop shadow) — that contrast is the language SECTIONS 1. Hero: a large embossed panel, headline "Real material. Real depth.", kicker NEW, one dek line, glossy CTA Start free plus embossed See the kit 2. Three embossed value cards: Material, Bevel, Gloss — kicker, one line, Read more each 3. Feature band: two columns, left a recessed cover block, right a short list of four claims 4. Pricing strip: three embossed columns, the middle one glossy blue with white text 5. Closing CTA band: a wide embossed panel with one glossy CTA 6. Three-column embossed footer: Product / Company / Colophon INTERACTION - Hover lifts each panel 2px and deepens its drop shadow; the top bevel brightens. Glossy buttons press on :active - Focus is a 2px solid #C2410C outline, never a glow ring - Inset fields should visibly recess on focus — that is the physical read MOTION - Motion is tactile and short: 160ms ease for lifts and presses, no overshoot, no bounce - Use ease, not steps; surfaces settle like physical objects - Entrance is a 8px rise with the bevel fading in, staggered 50ms per card - prefers-reduced-motion: no rise, no stagger, panels appear instantly TECHNICAL - React, Tailwind CSS, a .panel surface utility (material gradient + bevel + drop). One homepage route. DON'Ts - Do not call this neumorphism: skeuomorphic has visible material gradients and gloss, not a same-hue soft extrude - Do not call this claymorphism: edges are beveled and crisp, not inflated and pillowy - No flat solid fills, no gradient mesh, no neon, no glass - Do not output only a headline plus two empty cells. Do not make every surface matte

Skeuomorphic

Real material. Real depth.

Bevel

Gloss

Depth

Skeuomorphic

What is Skeuomorphic?

Elements

Typical colors

Use on

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns