Free tools - no signup
Design Tools
Seven things we built because we needed them on real projects and got tired of tabbing out to a site that wanted an email address first. Everything below runs in your browser. Nothing you type gets uploaded.
-
WCAG Contrast Checker
Live contrast ratio for any text and background pair, with AA and AAA badges for normal text, large text, and UI components.
Reach for it when: you inherited an interface and need to know which of its greys actually fail.
-
Type Scale Calculator
Modular type scale from a base size and ratio, previewed at real sizes and exported as copy-ready px and rem CSS.
Reach for it when: you are opening a blank file and every later spacing decision depends on the text sizes.
-
Color Palette Generator
Build a UI scheme on a live interface preview, check WCAG contrast on every pairing, and copy out OKLCH values plus CSS variables.
Reach for it when: a brand color has to become a working set of surfaces, text tones, and states.
-
Spacing Scale Generator
Consistent px and rem spacing steps from a base unit and multiplier, output as design-token CSS variables.
Reach for it when: padding values in your components have drifted into 13px, 14px, and 15px.
-
CSS clamp() Preview
Generates a CSS clamp() declaration from min and max sizes and sweeps it across viewport widths so you can see where it breaks.
Reach for it when: fluid type looks right at 1440px and 375px and you have not checked anything in between.
-
Dashboard Grid Generator
Pick an app type and data density, get a live 12-column CSS Grid dashboard layout and copy the grid code out.
Reach for it when: you need a defensible starting layout for an admin or analytics screen.
-
Styleframe Brief Template
Free four-page A4 PDF brief with eight sections that turn a vague creative request into a signed-off styleframe project.
Reach for it when: a client says they want something modern and you need that pinned down before you design.
How these fit together
They are not seven unrelated widgets. Pick a base size and ratio in the type scale calculator, feed the resulting rhythm into the spacing scale generator so your padding steps line up with your line heights, then run every text and surface pairing through the contrast checker before any of it reaches a component. That order matters, because retrofitting contrast onto a finished palette is how you end up with a design system full of exceptions.
The clamp preview and the grid generator sit one layer down, at the point where the design becomes CSS. Both exist because the failure mode is invisible in a static mockup: an aggressive clamp minimum looks fine at the two viewport widths you happened to check and collapses at 480px, and a twelve-column grid reads perfectly in Figma until the sidebar eats three columns on a laptop.
What they will not do
None of these makes a taste decision for you. The contrast checker tells you a ratio passes; it cannot tell you the pairing looks cheap. The palette generator will happily produce a technically accessible scheme that belongs to no brand at all. Treat the numbers as a floor you have to clear, then do the actual design work on top. A tool that promises to replace that judgement is selling something.
Common questions
- Are these design tools really free?
- Yes. No sign-up, no email capture, no watermark, no paid tier holding back the useful half. The pages carry ads, and that is the whole business model. Everything else on them works the first time you land.
- Does my data get uploaded anywhere?
- No. Six of the seven run entirely client-side, so the colors, sizes and ratios you type never leave the browser tab. The brief template is a static PDF download. There is no account, so there is nothing to store.
- Which tool should I start with?
- Start with the WCAG contrast checker if you are auditing an existing interface, because failing body text is the most common and most fixable problem in shipped UI. Start with the type scale calculator if you are opening a blank file, since every other spacing decision keys off the text sizes.
- Can I use the output in commercial work?
- Yes. The values these tools produce are numbers and CSS declarations, and you own what you make with them. No attribution required, though a link back is always welcome.
- Do they work on a phone?
- They work, but two of them fight the screen. The dashboard grid generator and the clamp preview both want horizontal room to show what they are doing, so a laptop is the honest recommendation for those two. The contrast checker and the type scale calculator are fine on mobile.
Want the thinking behind the tools rather than the tools themselves? The tools category reviews what else is out there, and the design tokens guide covers how these values survive the trip into code.