Spacing, color, and hierarchy.

Put two dashboards side by side. Same framework, same components, same data. One reads as a product; the other reads as a prototype that escaped. The difference is rarely talent and almost never effort. It is three systems the designed one obeys and the default one improvises: a spacing scale, a color budget, and a deliberate hierarchy. All three are learnable in an afternoon, all three compound, and together they are the fastest visible upgrade an engineer can make to anything they ship. This post opens our series on design taste for engineers; deconstructing great interfaces teaches you to see these systems in products you admire, and typography for engineers covers the fourth fundamental, which earns its own post.

Spacing: pick a scale, then obey it

Default interfaces are not under-spaced; they are arbitrarily spaced. A 14px margin here, 20px there, 11px where a border nudged something. Each value was locally reasonable, and the sum reads as noise, because the eye is a ruthless statistician: it cannot name the inconsistency, but it registers that no decision connects one gap to the next.

The fix is a scale. Eight pixels is the industry base for good reasons: it divides cleanly on 1x and 2x screens, it is the grid unit under Material and most shipped design systems, and it is coarse enough to make your choices for you. A working scale is eight values, with 4px and 12px admitted as half-steps for tight pairs:

:root{
  --s-1:  4px;   /* icon to its label */
  --s-2:  8px;   /* inside a control */
  --s-3: 12px;   /* label to its field */
  --s-4: 16px;   /* between controls */
  --s-6: 24px;   /* card padding, between groups */
  --s-8: 32px;   /* between blocks in a section */
  --s-12: 48px;  /* between page sections */
  --s-16: 64px;  /* around a page title */
}

.card        { padding: var(--s-6); }
.card h3     { margin: 0 0 var(--s-2); }
.field + .field   { margin-top: var(--s-4); }
section + section { margin-top: var(--s-12); }

Two principles do the design work once the scale exists. First, consistency beats cleverness. When a gap looks slightly off, the tasteful move is not a bespoke 14px; it is the nearest step on the scale, applied everywhere that relationship appears. Designers polish by exception; engineers win by policy, and the eye rewards the policy. Second, spacing is information. Proximity is grouping: elements inside a group sit closer together than the gap that separates groups, and the ratio should be obvious, not subtle. A label 4px from its field and 16px from the next field needs no border, no background, no divider. Most boxes on default interfaces are apologies for spacing that failed to communicate.

Then be generous at the top. The single most common engineer tell is a page title crowding the content below it. White space is not wasted space; it is the price of hierarchy, and the elements highest in the hierarchy pay the most. Double the space you first typed around a heading and it will look designed before you touch anything else.

Color: one accent, neutrals with a temperature

Color is where restraint is most visible. Shipped products that look expensive usually run on a shockingly small budget: one accent, a family of neutrals, and two or three semantic colors that only ever mean states. The default interface, by contrast, leaks color everywhere: a blue primary button, a teal link, a purple chart, an indigo badge, each chosen alone, each fighting the others for a viewer's attention.

The discipline is easiest in HSL, because HSL makes the system legible: hue is the identity, saturation is the intensity, lightness is the ramp. Declare the hue once and derive everything from it.

:root{
  --hue: 222;                             /* the one identity decision */

  /* neutrals carry the temperature: never 0% saturation */
  --bg:       hsl(var(--hue) 20% 98%);
  --border:   hsl(var(--hue) 14% 88%);
  --text-dim: hsl(var(--hue) 10% 40%);
  --text:     hsl(var(--hue) 30% 13%);

  /* one accent, three jobs */
  --accent:       hsl(var(--hue) 85% 50%);
  --accent-hover: hsl(var(--hue) 85% 42%);
  --accent-soft:  hsl(var(--hue) 85% 50% / .12);

  /* semantic colors are states, not decoration */
  --danger:  hsl(4 72% 48%);
  --success: hsl(152 55% 36%);
}

