On this page 5 sections
There are endless design tools online. Most are noisy, some are niche, and many are more complicated than they need to be. Colors & Fonts is different: quiet, focused and genuinely useful for the two foundations of visual design, colour and type.
It's made by Michael Andreuzza and built with Astro and Tailwind CSS, and it feels like it was made by someone who ships real products.
Colour tools that make sense
Monochrome palettes, conversions between HEX, RGB, HSL and OKLCH, and a contrast checker for accessibility. There's also a colour system generator for scalable, token-friendly palettes, which is handy for design systems and Tailwind.
Typography without the guesswork
A type scale calculator, font pairing guides for Google Fonts, a local font previewer, and a @font-face generator that outputs production-ready CSS. You can experiment without leaving the browser.
Learn from real design systems
It also collects colour systems from teams like Stripe, Atlassian, Material and Primer. Studying them shows how mature teams handle hierarchy, accessibility and tone, which is hard to pick up from a brand PDF.
Small tools, big help
Box-shadow and clip-path builders, text transformers, and a design token generator that exports CSS variables, Sass or JSON. These tools feel made by someone who lives in VS Code as much as in Figma.
Why I like it
It values usefulness over novelty. It doesn't try to do everything or hide simple tools behind complexity. It's just a reliable place to make more deliberate design decisions.
I reach for it when setting up a project's foundation styles, turning design tokens into Tailwind classes, and checking contrast during accessibility reviews. Want to see how I use tools like this in real projects? Take a look at my work.
Need something like this built?
I build custom WordPress plugins, websites and web apps. Tell me what you need.