Mobile-First Enterprise Design Handbook — Spatial and Behavioral UI Systems

Required

Standards and functional baselines

Accessibility success criteria, semantic behavior, security boundaries, and lossless task completion are release requirements.

Recommended

Default production practices

44–48px touch regions, shared control size families, explicit state models, and component-owned internal spacing are strong defaults with documented exceptions.

Context-dependent

Pattern selection

Bottom navigation, drawers, inline expansion, dense tables, and sticky actions depend on task, audience, device, information volume, and consequence.

The smallest credible context has multiple dimensions

Constraint	Design implication
Viewport	Prioritize one decision surface and adapt composition rather than shrinking desktop structure.
Attention	Front-load current state, exceptions, and next action. Delay optional detail.
Input precision	Use generous targets, spacing, and alternatives to drag or gesture-only behavior.
Connectivity	Expose offline, stale, retrying, and pending-sync states.
Authorization	Keep tenant, environment, role, and acting scope visible when errors would be consequential.
Interruption	Preserve draft, scroll, filters, selection, upload progress, and last synchronized state.

Reduce extraneous cognitive effort without hiding meaningful complexity, trade-offs, evidence, or consequences.

Ownership rule

Components own internal space

Padding, internal icon gaps, line height, and focus clearance belong to the component contract.

Ownership rule

Parents own sibling relationships

Stacks, clusters, grids, rows, and sections define gaps between components. Reusable components should not carry arbitrary outer margins.

Hierarchy rule

Pages own structural cadence

Subsection, section, chapter, and landmark spacing should be distinct enough to communicate hierarchy without borders around every region.

Primitive and semantic scale

:root {
  --space-1:  2px;   /* optical correction */
  --space-2:  4px;   /* micro relationship */
  --space-3:  6px;   /* icon-to-label */
  --space-4:  8px;   /* control relationship */
  --space-5: 12px;   /* related content */
  --space-6: 16px;   /* component */
  --space-7: 24px;   /* group */
  --space-8: 32px;   /* region */
  --space-9: 48px;   /* section */
  --space-10: 64px;  /* chapter */
  --space-11: 96px;  /* landmark */
}

Relationship invariant: internal space ≤ related-content space < group space < section space. Major hierarchy boundaries should move at least two token steps.

Property ownership

Property	Primary job	Owner
Padding	Space inside a boundary	Component
Gap	Relationship between siblings	Parent layout
Margin	Editorial flow or exceptional separation	Page or flow primitive
Line height	Vertical rhythm inside text	Typography role
Minimum size	Interaction safety and consistent silhouette	Component geometry
Optical adjustment	Correct perceived misalignment	Specific component token

Responsive compression

Keep micro and relationship spacing stable. Compress larger section and chapter values on compact screens. Do not globally scale every value.

Density modes

Step selected semantic roles along the scale. Preserve touch safety, focus clearance, destructive-action separation, and reading legibility.

Whitespace

Use empty space to protect meaningful content from competing content. Excessive space can also break relationships and increase travel distance.

Text role	Starting profile	Behavior
Icon-only element	1 or 0	The target box provides geometry.
Pill or badge	12px / 16px	One line. No internal wrapping.
Single-line control	14–16px / 18–20px	Explicit line box tied to control height.
Compact list row	14px / 18–20px	Use row padding to provide touch and scanning space.
Interface copy	14–16px / 20–24px	Moderate density for task-focused reading.
Extended reading	16px / 24–27px	Open rhythm and constrained line length.
Display heading	32px+ / 1.05–1.2	Tighter leading; test wrapping and localization.

Required

Tolerate user text-spacing overrides

WCAG 2.2 requires no loss of content or functionality when users override line, paragraph, letter, and word spacing. It does not require every control to default to 1.5 line height.

Recommended

Prevent accidental geometry

Define font size and line height inside every control family. Otherwise a page-level reading rhythm can silently make buttons and selectors taller.

