D Experience · Quick start

D Experience Build Guide

Use this guide to start a D Experience screen with the right structure, components, surfaces, and behaviours.

Build in this order

Start with the D Experience screen structure.
Use Components for PRIZM core and D Experience local components.
Use Surface Anatomy for shell, navigation, canvas, cards, actions, and tokens.
Apply responsive rules.
Run final checks before handover.

Key references

Components

Available components. ◇ marks D Experience local components.

Surface Anatomy

Surface layering, light and dark tokens, and anatomy pins.

Button usage

Action placement, pairings, and button styles.

Basic screen rules

Keep top bar, left nav, canvas, and cards consistent.
Use documented components instead of one-off UI.
Light mode is the default.
Dark mode only where explicitly provided for preview or testing.
Do not introduce undocumented surface colours.

Responsive behaviour

Design for the primary user context, then adapt navigation, density, and content presentation for each supported screen size. Keep the information hierarchy and system behaviour consistent.

Desktop

Use the full app shell where space allows: top bar, left navigation, canvas, cards, and page-level actions.

Tablet

Preserve the main structure, but reduce density. Stack secondary panels, simplify crowded layouts, and keep actions easy to reach.

Mobile

Use drawer or sheet behaviour for navigation and actions where needed. Avoid forcing dense tables onto small screens; use cards, summaries, or progressive disclosure.

Before handover

Components follow the D Experience catalogue.
Surfaces and tokens match Surface Anatomy.
Actions follow Button guidance.
Left nav, top bar, hover, focus, and active states work.
Responsive layouts checked.
No broken links or outdated routes.