Pattern Quality Auditor

Executive Summary

This is a two-tool suite, a Pattern Quality Auditor and a Feed Card Pattern Spec, for evaluating visual pattern quality at the component level using Gestalt principles, color-vision-deficiency simulation, and WCAG compliance. The insight behind it: a feed-card surface is a pattern surface, and pattern quality is measurable, not just a matter of taste. It's a Railway-deployed static + Flask tool that needs no API key for the core audit logic.

Problem Statement

Visual pattern consistency is treated as a design-review concern, not an engineering one, so it escapes automated QA. Color vision deficiency affects roughly 8% of male users, yet CVD simulation is rarely part of a standard review. Gestalt failures (figure-ground confusion, proximity violations, poor closure) are hard to articulate in critique without a framework. And WCAG contrast failures in UI patterns get caught late, when remediation is expensive.

The gap: no tool combines a Gestalt audit, CVD simulation, and WCAG flagging at the component level for a feed-card-based product. This is that tool.

Tool Architecture

Tool 1: Pattern Quality Auditor

Input is a URL or pasted HTML of a component. The auditor evaluates five dimensions and returns severity-graded findings (Critical / Warning / Info) with remediation guidance, exportable as a JSON report.

Tool 2: Feed Card Pattern Spec

A living pattern specification for feed cards: card anatomy, spacing system, image-ratio variants, text-truncation rules, and interaction states (hover, pressed, saved, loading). It's a standalone HTML spec rather than a tool: the reference artifact that demonstrates pattern-system fluency.

Stack

Static HTML + vanilla JS for the core audit logic (CVD simulation and contrast need no backend), served by Flask on Railway. CVD simulation runs through CSS filter matrices, no canvas manipulation; contrast uses the relative-luminance formula from the WCAG 2.1 spec. Runs persist in session.

Design Decisions

Gestalt as an audit framework

Gestalt principles are the closest thing design has to physics. They describe how human perception organizes information, not how designers prefer things to look. Using them as an audit framework makes pattern quality objective and communicable rather than a matter of taste.

CVD simulation as a first-class feature

For a visual product, color is load-bearing: it carries saved state, action affordances, category chips, brand identity. CVD simulation here isn't a compliance checkbox; it's a product- quality signal. Deuteranopia (red-green) affects the largest population and collides directly with a red brand color, and that tension is what makes the audit meaningful for this product.

The feed card as the atomic unit

The product surface is composed of feed cards, so auditing at the card level makes findings immediately actionable: a contrast failure on a card title can be fixed without the full page context. That's the right granularity for a pattern-quality tool.

Spec as a deliverable

The Feed Card Pattern Spec isn't documentation of an existing system; it's a demonstration of how I think about pattern systems. Writing a spec forces explicit decisions about spacing, states, truncation, and hierarchy that are usually left implicit. It's the same skill as authoring a design system.

What This Demonstrates

Design-systems fluency (pattern spec, component anatomy, state documentation), accessibility depth (CVD simulation, WCAG contrast, tap-target sizing, not surface-level compliance), and systems thinking (two tools designed as a suite). It addresses pattern quality at the product's atomic unit, the feed card. Built and iterated through an AI-native, bootstrap-file workflow with Claude Code.

Live Demo