Design Quality Gates

Overview

Convert design decisions from taste-led to constraint-led. Apply measurable gates to every design task and block sign-off until all mandatory gates pass.

Mandatory Use

• Use for every design-related task: web, iOS, macOS, marketing pages, app UI, component libraries.
• Pair with domain skills (design-system-doc, interface-design, frontend-design, ios-hig) instead of replacing them.
• If a gate fails, do not finalize. Propose concrete remediation.

Workflow

1. Read active design doctrine (DESIGN.md if present).
2. Identify task surface: layout, typography, hierarchy, color, accessibility, motion.
3. Run all gate checks below.
4. Mark pass/fail per gate with one-line evidence.
5. Fix failures or explicitly request user tradeoff approval.

Gate Checks (Required)

1) Layout + Grid

• Explicit container and breakpoint strategy defined.
• Predictable alignment: edges/baselines snap to grid.
• Spacing uses a consistent scale (no ad-hoc values).
• No accidental asymmetry unless it communicates priority.

2) Typography

• Typography serves content semantics; decoration never outranks hierarchy.
• Type scale is explicit, limited, and mapped to semantic roles.
• Prose measure is intentional (target ~45-75 characters per line).
• Leading is tuned to rhythm (typical body range ~1.2-1.45).
• Spacing is systemic (letter/word/line/paragraph), not ad-hoc.
• Proper glyphs only: true quotes/apostrophes/dashes/ellipsis, ligatures/small caps when appropriate.
• No faux styles/distortion: never fake bold/italic/small caps or stretch/compress type.
• Justification/hyphenation settings must prevent rivers, ladders, widows, and orphans.

3) Visual Hierarchy

• One dominant focal point per screen/section.
• Primary action visually unambiguous.
• Scannability: user can identify structure within 5 seconds.
• Decorative emphasis does not compete with semantic emphasis.

4) Color System

• Color roles are semantic (primary/success/warning/error/info), not arbitrary.
• State communication is not color-only; shape/text/icon support present.
• Accent usage is restrained and intentional.
• Contrast checked before sign-off (not post-hoc).

5) Accessibility

• Text contrast: at least 4.5:1 (normal), 3:1 (large).
• Non-text UI contrast: at least 3:1.
• Touch/pointer targets meet platform minimums.
• For mobile navigation overlays: row targets prefer >=56px; trigger/close controls >=48px.
• Reading/navigation order matches visual order.
• Zoom/reflow and text-spacing overrides do not break UI.
• Motion respects reduced-motion preferences.

6) Interaction + Motion

• Transitions communicate causality (what changed and why).
• Gesture-driven feedback starts immediately and tracks user input.
• Repeated interactions use restrained timing; avoid novelty fatigue.
• Motion remains interruptible and reversible when possible.
• Apply design-interaction-motion-craft for principle-level review.
• For mobile overlays: open/close must be zero-layout-shift across repeated toggles (no page jump, no header baseline jump).

7) Navigation Overlay Ergonomics (When Applicable)

• Section labels and destination links use distinct type scales/hierarchy.
• Section rhythm is explicit (group spacing + optional separators); avoid margin-stack drift.
• Focus trap + Escape + backdrop close + focus restore are verified.
• Safe-area insets are applied on top and bottom.

Definition of Done

• No unresolved gate failures.
• Constraints documented when deviating from doctrine.
• Final notes include: failed-before-fixed gates and resulting design delta.

Red Flags (Amateur Patterns)

• Grid drift: near-aligned but inconsistent edges.
• Type drift: too many one-off sizes/weights.
• Typographic fraud: faux bold/italic/small caps, stretched/compressed text.
• Text texture defects: rivers, ladders, widows, orphans in long-form copy.
• Contrast debt: unreadable low-contrast text/buttons.
• Hierarchy collapse: multiple competing "primary" elements.
• Color drift: decorative palette with no semantic mapping.
• Accessibility retrofit late in cycle.

Output Contract

• For implementation tasks: include concise gate pass/fail summary with fixes applied.
• For review tasks: findings ordered by severity with concrete remediation.
• If objective metrics were not verifiable, state that explicitly.

Related Skills

• design-typography-system-doc - strict typography doctrine (TYPO.md) and role/ratio governance.
• design-system-doc - source of durable design doctrine (DESIGN.md) that these gates enforce.
• web-design-guidelines - use for detailed WCAG/web interface audits after gate failures.
• ios-hig - use for Apple-platform-native interaction and accessibility constraints.
• design-interaction-motion-craft - interaction behavior and animation craft principles for motion/transition quality.