Ask this question anywhere and the same list comes back: clarity, consistency, visual hierarchy, whitespace, accessibility.
None of it is wrong. It's also impossible to fail. Nobody sets out to build an unclear page, and nobody looks at their own layout and decides the hierarchy is off. If you can't tell whether you're breaking a rule, it isn't doing any work for you.
A rule is worth the word golden when it tells you what to do at the moment two options both look fine. Here are five that do, with the point where you'd know you'd broken each one.
The real content decides the layout
Most layouts get designed against text somebody typed to fit. The testimonial is two tidy lines. The nav has five items. Every account in the mockup has a profile photo.
Then the site ships. The real testimonial runs to a paragraph and a half, because that's how customers write. Marketing adds a sixth nav item in week two, and the German labels run about a third longer than the English ones. Most people never uploaded a photo, so the card shows a grey circle with a letter in it.
The layout didn't fail. It was signed off against content that will never exist again.
Design against the worst real content you have, not the best content you can type.
Pull the longest customer name in the database. Use the review that rambles. Look at the account with nothing in it yet. If the design only holds on the tidy version it doesn't hold, and the first person to find that out won't be you. This is the argument for working on the running site, where the content and the states are already the real ones.
Every page has one job
Hierarchy is the rule everyone agrees with and nobody can check. A version you can check: name the single thing a visitor should do on this page. Everything else either helps them do it or is in the way.
A pricing page's job is picking a plan. If the newsletter box carries the same visual weight as the plan buttons, the page is arguing with itself. A docs page's job is answering the question somebody arrived with, which is why a signup banner above the answer costs more than it earns.
There's only ever one thing the eye lands on first. Give three elements the same weight and you don't get three times the attention. You just stop being the one who chooses.
The test takes two seconds. Look away from the page, look back, and notice what you saw first. If that isn't the job of the page, the hierarchy has been decided already, and not by you.
Design for the widths you didn't choose
Everyone designs at 1440 and checks at 390. The trouble is at 900.
That's the width where the nav has room for five items but not six, so the last one drops onto a second line behind the logo. A three column grid becomes two and leaves one card alone at the bottom. A heading that fits on one line everywhere else takes three, and pushes the button under the fold.
The presets are the widths you already checked. The layout breaks between them.
So don't check two sizes and call it responsive. Drag through the range and watch the page move. In Pixy that's the edge of the frame: pull it and your site's own CSS reflows through its own breakpoints, live, because it's your page rather than a picture of one. The device presets are there too, and the useful part is the travel between them.
The other half of this rule is where the fix lands. A change you make at 390 belongs to the phone layout and not to the whole site, so every edit carries the width it was made at.
Speed is part of the design
A page that arrives late is a worse page than one that arrives. That isn't an engineering note bolted on afterwards. It's a decision you make while designing, usually without noticing you made it.
The hero photograph that looks rich at 2.4 megabytes is a design choice. So is the font that lands half a second in and shoves every paragraph down a line, and the carousel that holds up the first paint of anything.
Nobody sees your typography while the font is still loading. They see the fallback, or they see nothing, and some of them leave during it.
Treat weight as a constraint you design inside, the way you treat the width of a column. Ask what an image costs before you fall in love with it. Holding the layout still while the page loads is design work, and it almost never gets credited as design work, which is roughly why it doesn't get done.
Change the rule, not the element
The first button is easy. The ninth one decides what your site looks like in a year.
Somebody needs slightly more padding on one page. The quick fix is a one off, and it works. Do that for a year and you have four blues, three border radii and a spacing scale nobody can name.
A site doesn't turn inconsistent in a redesign. It drifts, one exception at a time.
So when you fix something, decide whether the fix belongs to this element or to everything that matches it. If it belongs to everything, edit the rule and let every match move. That decision costs ten seconds now. Undoing a year of one offs costs a redesign.
It's why Pixy edits the CSS rule your element already matches instead of stamping a value onto that one element. Change the rule and every match updates, which is how your stylesheet works anyway.
Where all five actually break
Two of these have nothing to do with tools. One job per page is a decision, and page weight is a habit. You can hold both on any stack, in any editor, starting today.
The other three break in the same place, which is the distance between where the design gets made and where the site runs. Placeholder content is only convincing in a file. The awkward widths exist in a browser and nowhere else, and the rule you should have edited lives in a stylesheet the design tool never opened.
Close that distance and the rules mostly keep themselves. You're looking at the real content because it's the real page, at real widths, with the rule sitting under the element you're pushing around. What your developer or your agent gets is the change itself, in the terms your codebase already uses.
Start with the page you'd rather not show anyone. Open it from your projects, press ⌘⇧E, and take it through the five in order.
Put the five rules against a real page.
Try them on this one, or bring in the page you'd rather not show anyone.