TintSense
Get the plugin
Design Intelligence Pro Feature v1.2.0

Design Tokens & Root Cause Insights

Audit color tokens, discover root-cause styles causing multi-screen violations, and map failing text to existing compliant design tokens.

Fix the token once. Fix twenty screens simultaneously.

In a design system, a contrast violation is almost never an isolated accident. It is usually caused by a single color token—such as text/secondary or color/neutral-400—being paired with an incompatible surface token like surface/subtle.

If you fix instances one layer at a time with raw hex colors, you break your design system tokens. TintSense Design Tokens & Insights analyzes the shared styles behind your layers, exposing root causes and matching solutions to your existing color palette.

The Root Cause Algorithm

TintSense inspects the Figma styleId and variable bindings on both foreground and background layers. It groups all failures by their underlying token identity (source.type:source.id), ranking styles by failure frequency:
Root Causes = GroupBy(styleId) → OrderByDescending(failCount)

What Design Insights Uncovers

1. Systematic Root Cause Detection

Instead of viewing 45 scattered failure notifications, TintSense summarizes: "Style Neutral / Muted 500 causes 32 failures across 4 screens." Updating that single token in your Figma library resolves all 32 failures simultaneously.

SYSTEMATIC ROOT CAUSE GROUPING EXAMPLE TOKEN CONTEXT
style:tokens/text-tertiary

Used on 18 layers across 3 frames (All 18 fail WCAG AA)

18 Fails

2. Existing Palette Candidate Matching

When suggesting a color fix, generating an arbitrary raw hex code (e.g. #586578) creates design debt if that color does not exist in your design system.

TintSense scans your file's local color styles and Figma variables. It translates your palette into OKLab space and recommends the top 5 closest compliant existing design tokens:

  • Preserves Token Architecture: You apply an approved token like text-secondary-darker instead of a rogue hex value.
  • Sorted by Perceptual Distance ($\Delta E$): The token that most closely matches your designer's aesthetic intent appears first.
  • Explicit Target Ratios: Every palette candidate shows the exact resulting contrast ratio before you apply it.

3. Theme & Variant Auditing

Safely test component variants across light and dark theme mode tokens, verifying that contrast holds true across every state (hover, active, disabled, focus).

How to use in Figma

  1. Scan any frame built with Figma color styles or variables.
  2. Click the Insights button (stacked layers icon) in the header, or open Sources & Themes in Settings.
  3. Review the ranked root-cause tokens and explore existing compliant palette candidates.