Control-height equation: H = L + 2P + 2B. For a 44px control with a 20px line box and 1px borders, block padding is 11px per side.

Tier	Height	Use
Compact	32px	Dense desktop utility with precise pointer input.
Standard	40px	Desktop productivity forms and toolbars.
Touch	44px	Default cross-device and mobile-first control.
Large	48px	Simple forms, touch-heavy tasks, and high-attention workflows.

Canonical geometry

:root {
  --control-block-size: 44px;
  --control-font-size: 16px;
  --control-line-height: 20px;
  --control-border-width: 1px;
  --control-radius: 10px;
  --control-padding-block: 11px;
  --control-padding-inline: 14px;
  --control-icon-size: 20px;
}

Exact versus minimum height

Use min-block-size for text-bearing controls so text enlargement can grow or reflow. Exact block size is safer for icon-only controls with stable SVG geometry.

Optical differences

A filled button and outlined input may appear different despite identical boxes. Preserve the shared silhouette; communicate priority through style rather than a larger height.

Radius family

Same-row controls should use the same interactive radius family. Reserve capsule geometry for pills, tags, and deliberately distinct action groups.

Native-first

Normalize native selectors

Keep the semantic <select>, normalize its closed border box, reserve a fixed trailing icon slot, and let the browser provide the mobile picker.

Row contract

Align control tracks

Do not align an entire field wrapper containing helper text against a bare button. Separate label, control, and message tracks or stack the action when validation becomes complex.

Resilience

Reflow before wrapping controls

Do not let one button become two lines beside one-line fields. Shorten the label or stack the row before the silhouette breaks.

Selector families

Selector	Closed surface	Expansion behavior
Native select	Match input and button	Platform-managed popup or picker
Dropdown / listbox	Match input and button	Options generally use the same size family
Combobox	Match text input	Popup may be larger; preserve input geometry
Date picker	Match input and button	Calendar popup has independent geometry
Segmented control	Equal segments	Switches peer views; not a completion action
Multiselect / tag picker	Starts at the shared height	May grow as tags wrap; align top or stack adjacent actions
Textarea	Independent height	Top-align or stack; do not height-match

Common failure: align-items: end can align a button to the bottom of helper text rather than the input surface. Model the control row explicitly.

Production

One line only

Do not wrap pill text internally. Shorten the label, truncate accessibly, or replace the capsule with a rounded rectangular label block.

Recommended

Intrinsic centering

Use inline flex or grid with explicit line height, symmetric padding, and centered alignment. Avoid absolute positioning and per-label vertical transforms.

Degraded

Curve-aware follow spacing

A curved border weakens the perceived bottom edge. Add a small optical relief token when a pill directly precedes a heading.

Derived geometry

Internal block padding:
P = (H - L - 2B) / 2

Curve intrusion at text edge:
C = r - sqrt(r² - y²)

Practical follow gap:
Gafter = Grelated + clamp(2px, 0.25r, 4px)

The follow-gap formula is a derived optical heuristic, not a published standard. It should be rounded to the system spacing scale and validated with the actual font.

Metadata priority

Priority	Examples	Placement
Interpretive	Status, environment, risk	Near the title
Operational	Recency, owner, region	Subheader or metadata row
Provenance	Source, confidence, version	Body, footer, or disclosure
Technical	Identifiers, raw timestamps	Details, inspector, or expanded view

Application

Persistent shell: search, account, notifications, product switcher.

Page

Page header or action row: create, export, refresh the complete dataset.

Section

Section header or subheader: filter, sort, change view, expand a section.

Object

Card or record header/footer: edit, rerun, inspect, overflow.

Field

Immediately adjacent: reveal password, clear, scan, choose date.

Workflow

After the task: continue, save, submit, approve, confirm.

Exception

Beside the problem: retry, resolve conflict, restore failed upload.

Keep at the top

Back, close, or dismiss
Current title and essential scope
One critical page action
Overflow for secondary page actions
Status that changes the whole view

Keep out of the global header

