F Kitchen Sink

UX audit rules

Visual rhythm (subjective)

Rule handbook metadata

Rule
AI.VISUAL.RHYTHM_SUBJECTIVE · lane ai
Page status
stale
page_version
9a851787584568a259e62976e032bb67cd92f6ea87b1ab2857cffe41f939ef30
generated_at
2026-05-19T23:15:00.000Z
registry_fingerprint
6773fda516344e110b5a7b1435e655e1264e773825ca8bbe62194189891c42ba

How this rule is fixed

This is an AI-enabled rule. Pass/fail requires model judgment; there is no deterministic fixer in the pilot registry.

  • Harness: invoke-ai-ruleset-harness.sh runs design-rules/ai/run-design-ai-rule.sh on the Before fixture and expects findings with matching principleId.
  • Remediation: Cursor agent plans from forge-ux-remediation.plan.md after sitewide audit — not handbook After copy.

Detection module: docs/design/ux-audit/ai-enabled-design-principles.md#ai-visual-rhythm-subjective. Scroll down for Before / After examples and Evidence and remediation steps.

Purpose

Kitchen Sink landing_page, product_page, and forge-section bands should read as one measured scroll—sections breathe at a shared cadence, card rows align to a grid, and repeated motifs (section-label, forge-card, g-3 g-lg-4) signal structure before the reader parses copy. This AI rule judges felt rhythm: whether spacing and grouping look deliberate, not like fragments pasted together.

Deterministic DET.VISUAL.RHYTHM samples median vertical gaps and spread ratios; DET.LAYOUT.GRID_CONSISTENCY guards column class patterns. This rule catches when those checks pass yet the page still feels accidental—misaligned card baselines, alternating container widths, one-off padding stacks, or section headers that break the motif mid-page.

Plan: Scroll the page and mark where the beat breaks—sections that jump padding, rows with mismatched column spans, or card bands that abandon the established label → heading → grid pattern. Do: Re-stage bands with shared KS spacing utilities (py-5, g-3 g-lg-4), one container width per page mode, and repeated section-label + heading anatomy. Check: Screenshot review from hero through two mid-page bands; confirm adjacent sections share vertical cadence and column alignment. Adjust: When the same accidental grouping repeats (for example mixed card padding in one row), propose a deterministic DET.* companion or catalog contract tightening.

Passing signals

  • Section stack repeats a motif: forge-section py-5 (or consistent fs-landing-section py-4 px-2 px-md-3) with section-label text-cyan → one h2/h3 → content grid—reader anticipates the next band.
  • Row gutters stay on the same scale: g-3 g-lg-4 (or g-4) across outcome, proof, and depth bands—not g-1 beside g-4 without semantic reason.
  • Card rows use uniform shells: forge-card breathe-link h-100 (or breathe-static) with matching internal spacing (card-label, h5, forge-support)—columns align at the top and feel like one grid unit.
  • Container width is stable within a page mode: container for narrative bands or container-fluid landing-hero-wide px-3 px-xxl-5 for hero/wide diagrams—not arbitrary switches every other section.
  • Vertical cadence echoes between bands: similar py-* between major sections, predictable gap from hero actions to the first forge-section, no random mt-5 / mb-1 stacks breaking flow.
  • Column spans follow a readable grid: three-up col-md-4, two-up col-lg-6, or four-up col-6 col-md-3—not col-md-4 beside col-md-5 beside col-md-3 in the same logical row.
  • Hash-marked layout roots (hash="…", data-ks-hash, data-ks-type, data-ks-name) appear on major bands so rhythm fixes map back to catalog contracts.

Failing signals

  • Accidental pile-up: hero uses py-2 g-1, next band py-5 g-4, then py-3 with no narrative reason—scroll feels like stacked templates, even if median gap passes DET.VISUAL.RHYTHM.
  • Grid drift: sibling forge-card tiles in one row use col-md-4, col-md-6, and col-md-2—columns do not align; card baselines and gutters disagree.
  • Motif break: first two sections use section-label + h3, then a mid-page band jumps to bare h2 with no label and different container-fluid px-1 padding—reader loses the scan pattern.
  • In-row inconsistency: cards mix p-2, p-4, and inline padding in the same row; one tile is forge-card, another is raw glass—grouping reads accidental, not rhythmic.
  • Width whiplash: alternating container and container-fluid px-1 sections cause content rails to jump left/right without a layout mode change (DET.LAYOUT.GRID_CONSISTENCY may flag; this rule catches perceived jerkiness on screenshot review).
  • Orphan spacing: lone mt-5 on one card, mb-0 on neighbors, or a row g-2 inserted between two g-4 bands—micro-gaps fight the section cadence.
  • Heading ladder noise: section titles alternate h2, h4, and unclassed headings with no scale step—vertical rhythm breaks even when copy is fine (DET.SECTION.HEADING partially covers; subjective beat still fails).

Before example

Before (failing example)

Forge Platform

Governed delivery spine

Structure intent and keep review points visible.

Quickstart Docs

Outcomes

What changes

Control

Human gates

Review stays visible.

Evidence

Logs linked inline.

Depth

How it works

Step 1

Shape intent.

Step 2

Delegate with bounds.

12 modules

48 endpoints

∞ agents

Failing KS markup: numeric gaps may average out, but section padding, gutters, column spans, and card treatments jump—grouping feels accidental.

After example

After (passing example)

Forge Platform

Governed delivery you can inspect

Structure intent, delegate safely, and keep human review points—presented with deliberate vertical cadence.

Start with Quickstart See how it works

Governance spine from intent through review to evidence

Outcomes

What changes for your team

Control

Human-owned gates

Review points stay visible in every band.

Evidence

Inspectable artifacts

Logs and contracts use the same card rhythm as neighbors.

Depth

Mechanism on demand

Technical detail deferred—this row stays aligned and even.

How it works

From intent to evidence

Step 1

Shape intent

Capture goals and boundaries before delegation.

Step 2

Delegate with bounds

Agents execute inside review gates you define.

4 layers

1 governance spine

0 mystery gaps

Passing KS markup: repeated section motif, stable gutters, aligned three-up grid, and consistent card anatomy—rhythm reads intentional on scroll.

Evidence and remediation

Capture: full-page desktop screenshot plus a crop of two adjacent mid-page bands. Note section py-* classes, row g-* utilities, container width, column spans per row, and card shell consistency. Record whether DET.VISUAL.RHYTHM and DET.LAYOUT.GRID_CONSISTENCY passed despite subjective jerkiness.

Remediate (in order):

  1. Normalize major section padding to one cadence (forge-section py-5 or matched fs-landing-section py-4 px-2 px-md-3)—remove one-off py-2 / py-3 unless marking a distinct page mode.
  2. Restore the section motif: section-label text-cyan → one heading → grid; do not drop labels mid-page without reason.
  3. Align row gutters (g-3 g-lg-4) and column spans (col-md-4 triplets, col-lg-6 pairs)—fix orphan col-md-6 + col-md-2 splits in the same logical band.
  4. Unify card anatomy inside a row: one shell (forge-card breathe-link or breathe-static), shared internal spacing (card-label, h5, forge-support), h-100 for equal height.
  5. Stabilize container width per page mode—hero wide rail vs narrative container; avoid container-fluid px-1 beside container without layout intent.
  6. Re-run deterministic rhythm/grid checks; if accidental grouping repeats with stable DOM signals (mixed card padding in one row, column span drift), propose DET.* promotion (for example card-row padding parity or max column-span variance per row).