Hall 06

Skeuomorphism

Originated around 1984 · popular on the web around 2008

Take a souvenir

Use ← → to move between slides and F for fullscreen; the caption at the bottom is the narration.

Nº 01IntroSeen this before?Skeuomorphism

31A leather-bound calendar app

OKCandy-like blue buttons

NotesNotes on ruled paper

Making screens “touchable” has a name

Skeuomorphism

Skeuomorphic design

Stitched leather, ruled paper, jelly buttons — early touch interfaces tried hard to make everything look real.

Nº 02OriginWhere it came fromSkeuomorphism

Where it came from

Silicon Valley — the graphical interfaces of personal computers and smartphones

1984The desktop metaphor goes mainstreamThe Macintosh brings the graphical interface pioneered at Xerox PARC to a wide audience; desktop metaphors such as folders and the trash make computers understandable.

2000Aqua is unveiledApple shows the Aqua interface of Mac OS X — candy-like translucent blue buttons, pinstriped backgrounds and soft shadows — which ships with the system the following year.

2011Leather and torn paperIn OS X Lion, Calendar gets a leather texture and torn paper edges and Address Book becomes a book. Skeuomorphism peaks — and begins to draw criticism as excessive decoration.

2013iOS 7 turns flatApple releases iOS 7, removing most realistic textures and highlights, and mainstream interface design shifts toward flat design.

It began with the desktop metaphor of the 1984 Macintosh and peaked in the phone apps of around 2010.

Nº 03Rule 01Real materialsSkeuomorphism

01Rule 1

Real materials

Backgrounds and containers imitate real materials — linen, leather, paper, metal. The texture itself carries meaning.

Without “Real materials”

Team knowledge base · 2.0

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

Instant search

Full-text search across docs, comments and attachments, ranked by relevance.

Decision log

Every important decision has a source, a discussion and an owner.

Works offline

Keep writing on a plane; changes merge automatically once you are back online.

12,000+teams on board

9.8 saverage time to answer

99.95%uptime

Simple, transparent pricing

With “Real materials”

Team knowledge base · 2.0

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

Instant search

Full-text search across docs, comments and attachments, ranked by relevance.

Decision log

Every important decision has a source, a discussion and an owner.

Works offline

Keep writing on a plane; changes merge automatically once you are back online.

12,000+teams on board

9.8 saverage time to answer

99.95%uptime

Simple, transparent pricing

Rule one: real materials. Linen, leather, paper — the texture itself carries meaning.

Nº 04Rule 02Light and depthSkeuomorphism

02Rule 2

Light and depth

One consistent top light: highlights on top edges, shadows below. Buttons are raised, inputs are recessed, so you can tell at a glance what is pressable.

Without “Light and depth”

Team knowledge base · 2.0

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

Instant search

Full-text search across docs, comments and attachments, ranked by relevance.

Decision log

Every important decision has a source, a discussion and an owner.

Works offline

Keep writing on a plane; changes merge automatically once you are back online.

12,000+teams on board

9.8 saverage time to answer

99.95%uptime

Simple, transparent pricing

With “Light and depth”

Team knowledge base · 2.0

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

Instant search

Full-text search across docs, comments and attachments, ranked by relevance.

Decision log

Every important decision has a source, a discussion and an owner.

Works offline

Keep writing on a plane; changes merge automatically once you are back online.

12,000+teams on board

9.8 saverage time to answer

99.95%uptime

Simple, transparent pricing

Rule two: one top light — buttons raised, inputs recessed.

Nº 05Rule 03Glassy glossSkeuomorphism

03Rule 3

Glassy gloss

Primary buttons carry a glass reflection on their upper half, like a piece of candy you can press.

Without “Glassy gloss”

Team knowledge base · 2.0

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

Instant search

Full-text search across docs, comments and attachments, ranked by relevance.

Decision log

Every important decision has a source, a discussion and an owner.

Works offline

Keep writing on a plane; changes merge automatically once you are back online.

12,000+teams on board

9.8 saverage time to answer

99.95%uptime

Simple, transparent pricing

With “Glassy gloss”

Team knowledge base · 2.0

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

Instant search

Full-text search across docs, comments and attachments, ranked by relevance.

Decision log

Every important decision has a source, a discussion and an owner.

