Roadmap

Color Blindness SimulatorUpload an image/screenshot, apply deuteranopia/protanopia/tritanopia CSS filters side-by-side, see WCAG AA/AAA impact. Uses SVG filters — pure client-side.

EffortMedium

Accessibility Audit DashboardEnter a URL, get a simplified WCAG 2.1 audit: passes/fails per success criterion, contrast ratio analysis, ARIA usage check, alt text detection.

EffortLow

Brand Color DirectorySearchable directory of 600+ brand color codes (HEX/RGB/HSL) with copy-to-clipboard. Filter by brand name, export to CSS custom properties or Tailwind config.

EffortLow

Accessible Palette BuilderGenerate WCAG-compliant color palettes from a base color. Test each against AA/AAA, preview on UI elements (text on background), export as CSS variables.

EffortMedium

Color Gradient StudioInteractive gradient builder with multi-stop colors, angle/direction controls, and live preview on a sample card. Export as CSS gradient code.

EffortLow

Font Pairing ExplorerBrowse Google Font heading+body pairings with live preview on real UI components (card, hero, nav). Shows type scale, line-height, exports CSS @import snippet.

EffortLow

Typography Scale GeneratorGenerate modular typography scales from a base size and ratio (major second, golden ratio, etc.). Preview all scale levels as HTML headings. Export as CSS clamp() or rem values.

EffortLow

Font Feature AnalyzerUpload a .woff/.ttf font, extract and display all OpenType features (ligatures, stylistic sets, kerning, character map). Shows CSS font-feature-settings code.

EffortMedium

SVG Blob GeneratorInteractive organic/blob SVG shape generator. Drag control points, adjust complexity/contrast, choose gradient or solid fill. Copy SVG code or download.

EffortLow

SVG Squircle GeneratorGenerate SVG squircles (smooth rounded rectangles between square and circle). Control corner radius per-corner, aspect ratio. Copy SVG code.

EffortLow

Device Mockup GeneratorUpload a screenshot, place it in device frames (MacBook, iPhone, iPad, browser window). Customize background, shadow, orientation. Download as PNG.

EffortMedium

SVG Icon CustomizerBrowse 2000+ open-source SVG icons, customize stroke width, color, size, corner rounding. Preview in real-time. Copy SVG or download as .svg/.jsx.

EffortLow

Logo Tester LabUpload a logo SVG/PNG. Run automated tests: color blindness simulation, minimum size test, contrast on light/dark backgrounds, favicon scalability preview. Score and recommendations.

EffortMedium

Design Token ConverterConvert between design token formats: paste CSS custom properties → get SCSS variables, JSON (Style Dictionary format), Tailwind config, or TypeScript. Works both directions.

EffortLow

Design Token Style Guide BuilderPaste/upload design tokens JSON (colors, typography, spacing) → auto-generate visual cards for each token → check WCAG contrast → view typography scale → export as HTML style guide.

EffortMedium