Long descriptions
Repeated object metadata
Large filter groups
Temporary success messages
Card-specific completion actions

Use the footer for completion

Submit or continue
Approve or reject
Save as draft
View details after reading
Provenance that does not alter interpretation

Placement model: Placement = f(scope, frequency, consequence, persistence). Scope chooses the container. Frequency chooses visible versus overflow. Consequence chooses prominence and separation. Persistence chooses header, body, or footer.

Production service

Content Delivery API for International Applications and Regional Experiences

DegradedUpdated 4 minutes agoOwner: Core Platform

Elevated latency is affecting international traffic in the eastern region.

Identity, actions, metadata, and summary are independent wrapping regions. The title retains priority and the action row moves intact when space becomes constrained.

Stable header model

.object-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

@container (inline-size < 31rem) {
  .object-header {
    grid-template-columns: 1fr;
  }
}

Do not: truncate the primary identity to preserve a decorative action cluster, place long pill groups inside the title row, or split related actions individually across lines.

Always visible

Object identity
Current status or exception
Short decision summary
Descriptive disclosure label
Actions valid in both states

Reveal progressively

Technical metadata
History and raw evidence
Optional settings
Secondary relationships
Advanced actions

Never hide by default

Required fields
Critical warnings
Material consent or price terms
The current failure state
The only path to completion

Choose the expansion surface by task size

Need	Preferred pattern	Stability requirement
Small optional detail	Native details	Expand below the trigger
Several independent sections	Accordion	Preserve heading and focus
Peer views used frequently	Tabs or segment	Only controlled region changes
Medium contextual detail	Internal region	Stable header; body grows
Large focused secondary task	Sheet or drawer	Header/body/footer zones
Long, complex, deep-linkable task	Full page	Browser history and state persistence

Technical details — request latency and regional evidence

This native disclosure demonstrates the preferred small-expansion pattern. The trigger remains at the component boundary and the revealed information enters document flow below it.

state: degraded
region: us-east-1
p95_latency_ms: 842
last_updated: 2026-07-18T12:04:00-04:00

When not to use an accordion

Use plain sections, anchor navigation, or separate pages when most users need the content, when comparison across sections is important, or when the hidden material is essential to the primary decision.

Card

Header

Title, one material status, one compact utility or overflow. Keep large CTAs and extensive metadata out.

Body

Summary, decision-relevant values, recommendation, and small disclosures.

Footer

View details, continue, review, or low-priority provenance.

Dialog

Header

Short task title and dismiss control.

Body

Consequences first, focused fields, validation, and optional help.

Footer

Small action set. Only the body should scroll under normal conditions.

Form

Top

Task title, scope, progress, and error summary after failed submission.

Fields

Persistent labels, controls, hints, and adjacent field-level actions.

Footer

Submit, continue, back, save draft, and immediate consequences.

The demo becomes full-screen on constrained viewports and returns sticky regions to flow when height is insufficient.

Loading

Reserve the expected region with a skeleton matching the final structure.

Stale

Keep existing content visible and state when it was last verified.

Failed

Place retry and recovery beside the failure. Preserve prior valid state.

Updated

Replace content inside a stable region and announce material changes.

Stable expansion

Expand below the trigger
Keep title and action positions stable
Reserve expected async space
Preserve scroll and focus
Offer “new results available” instead of inserting above

Card grids

Use inline expansion only in one-column layouts with short detail. In multi-column grids, open a full-width detail region, drawer, sheet, or page.

Motion

Use animation to explain origin and continuity. Avoid independent title/action movement, large layout-property animation, and decorative spring effects in serious workflows.

Application shell

Compact title, current scope, visible search when central, and a small number of stable destinations. Do not use a bottom bar merely because the viewport is mobile.

Exception-first dashboard

Current condition → exceptions → trend → recommended action → supporting detail. Avoid equal-priority KPI walls.

Search and filter

Visible scope, applied-filter summary, result count, deliberate apply behavior, and preserved query state.

List-detail

