Design guides

Short, practical answers to the questions behind the tools — each one ends with a way to do the thing you just read about.

What is a mesh gradient? The soft, multi-point color blend behind half of modern web design — explained. · 4 min How to use an SVG background in CSS External file, data URI, or inline markup — when each one is right. · 5 min Favicon sizes explained Six files cover every browser, tab, and home screen. Here they are. · 4 min ICO vs PNG favicons One is a container, one is an image — and yes, you still want both. · 3 min QR codes that scan from print Size, error correction, and quiet zones — the three things that decide a scan. · 4 min WCAG contrast ratios explained 4.5:1, 3:1, 7:1 — what the numbers measure and which one you need. · 5 min SVG vs PNG: which one do you want? Vector scales, raster snapshots — pick by content, not habit. · 4 min Soft UI that stays accessible The two-shadow look, minus the usability failures. · 4 min

Which one you need

These fall into three groups. Two are about generating a background and are worth reading before you open the studio: what a mesh gradient actually is explains why the result looks nothing like a linear gradient and why four colour stops behave differently from two, and using an SVG background in CSS covers the three correct ways to get one onto a page — data URI, external file, or inline markup — and the trade-off each makes between caching, file size and being able to restyle it later.

Three are format decisions, which is where most time gets wasted. SVG vs PNG is the general case: vector for anything with flat shapes and text, raster for anything photographic. Favicon sizes and ICO vs PNG narrow that to the browser tab, where the honest answer is smaller than most checklists claim — you need far fewer files than a 2015 blog post will tell you, and one of them still has to be a .ico for reasons that are historical rather than technical.

The last two are about things that fail in the real world rather than on your screen. QR code print sizes and error correction exists because a code that scans on a monitor can be unscannable at business-card size, and the fix is a ratio you can calculate before you print rather than after. WCAG contrast ratios explains what 4.5:1 means and why AA and AAA are different targets, and accessible neumorphism applies it to the one style that fights accessibility hardest — soft UI depends on low contrast, which is precisely what the standard is measuring.

Why these are short

Each guide answers one question and ends with the tool that does the thing. There is no introduction explaining what a colour is, no history section, and no padding to hit a word count — if you arrived from a search for a favicon size, you should have the number and be gone in two minutes. Every one is free to read, none require an account, and the tools they link to run entirely in your browser.