VoilaDesign

A complete design toolkit for designers and developers — colour, typography, and spacing inspector in one extension.

VoilaDesign is a precision design inspector for designers and developers. Click any element on any page and instantly see its colour, typography, and spacing — no DevTools, no guessing. 🎨 COLOUR — Always Free • Click any element to capture its colour • HEX, RGB and HSL values with one-click copy • 10-step shade scale (50→900) generated instantly • Colour history and complementary palette 🔤 TYPE — Full Suite • Font family, weight, size, line-height and letter-spacing • 8-step type scale visualised as bars • Secondary font pairing suggestion 📐 SPACE — Full Suite • Full CSS box model: margin, border, padding, content • Width, height, border-radius and gap values • Inspect multiple elements and compare 📦 EXPORT — Full Suite • Export design tokens to CSS Variables, Tailwind config, JSON or Figma • Copy-paste ready :root {} block • One click — zero friction 💷 PRICING • Colour: Free forever — no account needed • Full Suite (Type + Space + Export): £2.99/month or £22/year • Cancel anytime. No credit card required for the free tier. Built for designers who inspect, developers who build, and anyone who's ever wondered "what font is that?"