Free tools - no signup
Design Tools
Twelve 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.
-
Font Fallback Metrics Calculator
size-adjust, ascent-override, descent-override and line-gap-override for a web font and its fallback, a paste-ready @font-face with local(), and the pixels of layout shift that remain.
Reach for it when: text jumps when your web font arrives and you are about to copy override numbers from someone else's snippet.
-
Stagger Calculator
Turns an element count, one animation time and a ceiling for the whole set into the delay step, with copy-ready CSS using sibling-index() and an --i fallback.
Reach for it when: a list animates in one item at a time and you need the whole thing to finish by a deadline whatever the length.
-
Reduced Motion Preview
Paste a transition or animation, watch it under no-preference and reduce side by side, and copy the swap or opt-in prefers-reduced-motion block it implies.
Reach for it when: your reduced-motion rule is a blanket override and you want to see what it deletes before you ship it.
-
Scroll Timeline Playground
scroll() and view() timelines on either axis, animation-range with the named ranges, and a timeline-scope switch that shows how the 2023 draft and the 2026 draft find a named timeline. Prints the CSS it runs.
Reach for it when: a scroll-driven bar works in your demo and you have not checked what happens to the second copy on the page.
-
Live CSS Preview
Editable live CSS playground with worked demos of easing curves, container queries and gradient meshes, re-rendering as you type.
Reach for it when: you can read the declaration but cannot picture what it does until you see it move.
-
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 twelve 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.
The font fallback calculator belongs to the same layer. It works out how a system font has to be stretched and re-spaced so the text does not jump when your web font arrives, which is invisible in a design file and shows up in the first second of every real page load.
The stagger calculator, the scroll timeline playground and the live CSS preview are the motion trio. The first turns a list length and a deadline into the delay between items. The second does the same job for scroll: it shows which timeline drives an animation, over what stretch, and which elements can see it by name. The third lets you edit any declaration and watch it move. All three exist because a number of milliseconds, or a percentage of a scroller, means little until you've seen it play.
The reduced motion preview closes the loop on animation. A transition looks finished on the machine it was built on, where the setting is off, so it shows the same rule under both settings at once and prints the block that tells them apart.
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. Eleven of the twelve 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.