Separate screens on compact layouts; split panes on larger layouts. Preserve filters, selection, scroll, and deep links.

Structured list

Use when users scan and act on individual records. Use contained tables when cross-record comparison is essential.

Confirmation

State what completed, reference number, timestamp, next steps, expected duration, and support path.

Data-density rule: do not convert every table into unrelated cards. Cards improve individual-record scanning but reduce cross-record comparison.

Required

Accessibility baseline

Semantic HTML and landmarks
Complete keyboard workflows
Visible, unobscured focus
Zoom and reflow without loss
Non-color status cues
Accessible errors and announcements

Touch default

Target size

WCAG 2.2 AA defines a 24×24 CSS-pixel minimum with exceptions. Design important mobile controls toward 44–48px, especially for frequent, consequential, edge-positioned, or sequential actions.

Responsible

User agency

Explain permissions and data use
Separate required and optional data
Avoid preselected consent
Make destructive consequences explicit
Provide undo or recovery where feasible

AI presence

Automation transparency

Identify AI-generated content
Show sources and provenance
Separate fact from inference
Indicate material uncertainty
Keep human approval for consequential actions

Internationalization

Use logical properties, test RTL, long translations, mixed scripts, local dates, currencies, units, addresses, and name structures.

Role and environment

Keep tenant, organization, environment, acting role, impersonation, and data scope visible when misunderstanding would cause harm.

Cross-channel continuity

Explain what can be completed on mobile, what requires another surface, whether progress transfers, and where authoritative status lives.

Delivery sequence

Render shell, title, and essential content.
Make navigation and primary action usable.
Load critical data and current state.
Hydrate enhanced interactions.
Defer charts, analytics, and optional integrations.

State completeness

Idle, loading, saving, saved, pending, partial, stale, offline, failed, retrying, unauthorized, empty, no-results, and success are different states.

Progressive enhancement

HTML owns meaning and navigation. CSS owns layout and hierarchy. Native browser behavior owns standard disclosure and form semantics. JavaScript adds filtering, live validation, optimistic updates, and richer exploration.

Explicit budgets

Initial JavaScriptCritical CSSFontsImagesThird-party codeAPI latencyLong tasksLayout shift

Control alignment lab

Change the shared control size. Input, native select, text button, and icon button should retain the same computed border-box height.

Search term

Helper text belongs below this field only.

Environment

Long-title alignment lab

Resize the component container. Actions remain block-start aligned, then move together beneath the identity region.

Customer account

International Content Platform Renewal and Regional Delivery Agreement

Renewal dueUpdated today

The action cluster stays intact while title, metadata, and summary wrap independently.

Placement and progressive-disclosure lab

Identity and status remain visible. Secondary evidence expands below the trigger. Completion remains in the footer.

Payment API incident

InvestigatingProduction12 minutes

Elevated errors are affecting checkout authorization.

Recommendation: review the failing dependency before initiating regional failover.

Show dependency evidence

The downstream identity service has exceeded the error threshold. Recent deploy history and correlated traces are available.

Example component contract

component: AccountCard
scope:
  identity: account
  actions: account
header:
  required: [title]
  optional: [primary_status, overflow]
  max_visible_actions: 1
metadata:
  primary: [status, environment, recency]
  secondary: [owner, region, source]
footer:
  optional: [view_details, continue, provenance]
expansion:
  short_detail: inline
  large_detail: sheet_or_page
responsive:
  long_title: actions_move_as_group
  narrow_width: footer_actions_stack
stability:
  trigger_remains_visible: true
  async_space_reserved: true
  preserve_scroll_context: true

Weighted review rubric

Category	Weight	Review question
Task completion	20%	Can users complete the primary outcome quickly and correctly?
Discoverability	15%	Are destinations, actions, state, and next steps apparent?
Accessibility	15%	Can users operate every workflow across input and assistive modes?
Performance and resilience	15%	Does the application remain useful under latency and partial failure?
Content clarity	10%	Is information understandable without internal organizational knowledge?
Trust and responsibility	10%	Are data use, consequences, permissions, and automation transparent?
Responsive adaptation	10%	Does each context receive an appropriate composition?
Visual craftsmanship	5%	Are hierarchy, typography, spacing, states, and motion coherent?

