Design writing that doesn't stop at the basics.

Criticism, inspiration, and working tools, from the CSS Grid Architect for laying out a page to the Performance Budget Calculator for setting a page-weight budget, built for designers past the basics who want the next stage explained properly.

Generate a token set with the CSS Variable Architect Check a palette with True-Contrast Smart Palette

What ends up in the feed, and why

A new variable font ships from an independent foundry on a Monday, a studio in Leeds posts a rebrand case study on Wednesday, and a routine plugin update quietly changes how auto-layout behaves by Friday. None of those things belongs to the same category, but a working designer's week rarely arrives sorted into one. The feed is built around that overlap.

What actually lands here

Most entries fall into a handful of recognisable types: a studio releasing new work, a tool shipping an update worth knowing about, a small technical note on something like variable fonts, container queries or design tokens, and the occasional opinion piece on a decision the industry has made without much debate. A rebrand gets covered because of what it changes about how a brand reads at small sizes. The same goes for a tool: an update earns space here when it changes a workflow. If a technical note on tokens leaves you wanting to see the idea working, the CSS Variable Architect generates a root-level custom property block from a handful of base values, colours, a spacing unit, a corner radius, and shows a live preview card built from those tokens as you adjust them. It's a small tool and it can get a value wrong for your particular use case, so treat the output as a starting point to check against your own system.

That tool doesn't tell you whether the colours it generates actually read well against each other, which is a separate question. The True-Contrast Smart Palette takes a foreground and background colour and returns the contrast ratio to two decimal places, along with pass or fail badges for the WCAG accessibility (a11y) thresholds of 4.5:1 and 7:1. Where a pairing fails, it offers a fix for each level that holds the original hue and saturation steady and adjusts only the lightness. When no shade of that hue can actually reach the target against the given background, it says so plainly and falls back to plain black or white. Like the token generator, it's a calculation rather than a design judgement, and it can still hand you a technically-passing colour that doesn't suit the rest of your palette, so it's worth checking the result against the work rather than taking the badge as the last word.

A technical note on grid systems tends to raise the same problem: it's one thing to read that fr units distribute the space left over after gaps, another to see a layout actually hold together at a given column and row count. Use the CSS Grid Architect to see how this applies to your situation. Set the columns, rows and gap and the tool draws a live preview built from exactly the same grid-template values as the CSS it generates, so what you see and what you copy can't drift apart. It's still a generator. A grid that's structurally sound can still be the wrong shape for the content you're putting into it.

A note on interaction design or motion tends to hit the same wall: reading that a custom easing curve changes how a transition feels is one thing, watching it happen is another. The Cubic Bezier Architect lets you drag two control handles on a graph and watch a preview element move along that exact curve, with the four control-point numbers editable alongside the handles so a curve copied from elsewhere in a project can be pasted in and checked. The horizontal axis is capped between 0 and 1, because time only runs forward, while the vertical axis is left open, which is what lets a spring curve overshoot before it settles. It's a way of feeling out a decision, and it can still return a curve that looks lively on that one preview element and wrong once it's applied to the interface it was meant for.

A feed item on a slow-loading redesign tends to raise a similar gap: it's one thing to read that a page missed its load-time target, another to see what the budget for that target should have looked like before a single asset shipped. The Performance Budget Calculator works the load-time formula backwards. Pick a network, Slow 3G at 1.6 Mbps with 150ms round-trip latency, Regular 4G at 9 Mbps with 50ms, or Fast 4G/Wi-Fi at 25 Mbps with 20ms, set a target load time on a slider, and split the remaining budget across JavaScript, images and CSS with fonts using three percentage sliders. The result is built from the formula it shows on the page, time equals latency plus size divided by bandwidth, with roughly 15 percent reserved for HTTP and TCP overhead disclosed alongside the maths. On a slow enough connection, latency alone can already use up the whole target, and the tool says so directly. It also flags a JavaScript allocation once it passes roughly 150KB, because a kilobyte of JavaScript costs more CPU time to parse and run than a kilobyte of image data. The three sliders don't need to add up to 100, so it shows the normalised share next to each raw value, and setting all three to zero brings up a message. It's a calculation from the numbers you feed it. A technically sound budget can still be spent on the wrong things.

How it's ordered

Newest first, plainly. There's no scoring system deciding what a reader "should" see above something else, because that kind of ranking tends to reward whatever performs well. If a story sits at the top, it's because it happened recently.

Where things go once they've grown

Some stories start as a quick feed item and turn into something longer once there's a genuine argument to make. Sustained critical writing on a rebrand or a systemic industry shift moves to Criticism & Commentary, where there's room to hold a position across a few thousand words. Work that's better shown than argued over sits in Inspiration Showcases instead. And if a piece leans on a term that isn't part of everyday vocabulary, the Design Glossary is where that gets unpacked properly.

None of this is meant to make the feed feel tidier than a real working week is. It's ordered enough to find things again, and loose enough to put a font release next to a piece of design criticism without pretending they're the same kind of story.

The tools are where the ideas get tested

Read the articles for the thinking behind the decisions, then use the tools below to see how that thinking holds up on your own project. If the question is how a layout actually divides up the space, the CSS Grid Architect lets you set the columns, rows and gap and watch a numbered preview update to match, using the same grid-template values as the CSS it hands you. The Cubic Bezier Architect lets you drag two control handles on a graph and watch a preview move on that exact curve, then read off and copy the cubic-bezier value for your own CSS. If the question is what a load-time target actually costs in kilobytes, the Performance Budget Calculator works the formula backwards: pick a connection speed, set a target time, split the budget across JavaScript, images and fonts, and it shows what each slice can weigh, on the understanding that the number only holds if your build matches the assumptions you fed it.