CSS Variable Architect
An interactive CSS Variable Architect, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Open toolTools for the parts of design that are arithmetic
A CSS unit converter, an aspect ratio calculator, a contrast checker, a grid generator, a specificity calculator, a cubic bezier easing editor, a variable naming tool, a focus ring generator, a performance budget calculator and a SERP snippet previewer, each answering one question quickly. Feed any of them wrong numbers and you'll get a wrong answer.
Name your design tokens with the CSS Variable Architect Check a palette's contrast in the True-Contrast Smart PaletteSmall tools for the sums good design work needs
These are small, single-purpose tools for the arithmetic and conversions that turn up in ordinary design work, from checking grid columns to working out a page-weight budget before a build starts.
True-Contrast Smart Palette
An interactive True-Contrast Smart Palette, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Open tool
CSS Unit Converter (px / rem / em / vw / vh)
An interactive CSS Unit Converter (px / rem / em / vw / vh), free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Open tool
Aspect Ratio Calculator
An interactive Aspect Ratio Calculator, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Open tool
CSS Grid Architect
An interactive CSS Grid Architect, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Open tool
CSS Specificity Calculator
An interactive CSS Specificity Calculator, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Open toolBrowse the full set of tools, including the Focus Ring Architect for accessible focus states and the Performance Budget Calculator for page-weight limits, to find what fits your work.
Two tools built for the work you're already doing
Both are free to use, and both can produce a wrong or misleading result. Treat what they give you as a starting point, not a final answer, and check it against the screen in front of you. If you're blocking out a layout at the same time, the CSS Grid Architect works the same way, with sliders for columns, rows and gap, a live preview, and copyable code, so check that against the browser too. If a style you expect to apply isn't showing up, the CSS Specificity Calculator breaks a selector's score down by ID, class and element, and sets two selectors side by side so you can see which one is actually winning the cascade. If you're making sure a focused element is actually visible to someone tabbing through with a keyboard, the Focus Ring Architect builds a double-layer focus ring, a transparent outline paired with a box-shadow, so the indicator survives Windows High Contrast Mode. Set the ring colour, gap, width and glow with sliders that give a live px readout, and it hands back the :focus-visible CSS along with two preview buttons, one on a light surface and one on a dark one, so you can tab to each and see the real ring. And if it's motion rather than layout you're wrestling with, the Cubic Bezier Architect lets you drag a curve's handles on a graph, watch a preview animate with that exact easing, and read off the four values it lands on, so you're copying a curve rather than guessing one. If you're about to publish and want to see how the page will actually read in a results list, the SERP Snippet Previewer renders the title, meta description and URL the way Google shows them on desktop and mobile, flags where either will get cut off, and runs entirely in your browser, so it's worth a look before the copy goes live too. And if the question is how much JavaScript, image weight or CSS and fonts a page can actually carry before it misses a load-time target, the Performance Budget Calculator works the formula backwards: pick a connection speed, set the load time you're aiming for, split the budget across those three categories, and it hands back the KB limits for each, along with a warning if your JavaScript allowance runs past the point where it starts costing more processing time than the same weight in images.