# Spatial Depth 3D Interface

A futuristic 3D UI style with spatial depth, rendered objects, and sophisticated dark mode aesthetics.

| | |
|---|---|
| Style | Spatial Depth 3D Interface |
| Category | UI/UX |
| Tags | 3d interface, futuristic ui, dark mode, spatial ui, depth effect, minimalist ui, neumorphism, glassmorphism, interactive design, modern ui |
| Author | @styleref (https://styleref.io/u/styleref) |
| Palette | #12141a #1d212b #e8ebf2 #8b93a6 #b9c4d6 #ff5b2e |
| Published | 2026-08-30 |
| Canonical URL | https://styleref.io/share/829nkujv-97d3be45a585 |

## 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):

Spatial Depth 3D Interface

 • Output Format: Creative discipline: UI/UX; Digital; Delivery mode: Interactive; Web; Presentation: Raw UI.
 • Container / Boundary: Container: Explicit (shape mask); Container shape: Rounded square; Medium radius Corners; Container Dominance: Neutral frame; Padding: Generous; Edge Behavior: Content fully contained.
 • Mood & Personality: Futuristic, Sophisticated, Clean, Confident; Emotional bias: Neutral; Tone register: Observational; Representation mode: Literal; Real-world accuracy: Precise; Characters: Forbidden.
 • Colors: Palette: Solid Colors: [ #12141A 45% (Background),  #1D212B 20% (Panels),  #E8EBF2 15% (Typography),  #8B93A6 7% (Secondary UI),  #B9C4D6 5% (Rendered metal),  #FF5B2E 5% (Emissive and UI accent),  #3C4657 3% (Edge details)]; 6–8 colors; Mixed temperature; Saturation: Subdued; Value contrast; Hue relationships: Complementary; Subtle gradients only; Color dominance: Background-dominant; Black/White point: Pure black + Rolled-off highlights; Accessibility: WCAG AA.
 • Typography: Neo-grotesque; Regular, Medium; Text case: Sentence case; Font pairing: Weight contrast; Hierarchy: Clear typographic scale; Type scale: Modular; Normal (1.4); Letter spacing: Normal; Text presence: Required; Text visual role: Secondary visual element; Text integration: Overlaid.
 • Light & Shadow: Lighting mood style: Low-key; Key light style: Soft; Artificial; Lighting direction: Soft cool key from upper left; cool fill; warm rim light; Light source count: Multiple; Shadow type: Tight dark contact shadows with visible ambient occlusion; Shadow density: Deep; Fill-light ratio: Subtle fill; Lighting presence: Explicit; Bloom / Glow usage: Subtle.
 • Spatial Structure & Hierarchy: 2-point perspective; Single focal structure; Hierarchy: Strong; Symmetry: Near symmetry; Balance: Center-weighted; Layout axis: Vertical; Plane separation: Overlap, scale, value shift, depth-ordered layers; Scale relationship: Human-scale; Grid system: Column grid; Visual density: Airy.
 • Surface, Material & Detail: Material simulation: Brushed metal, frosted acrylic, matte rubber, glass; Surface treatment: Satin rendered objects; frosted or matte panels; Texture: Brushed metal grain; subtle roughness variation; Texture usage: Subtle noise; Optical finishes: Anodized; Imperfection level: Polished; Photorealistic; Micro-detail allowance: Allowed.
 • Camera and Motion: DOF: Shallow focus; Camera movement: Pointer-driven parallax; slow orbital turntable rotation; panels translate through depth; Motion intensity: Fluid; Motion implication: Dynamic; Easing: Spring; Animation duration: Leisurely.
 • Shape Language: Geometric; Primitive dominance: Rectangles, Polygons; Edge sharpness: Soft; Silhouette clarity: Iconic; Curve consistency: Uniform radius; Negative space usage: Dominant.
 • Voice & Language: Formality: Professional; Technical vocabulary; Directness: Clear; Medium sentences; Metaphors: Factual; Perspective: Third person for descriptions; second person for actions; Pacing: Flowing; Jargon level: Light industry terms.
 • Background & Environment: Background type: Environment; Environment mood: Studio; Background–Subject: Integrated; Background complexity: Simple; Prop styling: Curated.
 • References: Minimalism; Temporal reference: Near-future.
 • UI & Web: Color theme: Dark; Background tone: Near-black; Accent strategy: Single functional accent; Layout archetype: Marketing page; Content width: Wide container (1280–1440px); Density: Spacious; Surface layers: Three-layer (page + card + elevated); Elevation: Physical scene depth and contact shadows; restrained UI elevation; Glass effect: Frosted glass (blur); Borders: Hairline (0.5–1px, low opacity); Corner radius scale: Medium (8–12px); Card style: Glass; Button shape: Rounded (8–16px); Button hierarchy: Primary + Secondary + Ghost; Icon style: Legible duotone icons; light extrusion permitted; Navigation: Top bar; Nav style: Sticky glass (blur); UI imagery: 3D renders; Animation: Physics-based / Spring; Transition speed: Deliberate (350–500ms); Scroll behavior: Parallax depth; Focus ring: Glow halo.
 • Guardrails: Avoid: AI Gloss / Plastic Smoothing, HDR over-processing, Heavy Bokeh / Blur; Avoid Visuals: tilted UI panels; unsupported floating objects; decorative 3D; flat illustration; blown highlights; drop-shadow depth; Allowed Visuals: viewer-facing flat UI; depth-ordered panels; grounded hero objects; tight contact shadows; abstract geometry; material studies.
 •  Depth Hierarchy: Hero object at focal centre; panels occupy explicit foreground and background depth bands., Scene Grounding: Imply a floor or horizon through contact shadows and soft global bounce., Accent Binding: Use the ember accent identically for primary UI emphasis and emissive scene material., Typography Plane: All type remains flat, readable, and square to the viewer; never perspective-tilted..


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/829nkujv-97d3be45a585?format=flux        # also: midjourney, diffusion, json
https://styleref.io/api/v1/styles/829nkujv-97d3be45a585/style.md           # a ready-to-commit STYLE.md
```

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

```
styleref://gallery/829nkujv-97d3be45a585
styleref://gallery/829nkujv-97d3be45a585/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/829nkujv-97d3be45a585