Quality Standards

Quality Standards Reference

This skill defines the quality gates, scoring criteria, and acceptance standards that all designs must meet.

Quality Gates (95% MINIMUM)

All gates must pass for design completion:

Scoring Rubrics

Spatial Design (0-10)

Key Checkpoints:

• All spacing values on 8pt grid (or 4pt for micro)
• Consistent spacing between similar elements
• Logical spacing hierarchy (related closer, unrelated farther)
• Proper alignment to grid columns
• Balanced visual weight distribution
• Effective use of whitespace

Color Design (0-10)

Key Checkpoints:

• All text/background combinations meet WCAG AA (4.5:1)
• UI components meet 3:1 contrast
• Color palette is harmonious (defined relationship)
• Colors evoke intended emotional response
• Colors are appropriate for sector
• Palette is not generic/default framework colors

Typography (0-10)

Key Checkpoints:

• Clear visual hierarchy (size, weight, color)
• Font pairing is intentional and complementary
• Line length 50-75 characters
• Line height appropriate (1.4-1.6 for body)
• Minimum 16px for body text
• Consistent usage across similar elements
• Proper CSS implementation (rem, variables)

Originality (0-10)

Key Checkpoints:

• No generic gradients (purple-blue, etc.)
• Layout patterns customized from stock
• Framework defaults modified
• Decorative elements are purposeful
• Real content (not placeholder)
• Distinct brand personality present

WCAG 2.1 Checklist

Level A (Must Pass)

Level AA (Should Pass)

Level AAA (Recommended)

Issue Classification

Critical (Blocks Deployment)

• WCAG Level A failures
• Color contrast below 3:1
• Broken core functionality
• Unreadable text
• Keyboard traps
• Missing skip links

High Priority (Fix Before Launch)

• WCAG Level AA failures
• Color contrast 3:1-4.5:1 (below AA)
• Significant layout issues
• Poor visual hierarchy
• Major spacing inconsistencies
• No focus indicators

Medium Priority (Fix Soon)

• Minor spacing issues
• Suboptimal color choices
• Typography tweaks
• Enhancement opportunities
• WCAG AAA suggestions

Low Priority (Nice to Have)

• Micro-interaction polish
• Animation refinements
• Advanced accessibility features
• Performance optimizations

Iteration Strategy

Explore Phase (Iterations 1-5)

• Try bold, different approaches
• Don't optimize prematurely
• Focus on overall direction
• MUST complete all 5 iterations even if gates pass early
• Use early passing to polish and exceed thresholds

Exploit Phase (Iterations 6-12)

• Refine the best approach
• Fix specific issues identified
• Optimize for quality gates
• Polish and perfect

Pivot Phase (Iterations 13-20)

• If stuck, try completely different direction
• Re-run research with new direction
• Reset assumptions
• Challenge previous decisions
• Consider alternative approaches

Score Calculation

Overall Score = (Spatial × 0.25) + (Color × 0.25) +
                (Typography × 0.25) + (Originality × 0.25)

Pass Criteria:
- Minimum iterations >= 5
- Overall >= 9.5 (95%)
- All dimensions >= 9.0
- Originality >= 9.5
- Vibe-code probability < 1%
- Critical issues = 0
- WCAG AA = 100%

Failure Patterns

Score Plateau

Detection: No improvement for 2+ iterations Action: Switch to Pivot strategy, try different approach

Recurring Issues

Detection: Same issues appear after "fixing" Action: Address root cause, not symptoms

Regression

Detection: Scores decreasing Action: Revert to previous best, analyze what broke

Dimension Imbalance

Detection: One dimension consistently low Action: Focused iteration on weak dimension