Room to understand. Motion that explains.

One scale. Different relationships.

Reuse the existing 4–96 px steps. A small gap connects details; a larger one separates decisions. Choose a role before choosing a number.

Space around the same idea.

Compare two card recipes without changing the words or type size. Compact is for repeated content; comfortable gives an introduction more room. These values describe padding and gaps, not fixed heights.

.ds-spaced-card {
  padding: var(--ds-space-32);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-24);
}
.ds-spaced-card > * { margin: 0; }

A shared grid, with room to adapt.

Use 4, 8 or 12 columns as the viewport grows. Align related text, images and actions to the same edges. The content container stops at 1200 px, excluding its outer margins.

Columns

12

Gutter

24 px

Outer margin

32 px

From viewport

1024 px

This is a scaled grid diagram, not a device simulator. The numbers describe the actual CSS recipe. Cards stack on small screens, use two columns on medium screens and three on large screens.

Keep the rhythm when the screen changes.

• Stack content in its reading order. Do not visually reorder cards away from keyboard and document order.
• Let content determine height. Long copy, validation messages and translated labels need room to grow.
• Use 48 px between sections on narrow layouts and 64–96 px on larger layouts as starting points. Related elements stay closer together.
• Keep one shared alignment edge for a heading, its body and its action. Center a short statement only when the composition calls for it.
• Keep essential controls comfortably sized; use a 44 × 44 px touch target as the pilot default. Do not confuse icon size with hit area.
• Use the social templates’ safe areas for feed and Stories, and the logo’s own clear-space rules. A web gutter does not replace either.

Layers with a clear order.

These pilot z-index values belong inside an isolated component or page context. They are not a promise that a number can escape a parent stacking context. Prefer the browser’s native dialog behavior for modals.

1. 0

   Content

   Normal flow and local decorative elements.

   --ds-layer-content
2. 10

   Sticky navigation

   Header or navigation, without hiding focused content.

   --ds-layer-sticky
3. 20

   Contextual menu

   Menus close to their originating control.

   --ds-layer-popover
4. 30

   Modal backdrop

   A backdrop separates a dialog from the rest of the page.

   --ds-layer-overlay
5. 40

   Dialog

   Modal content; manage focus, Escape and return to the trigger.

   --ds-layer-dialog

A response, not a performance.

Keep the existing 220 ms easing as the default. Use a quicker response for small controls, or a little more time for a small reveal. The duration never delays the action itself.

Shared easing: cubic-bezier(0.4, 0, 0.2, 1)

What stays still matters too.

• Animate only the properties that explain a state: color, opacity and a small transform. Avoid transition: all, fixed-height reveals and layout shifts that move a target under the pointer.
• Keep keyboard focus visible immediately. A hover effect must have a keyboard equivalent; do not hide an action until hover.
• Do not make reading depend on a timed reveal. Avoid parallax, bouncing loops and automatic carousels in this pilot.
• With prefers-reduced-motion: reduce, remove transitions, entrance animations and spatial offsets. Keep the final content, labels and selected state.
• For dialogs and menus, motion is only one part of the behavior. Implement focus handling, dismissal and the correct semantics before adding animation.

A recipe your team can reuse.

The same spacing roles, grid breakpoints, layers and motion recipes are available in JSON, scoped tokens and the AI guide. Copy examples with their reduced-motion rule.

Pilot specification. Existing pages still need a spacing and layering audit; broader keyboard, zoom and reduced-motion checks remain open.