---

name: ux-spacing-layout description: Utopia fluid spacing tokens and layout patterns. Use when applying margins, padding, gaps, or creating layouts. Covers space scale, container widths, and responsive spacing. (project) allowed-tools:

• Read
• Write
• Edit
• Glob
• Grep

---

UX Spacing & Layout Skill

Fluid spacing system using Utopia scale with container query inline (cqi) units. This skill covers spacing tokens, layout patterns, and visual rhythm.

Space Scale

The project uses Utopia fluid spacing with cqi units. Sizes interpolate based on container width.

IMPORTANT: cqi units require container-type: inline-size on an ancestor.

Space Tokens

One-Up Pairs

For asymmetric spacing relationships:

Usage Patterns

Padding

Copy/* Compact element */
.chip {
  padding: var(--space-2xs) var(--space-xs);
}

/* Standard button */
.button {
  padding: var(--space-s) var(--space-m);
}

/* Card */
.card {
  padding: var(--space-m);
}

/* Modal */
.modal {
  padding: var(--space-l);
}

Margins

Copy/* Between inline elements */
.inline-group > * + * {
  margin-inline-start: var(--space-xs);
}

/* Between sections */
section + section {
  margin-block-start: var(--space-xl);
}

/* Page container */
.page {
  margin-inline: auto;
  padding-inline: var(--space-m);
}

Gap (Flexbox/Grid)

Copy/* Tight list */
.list-tight {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* Standard stack */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* Card grid */
.grid {
  display: grid;
  gap: var(--space-m);
}

/* Icon + text */
.icon-text {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

Layout Utilities

u-stack (Vertical)

Copyu-stack[gap="3xs"] { gap: var(--space-3xs); }
u-stack[gap="2xs"] { gap: var(--space-2xs); }
u-stack[gap="xs"]  { gap: var(--space-xs); }
u-stack[gap="s"]   { gap: var(--space-s); }
u-stack[gap="m"]   { gap: var(--space-m); }
u-stack[gap="l"]   { gap: var(--space-l); }
u-stack[gap="xl"]  { gap: var(--space-xl); }

u-row (Horizontal)

Copyu-row[gap="xs"]  { gap: var(--space-xs); }
u-row[gap="s"]   { gap: var(--space-s); }
u-row[gap="m"]   { gap: var(--space-m); }

Container Widths

Copy.u-container {
  width: min(100% - var(--space-m) * 2, var(--max-width, 1200px));
  margin-inline: auto;
}

.narrow { --max-width: 600px; }
.medium { --max-width: 900px; }
.wide   { --max-width: 1200px; }

Visual Rhythm

Consistent Spacing Rules

1. Related items: Use --space-2xs to --space-xs
2. Grouped elements: Use --space-s to --space-m
3. Sections: Use --space-l to --space-xl
4. Page breaks: Use --space-2xl to --space-3xl

Example Component

Copy.card {
  /* Card padding */
  padding: var(--space-m);

  /* Internal spacing */
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.card-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.card-content {
  /* Paragraph spacing */
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.card-actions {
  /* Button group */
  display: flex;
  gap: var(--space-xs);
  margin-block-start: var(--space-s);
}

Responsive Spacing

Container Queries

Copy/* Compact on small containers */
@container (max-width: 400px) {
  .card {
    padding: var(--space-s);
    gap: var(--space-xs);
  }
}

/* Generous on large containers */
@container (min-width: 800px) {
  .card {
    padding: var(--space-l);
    gap: var(--space-m);
  }
}

Asymmetric Spacing

Use one-up pairs for progressive spacing:

Copy.section {
  /* Tight top, generous bottom */
  padding-block: var(--space-s-m) var(--space-m-l);
}

Common Patterns

Form Layout

Copy.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.form-actions {
  display: flex;
  gap: var(--space-s);
  margin-block-start: var(--space-s);
}

Navigation

Copy.nav {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-2xs);
}

.nav-item {
  padding: var(--space-2xs) var(--space-s);
}

Dialog/Modal

Copy.modal {
  padding: var(--space-l);
}

.modal-header {
  padding-block-end: var(--space-m);
  border-block-end: 1px solid var(--theme-outline);
}

.modal-body {
  padding-block: var(--space-m);
}

.modal-footer {
  padding-block-start: var(--space-m);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-s);
}

Avoid

Copy/* DON'T: Fixed pixel values */
.bad {
  padding: 16px;
  margin: 24px;
}

/* DON'T: Magic numbers */
.bad {
  gap: 13px;
}

/* DON'T: Inconsistent spacing */
.bad {
  padding: 10px 20px 15px 25px;
}

Do

Copy/* DO: Use space tokens */
.good {
  padding: var(--space-s);
  margin: var(--space-m);
}

/* DO: Consistent relationships */
.good {
  padding: var(--space-s) var(--space-m);
}