Skeuomorphic Material Interface

StyleRef·@styleref·

Extract your style to start building your Style Board.

Made with this StyleRef

Same style, different prompts.

A single commerce screen: category tabs, one large product image and a summary card.

Onboarding, home and product detail — one style across three screens.

Timer and metrics side by side: countdown controls next to a gauge card.

A held phone beside two session panels — the style across portrait and landscape.

Description

Controls that look like objects: brushed metal, stitched leather, felt and glass, with real light falling across them. Every switch, dial and edge behaves like something you could put a thumb on.

Colors

#3A312922%Usage: Leather panels

#9EA2A620%Usage: Aluminium hardware

#1C1E2020%Usage: Bakelite controls

#E8E4DA14%Usage: Silkscreen labels

#2F5D4A12%Usage: Felt inserts

#E8A33D7%Usage: Illuminated states

#C2352B5%Usage: Recording and destructive states

Palette Size

6–8 colors

Color Temperature

Tungsten

Saturation Range

Subdued

Contrast Strategy

Value contrast

Hue Relationships

Analogous

Gradient Policy

Gradients as primary fills

Black & White Point

Lifted blacks + Rolled-off highlights

Accessibility Level

WCAG AA

Typography

Medium, Semibold, Aa, Bb, Typography

Font FamilyHumanist sans

Font WeightsMedium, Semibold, Bold

Letter SpacingWide

Text Case

Small Caps

Font Pairing Strategy

Monospace accent

Hierarchy

Subtle contrast

Text Presence

Required

Text Integration

Embedded in shapes

Text Visual Role

Purely functional

Container / Boundary

Container shape

Rounded square

Corner treatment

Medium radius

Container Dominance

Primary visual identity

Padding rules

Tight

Edge behavior

Content fully contained

Spatial Structure & Hierarchy

Grid System

Modular grid

Visual Density

Dense

Symmetry

Near symmetry

Balance Type

Center-weighted

Layout Axis

Horizontal

Focal Structure

Distributed

Plane Separation Method

Shadow

Line & Stroke System

Stroke Usage

Structural outlines

Stroke Weight

Thin

Stroke Consistency

Uniform

Stroke Color

Derived from fill

UI & Web

Background Tone

Mid gray

Accent Strategy

Dual accent

Semantic Colors

Error + Warning

Layout Archetype

Dashboard

Content Width

Full-bleed

Density

Compact

Spacing Scale

4pt grid

Surface Layers

Three-layer (page + card + elevated)

Elevation Approach

Shadow-based

Shadow Technique

Inset / inner shadow

Shadow Weight

Strong

Border Philosophy

Mixed

Corner Radius Scale

Medium (8–12px)

Button Shape

Rounded (8–16px)

Button Hierarchy

Full system (+ Destructive)

Input Field Style

Filled / tinted

Icon Style

Miniature rendered physical objects with independent light and shadow

Animation Philosophy

Physics-based / Spring

Transition Speed

Fast (80–150ms)

Focus Ring Style

Colored outline

Voice & Language

Vocabulary Level

Technical

Directness

Explicit

Sentence Length

Short

Metaphor Density

Clinical

Writing Perspective

Third person

Copy Pacing

Staccato

Jargon / Technical Level

Heavy jargon

Shape Language

Primitive Dominance

Rectangles, Circles

Edge Sharpness

Soft

Curve Consistency

Uniform radius

Negative Space Usage

Minimal

Guardrails

Common Artifacts to Avoid

AI Gloss / Plastic Smoothing, Over-saturation, Stylistic filters

Avoided Visuals

flat vector graphics; uniform plastic gloss; visibly repeating textures; unreadable labels; decorative metaphors without functional payoff

Allowed Visuals

tactile material controls; readable silkscreen labels; physical affordance cues; functional hardware metaphors; varied non-repeating material textures

Output Format

Creative Discipline

UI/UX

Medium

Digital

Delivery Mode

Interactive

Platform

Desktop

Mood & Personality

Rugged, Serious, Confident, Precise

Tone Register

Detached

Representation Mode

Literal

Real-world Accuracy

Precise

Characters

Forbidden

Light & Shadow

Lighting Mood Style

Naturalistic

Key Light Style

Soft

Light Source Type

Artificial

Lighting Direction

Upper-left, top-biased key light

Light Source Count

Single

Shadow Type

Soft

Shadow Density

Deep

Fill-light Ratio

Subtle fill

Surface, Material & Detail

Material Simulation

Brushed aluminium, stitched leather, woven felt, glossy display glass, bakelite, and knurled plastic

Surface Treatment

Material-simulated

Surface Texture Style

Directional brushed-metal grain, visible leather stitching, woven felt, knurled plastic

Texture Usage

Photographic

Transparency / Opacity

Opaque

Imperfection Level

Used

Abstraction Level

Photorealistic

Micro-detail Allowance

Encouraged

Pattern / Motif Usage

Textile pattern

References

Cultural References

Mid-Century Modern

Temporal Reference

2000s

Custom Style Items

Engraved Labels

Small-caps labels engraved with a one-pixel dark line and one-pixel light line beneath.

Device-Face Layout

Fixed full-frame panel; grouped inset controls, central display area, and primary control row along the bottom bezel.

Machined Seams

Materials meet at precise machined seams; avoid visibly repeating texture tiles.

Tactile Relief

Raised controls: top bevel highlight, bottom inner shadow, short cast shadow; recessed controls invert the relief.

Control Interaction

Presses invert bevels and shorten shadows; switches visibly travel; short weighted spring return.

......X