Works offline

Keep writing on a plane; changes merge automatically once you are back online.

12,000+teams on board

9.8 saverage time to answer

99.95%uptime

Simple, transparent pricing

Rule three: a glassy highlight makes the button a candy you want to press.

Nº 06Rule 04Real-world metaphorSkeuomorphism

04Rule 4

Real-world metaphor

Elements borrow directly from physical objects — notebooks, dials, switches, tabs — so people can rely on everyday experience.

With “Real-world metaphor”

Team knowledge base · 2.0

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

Instant search

Full-text search across docs, comments and attachments, ranked by relevance.

Decision log

Every important decision has a source, a discussion and an owner.

Works offline

Keep writing on a plane; changes merge automatically once you are back online.

12,000+teams on board

9.8 saverage time to answer

99.95%uptime

Simple, transparent pricing

Rule four: borrow from real objects so everyday experience is enough.

Nº 07Out in the worldOut in the worldSkeuomorphism

Out in the world

1984Desktop

The Macintosh brings metaphors like folders and the trash into homes everywhere.

2000Jelly buttons

Mac OS X’s Aqua interface is unveiled, and its glossy blue buttons influence interfaces and websites for years.

2007Touch

The iPhone uses realistic icons and apps so even first-time touchscreen users know where to tap.

It moved from the desktop to the phone and taught the first generation of touchscreen users.

Nº 08TodayWhat it looks like todaySkeuomorphism

What it looks like today

The sample product “Lumen” wearing this style. Scroll and click inside the frame.

Team knowledge base · 2.0

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

Instant search

Full-text search across docs, comments and attachments, ranked by relevance.

Decision log

Every important decision has a source, a discussion and an owner.

Works offline

Keep writing on a plane; changes merge automatically once you are back online.

12,000+teams on board

9.8 saverage time to answer

99.95%uptime

Simple, transparent pricing

On a product page: a leather toolbar, ruled paper and cards pinned to a desk.

Nº 09PartsTaking it apartSkeuomorphism

Buttons

Learn more »

Card

Decision log

Why we dropped weekly reports

Replacing weekly reports with short daily async updates cut our meeting time by 30%.

Design team · 3 min readRead more »

Form

Pricing

Take it apart: raised buttons, recessed inputs, and a switch that looks like a real toggle.

Nº 10DebateThe debateSkeuomorphism

The debate

After the lesson

Once people knew touchscreens, realistic materials felt redundant: they took up space, adapted poorly to different sizes and were criticized as excessive decoration. iOS 7’s turn to flat in 2013 marked the mainstream farewell — but its lessons about affordance live on.

The debate: once users have learned, are the metaphors still needed?

Nº 11Style cardStyle cardSkeuomorphism

Skeuomorphism

Skeuomorphic design

Five words to remember it

01Materials
02Light
03Gloss
04Metaphor
05Affordance

In one line: Leather, paper, glass buttons — make what is on screen look touchable.
Typefaces: Helvetica Neue / Lucida Grande
Palette
Layout: Everything sits on a "desk": paper, notebooks and cards on a linen background, with real stacking relationships between elements.
Imagery: Realistic icons and photo-like illustrations, all lit from the same top light with matching shadows.
Surface: Medium radii with 1px outlines. Raised elements use a light-top, dark-bottom inner shadow (bevel); recessed elements use an inset shadow (inset-well).
Often confused with: Neumorphism · Y2K · Glassmorphism

More formats ↓

Five words to remember it: materials, light, gloss, metaphor, affordance.

All slides

Pick any slide to jump straight to it.

Nº 01Seen this before?
Nº 02Where it came from
Nº 03Real materials
Nº 04Light and depth
Nº 05Glassy gloss
Nº 06Real-world metaphor
Nº 07Out in the world
Nº 08What it looks like today
Nº 09Taking it apart
Nº 10The debate
Nº 11Style card

Souvenir shop

Souvenir

Take Skeuomorphism home to your project

Pick a format and copy it into Claude, Cursor or any AI coding assistant — or download it into your repository.

Format

AI PromptCompact, paste straight into a chatDESIGN.mdFull design spec for your repoCSS variables:root custom propertiesTailwind v4@theme snippet

Souvenir language

中文English