Version: 3.0Last reviewed: July 18, 2026Canonical artifact: self-contained HTML SPADependencies: none

Validated in this build

HTML structural checks
Duplicate-ID and fragment-target checks
JavaScript syntax check
CSS parser check
Desktop and compact Chromium render
Overflow scan at tested viewports

Remaining release gates

Manual VoiceOver, NVDA, and JAWS testing
Safari and Firefox behavior
200% and 400% zoom workflows
Real RTL localization
Windows forced-colors testing
Real-user performance monitoring

Primary references

W3C Web Content Accessibility Guidelines 2.2Accessibility requirements, text spacing, reflow, focus, and pointer input.
W3C Target Size (Minimum)24×24 CSS-pixel Level AA criterion and spacing exceptions.
W3C Text SpacingRequirements for lossless user-defined text-spacing overrides.
IBM Carbon spacingSpacing scale, parent-owned stacking, relationship, hierarchy, and whitespace.
IBM Carbon dropdownShared 32/40/48px form-control families and dropdown behavior.
IBM Carbon date pickerConsistent input-size families and independent popup geometry.
IBM Carbon contained list32/40/48/64px list-row density tiers.
Microsoft Fluent dialogFocused modal tasks, action discipline, and focus restoration.
Microsoft Fluent drawerHeader, scrollable body, footer, and responsive drawer behavior.
Microsoft Fluent selectNative form selection and standardized field integration.
GOV.UK responsive spacingStable small spacing values and responsive large structural values.
GOV.UK accordionProgressive disclosure selection and alternatives.
U.S. Web Design System button groupsRelated action grouping and mobile stacking.
Apple Human Interface Guidelines: layoutAdaptive placement, context preservation, and compact prioritization.
Apple Human Interface Guidelines: buttonsConsistent control sizing and action hierarchy.
Atlassian spacingTokenized spacing and density foundations.
Atlassian lozengeCompact status and attribute labels.
GitHub Primer ActionListLeading identity, trailing metadata, and row actions.
web.dev layout stabilityReserved space and avoidance of unexpected content insertion.
W3C Ethical Web PrinciplesPrivacy, security, accessibility, internationalization, and user control.
OWASP ASVSApplication security verification and secure-by-design architecture.
Design Tokens Community Group 2025.10Vendor-neutral token structure for dimensions, aliases, and typography composites.

Mobile-first design, engineered as a system.

Standards and functional baselines

Default production practices

Pattern selection

The smallest credible context has multiple dimensions

Components own internal space

Parents own sibling relationships

Pages own structural cadence

Primitive and semantic scale

Property ownership

Responsive compression

Density modes

Whitespace

Tolerate user text-spacing overrides

Prevent accidental geometry

Canonical geometry

Exact versus minimum height

Optical differences

Radius family

Normalize native selectors

Align control tracks

Reflow before wrapping controls

Selector families

One line only

Intrinsic centering

Curve-aware follow spacing

Derived geometry

Metadata priority

Keep at the top

Keep out of the global header

Use the footer for completion

Stable header model

Always visible

Reveal progressively

Never hide by default

Choose the expansion surface by task size

Header

Body

Footer

Header

Body

Footer

Top

Fields

Footer

Stable expansion

Card grids

Motion

Application shell

Exception-first dashboard

Search and filter

List-detail

Structured list

Confirmation

Accessibility baseline

Target size

User agency

Automation transparency

Internationalization

Role and environment

Cross-channel continuity

Delivery sequence

State completeness

Progressive enhancement

Explicit budgets

Control alignment lab

Long-title alignment lab

Placement and progressive-disclosure lab

Example component contract

Weighted review rubric

Production-readiness checklist

Validated in this build

Remaining release gates

Primary references