Design Foundations: Judging What AI Gives You

AI can make a hundred layouts. It cannot reliably tell you which one is good. If you cannot see the difference between a polished page and one that is merely believable, you will ship believable. This lesson gives you the working words of visual design: hierarchy, spacing, type, color and consistency. You can use them at once, and as a checklist for judging what AI makes.

Hierarchy: guide the eye

Every screen should have an obvious first thing to look at, then a second, then a third. You build hierarchy with size, weight, color contrast, spacing and position. If everything is bold and everything is big, nothing stands out. A quick test: squint at the page, or blur a screenshot. The most important element should still show. The main button should be the most eye-catching thing you can click.

Spacing and layout

• Use a spacing scale, such as multiples of 4 or 8 pixels, and nothing else. Random gaps are the quickest sign of an amateur page.
• Put related things closer together than unrelated things. Spacing shows structure.
• Use a steady grid and alignment. Line things up to a few strong edges. Do not center everything.
• White space is not wasted space. Generous padding makes content feel premium and easy to read.
• Keep lines of body text to about 45 to 75 characters.

Type

• Use at most two typefaces. One is often enough. Contrast comes from size and weight.
• Define a type scale, for example 14, 16, 20, 24, 32, 48 and 64, and stick to it.
• Body text should be at least 16 pixels with a line height of about 1.5. Headings are tighter, at about 1.1 to 1.25.
• Do not use thin, light grey text on white for anything important.

Color and contrast

Pick one main brand color, one accent color and a scale of neutrals. A useful mix is about 60 percent neutrals, 30 percent a second color and 10 percent accent for calls to action. Contrast is a matter of usability, and in many places of law. It is not a matter of taste. The WCAG AA standard asks for a contrast ratio of at least 4.5 to 1 for normal text, and 3 to 1 for large text and parts of the interface. Test every text and background pair with a contrast checker. Pay special attention to text on images and on buttons.

:root {
  /* color */
  --bg: #0b0d12;  --surface: #151923;  --text: #e8ebf2;  --muted: #a3acbf;
  --brand: #4f5bdc;  --brand-contrast: #ffffff;  --accent: #f2c14e;
  /* type */
  --font-sans: "Inter", system-ui, sans-serif;
  --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.563rem; --step-3: 1.953rem; --step-4: 2.441rem; --step-5: 3.052rem;
  /* space (4px base) */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
  /* shape + motion */
  --radius: 12px;  --shadow: 0 8px 30px rgb(0 0 0 / .25);  --ease: cubic-bezier(.2,.7,.2,1);  --dur: 180ms;
}
/* Giving AI a token file and saying "use only these tokens" is the single best consistency trick. */

Spotting generic AI design

• A purple-to-blue gradient hero with a floating blurred blob and centered text. It is everywhere, so nobody remembers it.
• Three identical feature cards with icons and vague words, like Powerful. Flexible. Secure.
• Everything is centered. There is no strong left edge and no visual rhythm.
• Corner shapes, shadows and spacing that differ from section to section, because each was made separately.
• Stock-photo smiles and filler copy that could belong to any company.
• The cure: specific content, a distinctive but restrained palette, one memorable layout idea and consistent tokens.

A 10-point design critique checklist

• Is the main action obvious within 3 seconds?
• Is there a clear visual hierarchy on each screen?
• Does the spacing come from one consistent scale?
• Is body text comfortable to read in size, line height and line length?
• Do all text and background pairs pass the contrast test?
• Are there at most two typefaces and a limited set of sizes?
• Do repeated elements, like buttons and cards, look the same everywhere?
• Does it work, and look planned, at 375 pixels wide?
• Is the copy specific to this business?
• Is anything decorative that does not help?