Distill

Distill any image into design tokens — color, type, spacing. Right-click or upload.

Distill turns any image into a production-ready design token set. Right-click a logo, a photo, a mood board, or a screenshot on any page, or upload one from the extension popup. Distill reads its colors, typographic mood, and spatial rhythm, and generates a complete token set in seconds. WHAT YOU GET • 5–7 color tokens with clear role names (primary, secondary, accent, background, surface, text) • Typography suggestions (display + body pairing, real Google Fonts, based on visual mood) • A spacing scale and corner radius set derived from the image's shapes • A one-sentence "mood" summary of the image's visual personality EXPORT HOWEVER YOU WORK • JSON • Tailwind config • Style Dictionary • A designed, shareable PDF token sheet, one click, ready to send to a client or teammate 📢 Coming soon: Use Figma plugin or use the extension individually so you can have a headstart in your design. WHO IT'S FOR • Freelance and agency designers starting a project from a mood board or brand photo • Frontend developers who need a working Tailwind config with no designer or design file on hand • Indie hackers and founders turning a reference image into a coherent starting palette • Marketing and brand teams pulling a quick token set from a photo or competitor page Distill's output is an AI-generated interpretation of an image, a strong starting point, not a single "correct" answer. Typography and mood are inferred, not detected facts. Always review before shipping. PRICING • Free: 2 extractions per week, no account needed • Credit pack: $9 for 10 extractions, no expiry • Unlimited: $12/month or $99/year Full details: https://distill.website