Three rules turn that file into taste. Neutrals get a temperature. Pure gray, saturation zero, reads as lifeless next to any color it shares a screen with. Tint every neutral a few points toward your hue: backgrounds 10 to 20% saturation because they are so light the tint stays a whisper, text 10 to 30% because darkness eats saturation. The interface will not look blue; it will look intentional, and nobody will be able to say why. The accent is a budget, not a theme. Spend it only on what acts or what matters most: the primary button, links, the one number the screen exists to show. The moment two unrelated elements share the accent, it stops meaning anything. If everything is highlighted, nothing is. Contrast is not negotiable. Body text needs 4.5:1 against its background, large text 3:1; your browser devtools show the ratio on any color picker, and WebAIM's checker settles disputes. Dimmed text is the tasteful way to demote content, and the accessibility floor is where dimming stops.

One more habit separates the disciplined from the defaulted: when you need a lighter or darker version of any color, move lightness, keep hue, and nudge saturation up as you approach either extreme so the color does not wash out. Never reach for a new hex code when a ramp step exists. The palette stays one family, and one family is what cohesion looks like.

Hierarchy: four levers, one focal point

Hierarchy is the answer to the only question a viewer brings to a screen: what should I look at first? Default interfaces answer “everything”, which is the same as “nothing”. Designed interfaces answer with one focal point per screen, a clear second tier, and everything else quiet. You have exactly four levers to say it with:

The levers multiply. A metric card works with the value large, dark, and bold, its label small, dimmed, and regular: three levers agreeing, and the eye lands where the design decided. When levers disagree, a huge but dim heading, a bold but buried action, the viewer feels the argument without being able to name it.

The engineer's mistake is treating hierarchy as promotion: something matters, so make it bigger, bolder, redder. Screens fill up that way, and every promotion devalues the last. The designer's move is demotion: keep the signal where it is and quiet everything around it. Dim the metadata, shrink the labels, drop borders that duplicate what spacing already says. Great hierarchy is mostly subtraction.

The test costs nothing: squint at the screen, or step back two meters. Layout and contrast survive squinting; detail does not. If the blur shows one clear focal point and an obvious reading order, the hierarchy works. If it shows uniform texture, no amount of polish at full resolution will save it.

Put the system in variables

None of this survives contact with the next feature unless it lives in one place. The pattern is a single tokens block, and one rule for everything downstream: component files never contain a raw pixel value or a hex code. Every margin references the spacing scale, every color references the palette. The moment a bare 13px or #7a8ff2 appears in a component, the system has a leak, and leaks spread.

/* tokens.css: the entire design surface of the product */
:root{
  /* spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-6:24px; --s-8:32px; --s-12:48px; --s-16:64px;

  /* color */
  --hue:222;
  --bg:hsl(var(--hue) 20% 98%);   --border:hsl(var(--hue) 14% 88%);
  --text:hsl(var(--hue) 30% 13%); --text-dim:hsl(var(--hue) 10% 40%);
  --accent:hsl(var(--hue) 85% 50%);
  --accent-soft:hsl(var(--hue) 85% 50% / .12);

  /* hierarchy */
  --fs-hero:32px; --fs-title:20px; --fs-body:15px; --fs-label:12px;
}

This is the smallest useful design system: perhaps twenty lines, and it changes how you build. Decisions happen once, in the tokens file, where they can be compared and argued about. Components become assemblies of decisions already made, which is precisely how engineers already think about everything else they ship. Retheming becomes an edit to one file; try changing --hue and watching an entire product shift temperature in one keystroke.

The fifteen-minute audit

Take a screen you shipped and run the three systems over it in order:

1. Spacing: snap every margin and padding to the nearest step on the scale. Double the space around the title. Delete any border or background whose only job is separating things that spacing now separates.
2. Color: count your colors. Collapse everything that is not an accent or a state into one tinted neutral ramp. Check body-text contrast and fix anything under 4.5:1.
3. Hierarchy: pick the one thing the screen exists to show. Give it two levers. Demote everything else one step: dimmer, smaller, or plainer.

The result will not win awards, and it does not need to. It will read as designed, which is the threshold that changes how users, teammates, and investors weigh everything else you built. From here, the series goes deeper: typography, motion and microinteractions, and the slides you present with. The resources page collects the books, tools, and references the whole series draws on, including Refactoring UI, the book closest in spirit to this post.