Guide 01 · depth family
Liquid Glass & Futuristic 3D
Two styles built on the same idea: the interface is a stack of physical layers, not a flat page. Liquid Glass sells that depth with translucency and blur. Futuristic 3D sells it with gradients, rim light and perspective. Both look premium in a hero shot and both punish careless contrast decisions.
Preview the component
The same dashboard module, rendered in both styles in this family plus Soft Minimal as a neutral control. Currently showing Liquid Glass.
Dashboard module
Deployment health
Build 4.2.0 is live on every regional edge. Response times stayed inside the target window during rollout.
Design specification
style: liquid-glass description: translucent panels floating over a saturated gradient ground; light passes through the UI industries: SaaS dashboards, AI tooling, device landing pages, fintech marketing, music streaming typography: Inter or SF Pro — 600 headings, 400 body, type scale 1.250, headline tracking -0.01em card-architecture: full-bleed media on top, 24px body, panel floats 8px above the gradient buttons: pill (999px), rgba(255,255,255,0.18) fill, 1px rgba(255,255,255,0.4) border, white label navigation: floating blurred capsule, 16px viewport inset border-radius: 24px card / 16px inner / 999px controls elevation: 0 18px 40px rgba(10,15,40,0.45) surface: rgba(255,255,255,0.14) + blur(14px) saturate(140%) animation: 220ms ease-out fade with 8px rise fallback: @supports not (backdrop-filter: blur(4px)) -> solid rgba(18,24,48,0.88) panel
style: futuristic-3d description: layered gradient panels with rim light and perspective; objects feel moulded out of dark glass industries: hardware, 3D and XR tooling, launch pages, esports, automotive configurators typography: wide geometric sans — 500 headings, 300 body, generous 0.02em tracking on eyebrows card-architecture: raised panel, inner top highlight, depth stack of two offset layers behind the media buttons: gradient fill, inset 0 1px 0 rgba(255,255,255,.2), pill radius, 48px height navigation: floating dark capsule, glow on active item border-radius: 22px panel / 14px inner / 999px controls elevation: 0 24px 50px rgba(0,0,0,0.6) plus inner light surface: linear-gradient(160deg,#2A2550,#141230) animation: 500ms parallax on scroll, 6deg perspective tilt warning: budget for image weight and GPU cost on mobile
style: soft-minimal (control) description: opaque white cards, one accent hue, calm spacing — the baseline this family is measured against industries: fintech, health, B2B onboarding, public sector typography: Inter — 600 headings, 400 body, 1.65 line-height card-architecture: stacked media and body, 24px padding buttons: filled 12px radius, single accent hue navigation: light opaque bar, underline on hover border-radius: 18px cards / 12px controls elevation: 0 6px 18px rgba(30,45,70,0.08) animation: 180ms ease, opacity plus 4px travel use-when: the screen carries real data and forms
Copy the block, drop it into your tokens file, then delete anything you will not maintain.
What the depth family actually costs
Translucency is the only surface treatment in common use that changes its own legibility depending on what scrolls behind it. A panel at fourteen per cent white over a violet gradient may pass contrast comfortably at the top of the page and fail over a photograph two sections later. The fix is not a darker blur; it is a fixed scrim. Put an opaque layer at around eighty per cent opacity under every translucent panel that carries body text, then let the blur work on the decorative parts only. You keep the aesthetic and stop the contrast from moving.
Performance is the second cost. Blur is a compositing operation, and a page with a blurred header, blurred sidebar and six blurred cards asks the compositor to redraw large regions on every scroll frame. Cheap devices show it as jank in the scroll, not as a dropped frame count you will notice on a desktop. Two practical rules keep this manageable: never blur a surface larger than about forty per cent of the viewport, and never animate backdrop-filter — animate opacity or transform on a pre-blurred layer instead.
Futuristic 3D trades blur for gradients and shadow pairs, so it is gentler on the compositor but heavier on authoring. Every panel needs a consistent light direction. If the highlight sits on the top edge of a card, it has to sit on the top edge of the button, the input and the toggle too, or the whole page reads as a collection of unrelated assets. This is the style where a token file earns its keep: one gradient pair, one rim-light value, one deep shadow, reused everywhere.
Side-by-side comparison
| Criterion | Liquid Glass | Futuristic 3D |
|---|---|---|
| Card radius | 24px | 22px |
| Elevation model | Large soft drop shadow, no inner light | Deep drop shadow plus inner top highlight |
| Surface | Translucent, blurred, reactive | Opaque layered gradient |
| Contrast risk | High — varies with background | Medium — fixed, but low-contrast by taste |
| Runtime cost | Compositing on scroll | Image and gradient weight |
| Authoring effort | Low once the scrim rule exists | High — light direction must be policed |
| Works on light ground | Rarely convincing | No — needs a dark ground |
| Dense data screens | Poor | Poor |
Pros and cons
Arguments for
- Immediate perceived quality on hero sections and product shots.
- Depth gives you hierarchy without extra colour, so a one-hue palette still reads clearly.
- Dark ground reduces the visual weight of screenshots and charts placed on top.
- Both styles photograph and render well in social previews and app store assets.
Arguments against
- Focus rings are hard to see on translucent surfaces; you need a solid two-tone ring.
- Body text below sixteen pixels loses legibility fast on blurred panels.
- Print and PDF exports collapse the depth entirely, so documents need a separate theme.
- Long forms feel oppressive on a dark gradient — most teams end up building a light mode anyway.
When to choose it, and when not to
Choose Liquid Glass when the product is visual, the sessions are short and the marketing site carries more weight than the application. Choose Futuristic 3D when you are selling an object — a device, a headset, a vehicle, a render engine — and the page can afford large media. Avoid both when the primary job is data entry, when you support a wide range of low-powered devices, or when your content is mostly long-form text. In those cases keep the depth family for the landing page and use Soft Minimal for the application, or step to Cyber Industrial if you want a dark ground with far cheaper rendering.
Implementation order that works: set the ground gradient, set the scrim, then the panel, then the radius scale, then one shadow pair, then motion. If you start with motion you will spend a week on a parallax hero and still have no card component. Reference the browser behaviour in the MDN entry for backdrop-filter before you commit to a blur radius, and verify every text colour against the WCAG 2.2 quick reference using the scrim colour, not the gradient.
Next: Guide 02 — Neo-Brutalist & Cyber Industrial, the opposite response to the same problem.