# Skeuomorphic Material Interface

Skeuomorphic UI/UX design with tactile materials like brushed metal, leather, and bakelite, featuring naturalistic lighting and precise controls.

| | |
|---|---|
| Style | Skeuomorphic Material Interface |
| Category | UI/UX |
| Tags | skeuomorphic, material design, tactile, brushed metal, stitched leather, bakelite, mid-century modern, dashboard, fitness app, ecommerce app |
| Author | @styleref (https://styleref.io/u/styleref) |
| Palette | #3a3129 #9ea2a6 #1c1e20 #e8e4da #2f5d4a #e8a33d |
| Published | 2026-09-05 |
| Canonical URL | https://styleref.io/share/e775jlkl-6630b39ecb5e |

## Specification

Paste this into any AI tool. Keep the attribution line and the canonical URL.

STYLE REFERENCE — HARD CONSTRAINT (HIGHEST PRIORITY)

This style must be applied to ALL generated content (text, image, video).
If any part of the request conflicts with this style, the style OVERRIDES the request.
STYLE DEFINITION (to be operationally enforced):

Skeuomorphic Material Interface

 • Output Format: Creative discipline: UI/UX; Digital; Delivery mode: Interactive; Desktop.
 • Container / Boundary: Container shape: Rounded square; Medium radius Corners; Container Dominance: Primary visual identity; Padding: Tight; Edge Behavior: Content fully contained.
 • Mood & Personality: Rugged, Serious, Confident, Precise; Tone register: Detached; Representation mode: Literal; Real-world accuracy: Precise; Characters: Forbidden.
 • Colors: Palette: Solid Colors: [ #3A3129 22% (Leather panels),  #9EA2A6 20% (Aluminium hardware),  #1C1E20 20% (Bakelite controls),  #E8E4DA 14% (Silkscreen labels),  #2F5D4A 12% (Felt inserts),  #E8A33D 7% (Illuminated states),  #C2352B 5% (Recording and destructive states)]; 6–8 colors; Tungsten temperature; Saturation: Subdued; Value contrast; Hue relationships: Analogous; Gradients as primary fills; Black/White point: Lifted blacks + Rolled-off highlights; Accessibility: WCAG AA.
 • Typography: Humanist sans; Medium, Semibold, Bold; Text case: Small Caps; Font pairing: Monospace accent; Hierarchy: Subtle contrast; Letter spacing: Wide; Text presence: Required; Text integration: Embedded in shapes; Text visual role: Purely functional.
 • Light & Shadow: Lighting mood style: Naturalistic; Key light style: Soft; Artificial; Lighting direction: Upper-left, top-biased key light; Light source count: Single; Shadow type: Soft; Shadow density: Deep; Fill-light ratio: Subtle fill.
 • Spatial Structure & Hierarchy: Grid system: Modular grid; Visual density: Dense; Symmetry: Near symmetry; Balance: Center-weighted; Layout axis: Horizontal; Distributed focal structure; Plane separation: Shadow.
 • Surface, Material & Detail: Material simulation: Brushed aluminium, stitched leather, woven felt, glossy display glass, bakelite, and knurled plastic; Surface treatment: Material-simulated; Texture: Directional brushed-metal grain, visible leather stitching, woven felt, knurled plastic; Texture usage: Photographic; Transparency: Opaque; Imperfection level: Used; Photorealistic; Micro-detail allowance: Encouraged; Pattern usage: Textile pattern.
 • Shape Language: Primitive dominance: Rectangles, Circles; Edge sharpness: Soft; Curve consistency: Uniform radius; Negative space usage: Minimal.
 • Line & Stroke System: Structural outlines; Thin; Uniform consistency; Stroke Color: Derived from fill.
 • Voice & Language: Technical vocabulary; Directness: Explicit; Short sentences; Metaphors: Clinical; Perspective: Third person; Pacing: Staccato; Jargon level: Heavy jargon.
 • References: Mid-Century Modern; Temporal reference: 2000s.
 • 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: Shadow-based; Shadow technique: Inset / inner shadow; Shadow weight: Strong; Borders: 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: Physics-based / Spring; Transition speed: Fast (80–150ms); Focus ring: Colored outline.
 • Guardrails: Avoid: AI Gloss / Plastic Smoothing, Over-saturation, Stylistic filters; Avoid 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.
 •  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..


ENFORCEMENT RULE: Before finalizing the output, internally verify that ALL elements comply with the style definition above. If compliance is uncertain, simplify or soften the output until it fully matches the style. Generated by StyleRef.io

## Other formats and live access

The specification above is the portable default. Tool-specific builds and a
ready-to-commit STYLE.md are available without a login:

**REST** (anonymous, read-only)

```
https://styleref.io/api/v1/styles/e775jlkl-6630b39ecb5e?format=flux        # also: midjourney, diffusion, json
https://styleref.io/api/v1/styles/e775jlkl-6630b39ecb5e/style.md           # a ready-to-commit STYLE.md
```

**MCP** (Streamable HTTP at `https://styleref.io/api/mcp`)

```
styleref://gallery/e775jlkl-6630b39ecb5e
styleref://gallery/e775jlkl-6630b39ecb5e/style.md
```

Or call the `get_style` tool with `ref` set to the slug above, and
`apply_style_to_prompt` to wrap a request for a specific tool.

Attribution: this style was created by @styleref. Keep the `Generated by StyleRef.io`
line and the canonical URL when you use a compiled spec, and credit the author.

Source: https://styleref.io/share/e775jlkl-6630b39ecb5e