Taste Pass

A screen can pass every rule and still feel off. Every group sits in its own box, the text starts in five slightly different places, and two buttons shout at once. No lint fails it. A designer spots it in a few seconds, with three habits.

Before you call a screen done, squint at it, count its boxes and edges, and find the one thing it leads with.

Both versions show the same plan, the same numbers and the same two actions. Turn on each lens, then switch versions. The counts and the outlines come from critly taste, measured live on the screen above.

Squint

Painters squint to lose the detail and see the big shapes. On a screen, blurring does the same. Blur a screenshot until you can't read the body text: 6px is enough at desktop size, and Nielsen Norman Group blurs at 5 and 10. What's left is roughly what people take in first, since we see the coarse layout before the details.

Ask two questions of the blurred screen. Do the groups still read as groups? And is the darkest or most colorful shape the thing that matters? In the draft, the boxes turn into stacked outlines and the two buttons are the same dark weight. After the pass, one shape is left.

Count the boxes

Every border, ring, shadow and tinted background draws one more edge. Count them, and count how deep they nest. A box in a box in a box is the usual mistake: each component brought its own frame, and nobody took any away.

Group with space first, then with one background tone, and keep lines for where space can't do it. That is what whitespace and shadows, not borders are about. There's no right number of boxes. Compare before and after: fewer is calmer. In a study of 450 sites seen for half a second, the number of regions was the best predictor of how busy a page looked, and busy pages were liked less.

Count the edges

Then count where things start. Each distinct left edge is a line the eye has to find. Near misses come first: two edges 2 to 8px apart look like a mistake, because they usually are. The draft insets its buttons 4px past the text above them. See alignment for lining things up.

Find the one thing

Say in a few words what the screen is for. Then check that it's the heaviest shape when you squint. If two things weigh about the same, nothing leads, and the fix is to quiet one, not to make the other louder (see visual hierarchy). Buttons follow the same rule: one solid button per area, as Atlassian puts it, and at most one or two per view, as Apple does.

Run it on the real screen

critly taste opens each page at phone and desktop width and runs the pass on the first screen. For each screen it writes a squint image and an overlay with the boxes, edges and lead marked, then lists what to look at. Each finding links the concept behind it.

Terminalapp.js

TerminalBrowser tool

npx @kausthubh/critly taste http://localhost:3000

// Paste taste.js from @kausthubh/critly (or the critly-audit skill), then:
const report = await window.__critlyTaste();
window.__critlyTaste.overlay(report); // boxes, edges and lead on the page
window.__critlyTaste.squint(true);    // blur the page for your own screenshot

http://localhost:3000/settings/billing · 1440x900

  squint  .critly/taste/settings-billing-1440.squint.png
  lead    button "Add seats" leads, only just, 1.44× over button "Upgrade plan"
  boxes   4 (4 border), 0 divider lines, nested 3 deep
  edges   6 left edges (3 for text), 1 near miss
  overlay .critly/taste/settings-billing-1440.taste.png
  look    2 solid buttons in one group (button "Add seats", button "Upgrade plan"). Keep the one that does the main job solid, and make the others secondary or plain.
          https://critly.vercel.app/visual-hierarchy
  look    A box in a box in a box (3 deep): section.panel > div.card > div.row. Let the inner group sit on its parent's surface and separate it with space.
          https://critly.vercel.app/whitespace

critly taste: 5 things to look at · 2 screens · images in .critly/taste · exit 0

It never fails a page. The check fails what can be measured as wrong; the taste pass points your eyes at what needs judging. Its numbers are starting points. One solid button per area and the 6px blur come from the sources below. The rest are ours: a lead under 1.2× its runner-up counts as a tie, under 1.5× as weak, and edges 2 to 8px apart as a near miss.

What it can't tell you

It can find the heaviest shape, but not whether that's the right one. That depends on what the screen is for, which only you and the people using it know. It also sees one screen in one state, so open the menu, fill the form and run it again. Then look at the images yourself. Taste gets better with reps, and this is one.