The Hierarchy Matrix

Scale is relative. A 24px headline is only big if the body text is 12px. The professional standard is a strict multiplier (like 1.618 Golden Ratio or a 2x/3x system) rather than eyeballing.

The Canva Way: Drag the corner of the text box until it "looks big."
The Photoshop Way: Define strict Type Styles (H1, H2, Body) in the Character panel to ensure mathematical scale consistency across the document.

Warm, saturated colors advance; cool, desaturated colors recede. Value (lightness/darkness) trumps Hue (red/blue).

The Canva Way: Pick a bright color from the palette for the button.
The Photoshop Way: Use an Adjustment Layer set to 'Luminosity' to check grayscale values, ensuring the button still holds the highest contrast ratio even without color.

Using more than 2 font families usually creates clutter. Professionals use 1 font family with many weights (Light, Regular, Bold, Black) to establish hierarchy through thickness, not style.

The Pro Tip: Use ALL CAPS and wide tracking (letter-spacing) for tiny overline text (subheadings) to give it structure without adding weight.

Amateur designers fill space; professionals protect it. Whitespace acts as an amplifier. An element surrounded by emptiness is perceived as highly important, regardless of its size.

The gap between different groups must be visibly larger than the gap between items inside a group. If all spacing is equal, the brain cannot parse relationships.

A ragged edge creates cognitive load. Centered text forces the eye to hunt for the start of the next line. Left-aligned text provides a hard, predictable anchor for the saccadic jump.

When styles repeat, the brain learns them. If all H2 headers are blue and bold, the user instantly recognizes a new section. Breaking this repetition immediately creates a strong focal point.

Adding a drop shadow (elevation) pulls an element forward on the Z-axis. Flat design relies solely on X/Y coordinates; texture brings the Z-axis into the hierarchy equation.

Leading lines and directional cues (like a person in a photo looking at a button) override size. Humans are biologically wired to follow the gaze of others.

The focal point is the element that scores highest when all 9 previous techniques are combined. It has the most size, the sharpest contrast, the deepest isolation, and sits at the intersection of the grid.

Start from the job, not the number. For dense, text-heavy interfaces a small ratio (1.2 minor third or 1.25 major third) keeps the steps close so long pages stay calm. For expressive, sparse landing pages a larger ratio (1.5 or the 1.618 golden ratio) gives dramatic jumps between a giant headline and small body. Set your body size first (often 16px), then let the ratio generate the rest — and never use more than four or five steps, or the scale stops feeling like a system.

Break it deliberately, never accidentally. A grid earns its power by being kept — which is exactly why a single element that bleeds past a column, or breaks the established alignment, becomes an instant focal point. The rule of thumb: establish the grid rigorously across the whole layout, then break it once, for the one thing that matters most. Break it twice and you no longer have a grid; you have noise.

One family with a full weight range is the safe default and will never clash, because every weight was drawn to sit together. Reach for a second family only when you want a deliberate contrast of character — a distinctive display face for headlines paired with a neutral, highly legible face for body. The test is whether the two fonts are different enough to look intentional yet harmonious enough to look related. If they are merely similar, you get an accident, not a pairing; cap it at two.

No — decoration adds a shadow because it looks nice; elevation uses shadow as a ranking system. In a real design system every surface has a defined height: the page is flat at zero, cards lift a little, menus and dialogs lift more, and the active modal sits highest of all. The shadow is just the visible signal of that order. Read this way, elevation answers a hierarchy question — "what is in front of what?" — rather than simply prettifying a box.

Yes — arguably more. The system does not change; you simply use smaller steps from the same scale, leaning on 8 and 16 where a desktop layout might use 24 and 32. Because 8 divides cleanly for retina and half-density screens, the spacing stays crisp at every pixel ratio. What shifts on mobile is not the unit but the priorities around it: tap targets need a comfortable minimum (around 44–48px), and whitespace matters even more because there is so little room to spare.