skeuomorphism.prompt.md80 lines · 4394 characters

# Skeuomorphism (Skeuomorphic design)

You are building a frontend UI. Apply the **Skeuomorphism** visual style consistently to every screen and component. Treat the tokens and rules below as hard constraints, not suggestions.

## Essence

Imitating physical objects through real-world textures and lighting: stitched leather, ruled paper, brushed metal, raised glass buttons. It let people new to touchscreens and graphical interfaces see at a glance what something is and how to use it.

## Design tokens

### Colors

- `background` `#CFC8B8` — page background
- `surface` `#FBF7EC` — cards, panels and raised surfaces
- `text` `#2E2A24` — primary text
- `muted` `#625A4F` — secondary text, captions, placeholders
- `accent` `#2F6FD6` — primary actions, links, key highlights
- `on-accent` `#FFFFFF` — text and icons placed on the accent color
- `border` `#8C8372` — dividers, outlines, input borders
- `highlight` `#FFFDF6` — secondary emphasis, badges, selection

### Typography

- Display / headings: `Helvetica Neue` (system font, weights 400 / 700) → fallback `Helvetica, Arial, sans-serif`
- Body text: `Lucida Grande` (system font, weights 400 / 700) → fallback `"Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif`
- Type scale (px): 11 · 13 · 15 · 18 · 24 · 34 · 48

### Spacing & Shape

- Base unit: 4px · Spacing scale (px): 4 · 8 · 12 · 16 · 24 · 32 · 48
- Corner radius (sm / md / lg): 4 / 8 / 12 px
- Border: 1px solid
- Shadows (sm / md / lg): `0 1px 2px rgba(0, 0, 0, 0.35)` / `0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.5)` / `0 12px 24px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25)`

### Motion

- Durations (fast / base): 150ms / 300ms
- Easing: `ease-in-out`

### Signature effects

- `--linen`: `repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 2px, rgba(0, 0, 0, 0.05) 2px 4px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(0, 0, 0, 0.04) 2px 4px), #CFC8B8`
- `--leather`: `radial-gradient(circle at 30% 20%, #8A5A3B 0, #5E3A24 75%)`
- `--stitch`: `rgba(255, 228, 186, 0.75)`
- `--gloss`: `linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(0, 0, 0, 0.08) 51%, rgba(255, 255, 255, 0.1) 100%)`
- `--bevel`: `inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(0, 0, 0, 0.15)`
- `--inset-well`: `inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.7)`
- `--ruled-paper`: `repeating-linear-gradient(180deg, transparent 0 27px, rgba(70, 110, 190, 0.2) 27px 28px)`

## Do

- Use real material textures (linen, leather, paper) for backgrounds and containers, built with CSS gradients.
- Light the whole product from one top light: highlights on top edges, shadows below.
- Make clickable elements raised (bevel inner shadow plus drop shadow) and inputs recessed (inset shadow).
- Use a blue gradient pill with a glass highlight on its upper half for primary buttons.
- Give headlines a 1px white embossed text shadow.

## Don't

- Do not use flat color buttons or shadowless cards.
- Do not mix light sources from different directions.
- Do not let textures have more contrast than the text.
- Do not use geometric sans-serifs or ultra-heavy display fonts.

## Components

- **Buttons**: Primary: a blue gradient pill with a glass highlight on the upper half and a 1px dark outline. Secondary: a light grey brushed gradient. On press the gradient flips, as if pushed in.
- **Cards**: Cards look like a sheet of paper or a piece of leather — textured background, soft shadow; leather cards use dashed lines to imitate stitching.
- **Forms**: Inputs are recessed white wells (inset shadow) with embossed labels; checkboxes and switches imitate physical controls.
- **Navigation**: A textured toolbar (leather or brushed metal) on top; navigation uses a segmented control with the selected segment pressed in.
- **Layout**: Everything sits on a "desk": paper, notebooks and cards on a linen background, with real stacking relationships between elements.
- **Imagery & icons**: Realistic icons and photo-like illustrations, all lit from the same top light with matching shadows.

## Accessibility

- Check text contrast on textured backgrounds, adding a solid backing behind text where needed.
- Do not rely on raised or recessed looks alone to show state — selected items also need a color or text change.

_Generated by Style Museum._