Studio
Studio/Experience
Experience Architecture · 0.2.0-draft

One standard.Fit the work.

Choose the outcome first. Studio binds it to the right hierarchy, navigation, layouts, flows, components, responsive behavior, and proof. The selected kit supplies the visual voice.

Draft source · review before adoption
SPATIALMaster-detail
01CollectionObject list, search, and selection.
02Selected objectPrimary object content and actions.
03Object contextMetadata or secondary tools.
Canonical source of truth

Experience is a composition, not a component pile.

01
must

Purpose before interface

Every surface must make its user objective and next meaningful action understandable.

57 components
Requirements
  • Name the surface in user language.
  • Keep the next meaningful action distinguishable.
  • Remove controls unrelated to the current objective.
Anti-patterns
  • ×Generic dashboards with equal-weight cards.
  • ×Navigation labels based on internal organization.
Dieter RamsGOV.UK service designStudio house position
02
must

Hierarchy carries meaning

Visual weight, order, spacing, and color must reflect task priority rather than decoration.

63 components
Requirements
  • Give each surface one dominant focal task.
  • Group related information through proximity and alignment.
  • Reserve strong color for meaning or action.
Anti-patterns
  • ×Multiple competing primary actions.
  • ×Cards and headings with identical emphasis.
Dieter RamsEdward TufteApple interface tradition
03
must

State is visible and honest

The system must show where the user is, what is selected, what is happening, and what changed.

38 components
Requirements
  • Expose current location and selection.
  • Acknowledge every consequential action.
  • Distinguish pending, success, empty, warning, and failure.
Anti-patterns
  • ×Silent saves or failures.
  • ×Loading that resembles an empty result.
Don NormanUsability heuristicsBret VictorStudio house position
04
should

Recognition over recall

Interfaces should expose choices, context, and prior decisions instead of requiring memory.

41 components
Requirements
  • Use stable labels and familiar placement.
  • Keep relevant history and filters visible.
  • Preserve entered values through validation.
Anti-patterns
  • ×Icon-only unfamiliar actions.
  • ×Filters that disappear after selection.
Usability heuristicsDon Norman
05
should

Controls live near their effect

Actions and explanations should appear beside the object, state, or decision they affect.

26 components
Requirements
  • Place object actions with the object.
  • Keep errors near their fields.
  • Use inspectors only for the active selection.
Anti-patterns
  • ×Global toolbars for local actions.
  • ×Error summaries without field-level recovery.
Don NormanApple interface traditionMature design systems
06
should

Complexity arrives when needed

Reveal advanced information and controls progressively while keeping essential capability discoverable.

21 components
Requirements
  • Start with the current decision.
  • Expose advanced controls through clear paths.
  • Remember intentional disclosure state when useful.
Anti-patterns
  • ×Dense walls of configuration.
  • ×Mystery menus that conceal primary capability.
Usability heuristicsApple interface traditionGOV.UK service design
07
must

Preserve context across change

Navigation, responsive reflow, interruption, and validation must preserve the user’s place, work, and mental model.

44 components
Requirements
  • Preserve selection and drafts.
  • Keep navigation spatially predictable.
  • Return focus to a meaningful location.
Anti-patterns
  • ×Responsive layouts that reorder the task arbitrarily.
  • ×Dialogs that close and discard work.
Apple interface traditionDon NormanFrontend engineering practiceStudio house position
08
must

Consequences require control

Users must understand consequential actions and retain a safe path to cancel, undo, or recover.

22 components
Requirements
  • Preview irreversible outcomes.
  • Confirm destructive scope.
  • Prefer undo over repeated confirmation when safe.
Anti-patterns
  • ×Preselected consent.
  • ×Destructive actions styled like ordinary navigation.
Don NormanUsability heuristicsGOV.UK service designStudio house position
09
must

Prevent errors; design recovery

The interface should prevent predictable mistakes and make unavoidable failures specific, local, and recoverable.

33 components
Requirements
  • Validate at the earliest helpful moment.
  • Preserve valid input.
  • Explain what happened and the next corrective action.
Anti-patterns
  • ×Generic error banners.
  • ×Clearing a form after server failure.
Don NormanUsability heuristicsGOV.UK service designFrontend engineering practice
10
must

Access is a foundation

Every essential outcome must remain perceivable, operable, understandable, and robust across ability, input, and environment.

84 components
Requirements
  • Use semantic structure and names.
  • Support keyboard, touch, zoom, and assistive technology.
  • Never encode meaning through color or motion alone.
Anti-patterns
  • ×Custom controls without native semantics.
  • ×Focus removed for visual cleanliness.
W3C and inclusive designGOV.UK service designFrontend engineering practiceStudio house position
11
must

Responsive means continuous

Layouts must adapt their composition while preserving task, state, priority, and recovery—not merely shrink.

47 components
Requirements
  • Define wide, medium, and narrow composition.
  • Preserve the primary task and current object.
  • Avoid parent-level horizontal drift.
Anti-patterns
  • ×Desktop columns squeezed onto mobile.
  • ×Critical actions hidden at narrow widths.
Frontend engineering practiceW3C and inclusive designApple interface traditionStudio house position
12
must

Performance is part of comprehension

The interface must respond quickly, reveal progress honestly, and remain useful under slow or partial conditions.

32 components
Requirements
  • Acknowledge input immediately.
  • Use progressive rendering where appropriate.
  • Keep partial failure bounded and explainable.
Anti-patterns
  • ×Indefinite spinners without context.
  • ×Blocking the whole surface for local work.
Frontend engineering practiceBret VictorUsability heuristics
13
should

Motion explains change

Animation should preserve continuity, reveal causality, or provide feedback; it must never delay or decorate without purpose.

16 components
Requirements
  • Tie motion to state or spatial change.
  • Keep interactions interruptible.
  • Provide a reduced-motion result with equivalent meaning.
Anti-patterns
  • ×Entrance animation on every element.
  • ×Motion as the only loading or status cue.
Apple interface traditionBret VictorW3C and inclusive design
14
must

Language predicts outcomes

Labels, instructions, and errors must use plain, specific language that helps users decide and recover.

27 components
Requirements
  • Name actions with verbs and objects.
  • Explain errors in context.
  • Prefer user language over organization terminology.
Anti-patterns
  • ×Submit, Continue, or Error without context.
  • ×Clever labels that hide function.
GOV.UK service designUsability heuristicsStudio house position
15
must

Information must remain truthful

Data, confidence, comparison, and system claims must be represented without distortion or invented certainty.

35 components
Requirements
  • Show provenance and uncertainty where relevant.
  • Use comparable scales and honest baselines.
  • Compute readiness claims from evidence.
Anti-patterns
  • ×Decorative charts with misleading scales.
  • ×Invented percentages or AI certainty.
Edward TufteStudio house positionGOV.UK service design
16
should

Expression serves meaning

Brand, color, typography, material, and delight may distinguish the product only after purpose and comprehension remain intact.

20 components
Requirements
  • Spend bold expression on focal moments.
  • Keep body content stable and readable.
  • Make novelty compatible with platform expectations.
Anti-patterns
  • ×Aesthetic novelty that obscures control behavior.
  • ×Every surface competing for attention.
Dieter RamsApple interface traditionMature design systems
Project adoption

Compile the composition into the work.

Creative or expert workbench with Complex creation platform, interpreted through SPATIAL. This produces project-owned source without writing to a repository.

One source, composed for the outcome.

Studio will compile the selected site type, contexts, hierarchy, responsive layouts, flows, canonical component slots, evidence requirements, and kit identity.