Digital meets physical — realistic textures, tactile feedback, and familiar metaphors borrowed from the material world.
Component Library
Every button depresses on press. Every highlight stays fixed at the top. Every shadow deepens on activation.
Material Variants
Size Scale
Material World
Four foundational materials, each with its own grain, light response, and emotional register.
Material · Leather
Rich, warm hide with cross-hatched grain. Gains character with age. Stitched edges at 6px dashes reinforce the craft aesthetic.
Leather Brown
#8b7355
Aged Wood
#d4c4a8
Old Gold
#c9a227
Dark Brown
#5c4033
Forest Green
#2e5a3c
Brushed Steel
#c0c0c0
Antique Brass
#b87333
Cream Paper
#f5f5dc
Physical Controls
Toggle switches, sliders, and steppers that behave like their physical counterparts.
System Settings
Audio Controls
Design System
Skeuomorphism is governed by physical laws. Break them, and the illusion collapses.
Typography
Text in skeuomorphic interfaces carries shadow and embossing, anchoring it in the material world.
Display — 72px / Black
Aa
Heading 1 — 36px / Bold
Crafted with depth
Heading 2 — 24px / Semibold
Material language for the web
Body — 16px / Regular
Skeuomorphic typography respects its surface. Text on dark leather receives a subtle bottom highlight. Text on bright metal receives a faint drop shadow. The letter never floats — it rests on the material beneath it.
Caption — 12px / Medium
Engraved · Embossed · Debossed · Stamped
Embossed
RAISED
Debossed
PRESSED
Engraved
CARVED
Knowledge Base
Skeuomorphism is a design paradigm where digital UI elements mimic their real-world counterparts through realistic textures, lighting, shadows, and materials. The goal is familiarity: users instantly know how to interact with a leather notebook or a metal toggle because they already know those objects.
Every surface assumes a single light source emanating from the upper-left. Top edges receive highlights (inset 0 1px 0 rgba(255,255,255,0.8)) and bottom edges receive darkening (inset 0 -1px 0 rgba(0,0,0,0.15)). Breaking this rule shatters the illusion of physicality.
Buttons and switches must depress visually on activation: translateY(2px), reduced outer shadow, and deepened inner shadow simulate real mechanical resistance. The transition should be short (75ms) to feel snappy, not sluggish.
CSS repeating-linear-gradient patterns approximate leather grain, wood rings, brushed metal, and paper fibers without external images. Overlaid at low opacity (3–8%), they add depth without overwhelming the content.
Form Elements
Inset shadows make fields feel recessed into the surface. Focus deepens the inset, not a flat ring.
Primary Surface
Warm hide with cross-hatched grain. Gains character with age and use.
Secondary Surface
Golden-brown rings flow diagonally. Pairs with brass hardware accents.
Accent Surface
Brushed aluminium with fine horizontal striations. Cold and precise.