Identifying underserved user needs and unexplored technical possibilities where your solution can differentiate itself and capture market share.
Currently, tools are siloed: Figma Variables manage design tokens, Stylelint manages code tokens, and Chromatic manages visual output. No single tool actively correlates a change in the Design System (Figma) with unauthorized usage in the Codebase (Repo). A developer might use a hardcoded hex value because they don't know the token changed in Figma, or vice versa. Existing tools track changes separately but do not cross-reference them to flag 'drift' specifically.
Build a bridge that ingests design system exports from Figma/Sketch and scans the codebase (CSS/SCSS/Tailwind) simultaneously. Flag instances where code references a token that no longer exists in the design system, or where a hardcoded value matches an old token name but is being used incorrectly.
Tools like Chromatic and Stylelint flag issues (visual regression or lint errors), but they rarely suggest the *correct* token to use. If a developer accidentally uses `#FF0000` instead of `--primary-red`, Stylelint might just block it, but if the config is loose, it passes. Zeroheight suggests documentation links, not code fixes. There is a gap in providing an automated 'fix' or suggestion engine that maps the unauthorized value back to the correct token based on context.
Implement an AI-assisted or rule-based engine that analyzes the unauthorized value and suggests the closest matching standard token from the active design system, allowing for one-click remediation of drift issues.
Design systems often accumulate 'shadow tokens'—tokens used in legacy code or specific components that are no longer part of the official design system. Figma Variables and Stylelint focus on enforcing current tokens, but they do not actively hunt for *orphaned* tokens being used in production that have been deprecated. This leads to technical debt and inconsistent behavior when those old tokens are eventually removed.
Create a 'Token Health' dashboard that identifies which tokens are actually being used in the codebase versus which are defined in the system, highlighting deprecated tokens that still see usage to help teams plan migrations.
Visual regression tools (Chromatic) detect color shifts but don't necessarily calculate the impact on accessibility standards (WCAG). If a token drifts slightly (e.g., `#333` to `#323`), it might pass visual checks but fail contrast ratios. Stylelint can check contrast, but not specifically when linked to *token drift*. There is no tool that combines token monitoring with real-time accessibility compliance checking.
Integrate WCAG/contrast calculations directly into the drift detection workflow. Alert teams if a token change causes an accessibility violation, even if the visual difference is negligible to Chromatic.
Most tools check at build/commit time (Stylelint) or design time (Figma). However, token drift can happen via runtime configuration (e.g., environment variables overriding CSS variables in a staging environment). No tool currently monitors how tokens are injected at runtime to ensure they match the design system definition.
Develop an agent or extension that hooks into the build pipeline and runtime config to detect if environment-specific token overrides deviate from the standard design system without approval.