Spatial Depth 3D Interface

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

Made with this StyleRef

Same style, different prompts.

A single list screen: two stacked program cards over a fixed bottom navigation.

The style under a dense desktop dashboard: KPIs, a chart and a data card.

A destination feed, a full-image onboarding and a progress screen in one style.

Four analytics panels: a gauge, a split chart, a country table and a cohort grid.

Description

Real objects in a real space: rendered 3D props, depth-ordered layers and perspective cues that place the interface in a scene rather than on a page.

Colors

#12141A45%Usage: Background

#1D212B20%Usage: Panels

#E8EBF215%Usage: Typography

#8B93A67%Usage: Secondary UI

#B9C4D65%Usage: Rendered metal

#FF5B2E5%Usage: Emissive and UI accent

#3C46573%Usage: Edge details

Palette Size

6–8 colors

Color Temperature

Mixed

Saturation Range

Subdued

Contrast Strategy

Value contrast

Hue Relationships

Complementary

Gradient Policy

Subtle gradients only

Color Dominance

Background-dominant

Black & White Point

Pure black + Rolled-off highlights

Accessibility Level

WCAG AA

Output Format

Creative Discipline

UI/UX

Medium

Digital

Delivery Mode

Interactive

Platform

Web

Presentation Context

Raw UI

Light & Shadow

Lighting Mood Style

Low-key

Key Light Style

Soft

Light Source Type

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

Camera and Motion

Depth of Field

Shallow focus

Camera Movement

Pointer-driven parallax; slow orbital turntable rotation; panels translate through depth

Motion Intensity

Fluid

Motion Implication

Dynamic

Easing Function

Spring

Animation Duration Feel

Leisurely

Background & Environment

Background Type

Environment

Environment Mood

Studio

Background–Subject Relationship

Integrated

Background Complexity

Simple

Prop / Set Styling

Curated

Custom Style Items

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.

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 Approach

Physical scene depth and contact shadows; restrained UI elevation

Glass / Blur Effect

Frosted glass (blur)

Border Philosophy

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 Pattern

Top bar

Navigation Style

Sticky glass (blur)

UI Imagery

3D renders

Animation Philosophy

Physics-based / Spring

Transition Speed

Deliberate (350–500ms)

Scroll Behavior

Parallax depth

Focus Ring Style

Glow halo

Mood & Personality

Futuristic, Sophisticated, Clean, Confident

Emotional Bias

Neutral

Tone Register

Observational

Representation Mode

Literal

Real-world Accuracy

Precise

Characters

Forbidden

Voice & Language

Formality

Professional

Vocabulary Level

Technical

Directness

Clear

Sentence Length

Medium

Metaphor Density

Factual

Writing Perspective

Third person for descriptions; second person for actions

Copy Pacing

Flowing

Jargon / Technical Level

Light industry terms

Guardrails

Common Artifacts to Avoid

AI Gloss / Plastic Smoothing, HDR over-processing, Heavy Bokeh / Blur

Avoided 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

Typography

Regular, Aa, Bb, Typography

Font FamilyNeo-grotesque

Line HeightNormal

Font WeightsRegular, Medium

Letter SpacingNormal

Type ScaleModular

Text Case

Sentence case

Font Pairing Strategy

Weight contrast

Hierarchy

Clear typographic scale

Text Presence

Required

Text Visual Role

Secondary visual element

Text Integration

Overlaid

Container / Boundary

Container presence

Explicit (shape mask)

Container shape

Rounded square

Corner treatment

Medium radius

Container Dominance

Neutral frame

Padding rules

Generous

Edge behavior

Content fully contained

Spatial Structure & Hierarchy

Perspective Style

2-point

Focal Structure

Single

Hierarchy Clarity

Strong

Symmetry

Near symmetry

Balance Type

Center-weighted

Layout Axis

Vertical

Plane Separation Method

Overlap, scale, value shift, depth-ordered layers

Scale Relationship

Human-scale

Grid System

Column grid

Visual Density

Airy

Shape Language

Shape Basis

Geometric

Primitive Dominance

Rectangles, Polygons

Edge Sharpness

Soft

Silhouette Clarity

Iconic

Curve Consistency

Uniform radius

Negative Space Usage

Dominant

Surface, Material & Detail

Material Simulation

Brushed metal, frosted acrylic, matte rubber, glass

Surface Treatment

Satin rendered objects; frosted or matte panels

Surface Texture Style

Brushed metal grain; subtle roughness variation

Texture Usage

Subtle noise

Optical Finishes

Anodized

Imperfection Level

Polished

Abstraction Level

Photorealistic

Micro-detail Allowance

Allowed

References

Cultural References

Minimalism

Temporal Reference

Near-future

......X