← Voltar
Z+300
Z+150
Z+000
Z−150
Z−300
RX: +0.00° RY: +0.00° Z: 000.0px
[
]
X: 0.000  |  Y: 0.000  |  Z: 300
PARALLAX ACTIVE
DEPTH FIELD v14
Design System — 2025 Edition

DEPTH
FIELD

Design System v14 — Three Dimensional Experience

Playfair Display
DM Mono
5 Layers
Pure CSS 3D
Scroll to explore
Z — 000
02 — Components

System Elements

Each card lives at a unique Z-depth, responding to hover with physical perspective tilt.

Z+240
⬡
Button System
Tactile controls with depth response and elevation states.
Z+180
Aa
Type Ramp
Playfair Display for narrative. DM Mono for precision.
Display Heading Body Mono
Z+120
◎
Form Fields
Minimal input surfaces with gold-lit focus states.
Z+060
▬
Depth Meters
Progress visualization with layered elevation bars.
Ambient Layer87%
Ember Depth54%
Surface Level30%
Z+040
◈
Taxonomy Tags
Classification atoms living at the surface plane.
Depth Parallax Ember Layer Z-Axis Tilt 3D
Z+320 — FEATURED
◇
Signature Component
Depth Field Panel
The hero component of this system. A full-width glass panel that responds to 3D perspective, layering content at staggered Z-depths. Built entirely from CSS transforms and JS mouse tracking — no WebGL, no canvas. Pure DOM geometry.
Z + 150
03 — Typography

Type Specimen

Two typefaces. Infinite character. Hover this section to watch type float in space.

Display 01 — Playfair Display 900
Depth
& Light
Display 02 — Playfair Display 700
The art of dimensional design
lives in the space between layers.
Heading — Playfair Display 400
A system built on precision,
expressed through depth.
Body — Playfair Display Regular

The Depth Field system treats every UI element as a physical object in three-dimensional space. By assigning Z-coordinates to components and responding to viewer perspective, interfaces become tactile — something you reach into, not just look at.

Mono Large — DM Mono 400
const depth = { z: 300, parallax: true };
Mono Small — DM Mono 400 Uppercase
Z-AXIS — 300PX  |  RX +12.5°  |  RY −8.3°  |  PERSPECTIVE 800PX
Display XL 96 / 900
Aa Bb Cc
Display Italic 64 / 700i
The Golden Age
Mono Regular 16 / 400
0123456789 ABCDEF →
Mono Light 12 / 300
perspective: 800px; z-index: 300;
Z + 080
04 — Color

Palette

A dark luxury palette. Void backgrounds, warm amber light, ember accents.

Void
#0A0A0F
Background / Base
Deep Navy
#1C1C2E
Surface / Card BG
Antique Gold
#C8A96E
Primary Accent
Cream
#E8D5B0
Primary Text
Ember
#FF6B35
Alert / CTA Accent
Gold Glass
rgba(200,169,110,0.12)
Glassmorphism Fill
Z + 030
05 — Spacing

Scale

Base-8 spatial rhythm. Each unit a step along the Z-axis.

--s-1
4px 0.25rem
--s-2
8px 0.5rem
--s-3
12px 0.75rem
--s-4
16px 1rem
--s-6
24px 1.5rem
--s-8
32px 2rem
--s-12
48px 3rem
--s-16
64px 4rem
--s-24
96px 6rem
--s-32
128px 8rem