Consistent colors and spacing are essential for a polished UI. QA Proof automatically validates that your implementation matches the design specifications.

Color Validation

QA Proof compares colors between your Figma design and the live page:

Background colors: Element backgrounds and page sections
Text colors: Headings, body text, and links
Border colors: Input fields, cards, and dividers
Gradients: Direction, color stops, and opacity

Color Tolerance

Minor color differences can occur due to rendering engines. Configure tolerance in your test settings:

Strict: Flags any color difference (0% tolerance)
Normal: Allows minor rendering differences (default)
Relaxed: Only flags visually noticeable differences

Spacing Validation

QA Proof measures and compares:

Margins: Space between elements
Padding: Internal spacing within elements
Gaps: Space in flex and grid layouts
Alignment: Element positioning relative to containers

Design Token Mapping

If your project uses design tokens, QA Proof can map live CSS values to your token system, making it easy to spot where a hardcoded value should use a token instead.

Viewing Results

Color and spacing issues appear in your test results with:

Expected vs. actual values
Visual highlighting on the screenshot
Suggestions for which design token or CSS variable to use