Visual Design. Making the structure of a product visible.

Warm-up: what do you already see?

Before learning names for things, notice what your eye already does. You have looked at screens for thousands of hours, and your eye has opinions. This guide gives those opinions a vocabulary and a method.

Look at the screen below for three seconds, then look away. What did you see first? What did you see second? Could you tell what the screen is for, and what you are supposed to do on it?

How to study this guide

1. Read one part per sitting. Five parts: Seeing, Space, Color, Form, Craft. Each ends with a recap question that links back to earlier ideas.
2. Play with every lab. The sliders are not decoration. Moving a value and watching what breaks teaches faster than any paragraph.
3. Do the exercises on your own product. Pick one real screen now (your main screen, the one people see most) and use it all the way through. By the end it will be noticeably better.
4. Keep a "swipe file". A folder of screenshots of screens you admire, each with one sentence saying why. Taste is built by naming what you notice.

Every visual choice on a screen either tells people something true about the product, or it is noise. Good visual design makes the structure visible: what matters, what belongs together, what you can do and what state things are in.

People often treat visual design as the last coat of paint: you build the feature, then "make it pretty". That is backwards. A screen is a message. Size says "this is important". Space says "these belong together, those do not". Color says "this is clickable" or "this went wrong". Position says "start here". If those signals are random, the screen lies, even when every word on it is correct.

Think of it as four jobs. Every visual property you set should be doing at least one of them:

Decoration versus communication

A useful test for any visual element: if I removed it, what information would be lost? If the answer is "nothing", it is decoration. Decoration is not forbidden, but it has a cost: it competes for the same attention as the things that carry meaning. Tufte called the ink that carries no information "non-data-ink" and argued for erasing it; Rams called his version "as little design as possible". Both are saying the same thing: every mark should earn its place.

Why looking good matters anyway

None of this means appearance is unimportant. In 1995 Masaaki Kurosu and Kaori Kashimura at Hitachi showed people different layouts of the same ATM interface. People rated the more attractive layouts as easier to use, even though the functions were identical. This became known as the aesthetic-usability effect: people perceive attractive products as more usable, and they are more patient with their flaws. (The psychology is covered in The Human Mind.)

Two lessons follow. First, polish buys you trust and patience, which a new product from an unknown solo maker badly needs. Second, polish can hide problems in testing: people will say a pretty prototype is "easy" while failing to complete the task. Watch what they do, not what they say (see Testing & Iteration).

In the wild

• iA WriterInformation Architects, 2010
  The writing screen is almost only text. The few visual signals that exist (a muted Markdown symbol, a highlighted current sentence in Focus Mode) each carry a specific meaning. When decoration is gone, every remaining mark is read as a signal, so make each one count.
• Stripe DashboardStripe, 2010s to today
  Dense financial data, yet it reads calmly: one accent color for interactive elements, muted grey labels, strong numbers, status shown as small tinted badges. Complexity can look calm if every visual choice maps to one job.
• Braun ET66 calculatorDieter Rams & Dietrich Lubs, 1987
  Dark body, round keys, and a single yellow-accented equals key. The one color marks the one action you finish with. Color used once is a signal. Color used everywhere is wallpaper.

Hierarchy is the order in which the eye visits things. You control it with seven levers: size, weight, color, contrast, position, spacing and proximity. Good hierarchy means the most important thing is seen first, and the eye never has to fight.

Your eye does not read a screen top-left to bottom-right like a page of a novel. It jumps. First it lands on whatever has the most visual weight (the biggest, darkest, most saturated, most isolated thing), then hops to the next heaviest, and so on. A designer's job is to make that sequence of jumps match the order of importance. When it does, the screen feels "obvious". When it does not, people say it is "busy" or "confusing", even if they cannot say why.

How the levers combine

Each lever adds visual weight. Weight is roughly additive, which is why beginners overshoot: they make a title larger, then bolder, then a different color, then put it in a box. Experienced designers use the fewest levers that produce a clear ranking, and they use the same levers for the same level everywhere, so people learn the system.

A practical rule: plan for three levels, rarely four. Primary (the one thing this screen is about), secondary (supporting content people will read), tertiary (metadata, hints, timestamps). Give each level a fixed recipe, for example:

Notice that the recipe varies two levers per step (size and weight, then size and color), not all of them. Size and typographic detail are covered deeply in Typography.

The squint test

The fastest hierarchy check ever invented costs nothing: step back from the screen and squint (or blur a screenshot). Squinting removes detail and leaves only masses of weight. Whatever blob you still see clearly is what people will see first. If you see five equal blobs, you have no hierarchy. If the biggest blob is a decorative banner and not the main action, the hierarchy is wrong.

One focal point per screen

A screen can have only one "first thing". If two elements compete for first place (a hero image and a big button, or two solid primary buttons), the eye ping-pongs between them and the user hesitates. Decide what the screen is for, give that one thing the most weight, and make everything else visibly secondary.

In the wild

• Apple WeatherApple, iOS
  The current temperature is set enormous and thin; the condition and high/low sit smaller beneath; hourly and daily forecasts are clearly third. Blur the screen and you still read "the temperature". The answer to the user's main question gets the most weight.
• Things 3Cultured Code, 2017
  Task titles in full ink, notes and checklists hidden until opened, dates and tags small and muted. Only the "today" star and deadline flags use color. A strict three-level system makes a dense list feel light.
• Google Search resultsGoogle
  Each result has a clear recipe: a larger linked title, a smaller source line, and grey snippet text. Thousands of results, one learned pattern. Consistent hierarchy recipes let people scan without reading.

Most screens are fixed by taking things away, not by adding emphasis. Quiet the secondary content, drop redundant labels and borders, add space, and the important parts rise on their own.

Refactoring UI is a book and video series by Adam Wathan (a developer, creator of Tailwind CSS) and Steve Schoger (a visual designer). It is aimed squarely at developers who design their own interfaces, which makes it unusually useful for you. Its tactics are concrete and repeatable. This chapter collects the ones that matter most, explains why each works, and lets you toggle them on a real card.

Tactic 1: start with too much white space

When builders lay out a screen, they add space until things stop touching. The result is cramped, because "not touching" is the minimum, not the goal. Wathan and Schoger suggest the opposite: start with clearly too much space, then remove it until it looks right. You almost never end up back at the cramped version. Space is cheap, and it is the main tool for grouping and calm.

Tactic 2: de-emphasize instead of emphasize

When something does not stand out enough, the reflex is to make it louder. Often the better move is to make its neighbors quieter. In a sidebar where the active item does not pop, do not make it bigger and bolder; make the inactive items muted. Emphasis is a ratio, and you can change either side of it. Quieting also has a nice side effect: the screen gets calmer overall instead of louder.

Tactic 3: labels are a last resort

Builders think in database fields, so screens often look like forms: Name: Ana Ruiz, Email: ana@…, Role: Designer. But most data explains itself by its format. An email address looks like an email address. A price looks like a price. "Designer" under a name is obviously a role. Drop the label, and use hierarchy to show what the value is. When a label is truly needed, make the label quiet and the value strong, because the value is what people came for. Better still, combine label and value into natural language: "12 left in stock" instead of "Stock: 12".

Tactic 4: not every number needs a label, and not every number needs to be big

Dashboards built by engineers often show every metric with equal size and a label above it. Ask which number answers the user's real question, make that one large, and turn the rest into a sentence or a quiet row. "₹4,280 earned this month, from 37 sales" says in one line what a grid of four labeled tiles struggles to.

Tactic 5: use fewer borders

Borders are the default way to separate things, and they add up fast: a card border, a header underline, a border on every input, a divider between list items. Each one is a line the eye must process. Albers noticed, and Tufte later popularized, that two black lines on white create a third shape, the white channel between them: "1 + 1 = 3". Every border you add creates extra shapes you did not intend. Alternatives that separate with less noise:

• Space. A larger gap between groups than within them (proximity).
• Background. A slightly different surface color for a sidebar or a card.
• Shadow. A soft shadow lifts a card without drawing an outline.
• Alignment. A shared left edge implies a column without any line.

Tactic 6: button hierarchy

Not every action is primary. Give each screen one solid primary button, use outlined or soft buttons for secondary actions, and plain text links for tertiary ones. Destructive actions are not automatically primary: "Delete account" on a settings page is usually a quiet red text link, and it becomes a solid red button only inside the confirmation step, where deleting is the main action.

Put it together: the hierarchy fixer

Below is a typical card from a builder's first draft: every field labeled and bordered, everything bold, three solid buttons. Switch on the tactics one at a time and watch which ones make the biggest difference. Then switch them all on.

Notice that four of the six tactics are subtractions. Only "size for the key facts" adds emphasis, and it works far better once the noise is gone.

In the wild

• LinearLinear, 2019 to today
  Issue rows show title in full ink, while identifiers, labels and assignee avatars are small and muted. There are almost no borders: rows are separated by hover backgrounds and spacing. Dense software can be calm when secondary data is consistently quiet.
• Apple SettingsApple, iOS
  Grouped lists use background color to separate sections instead of drawn boxes; the value on the right of a row ("On", "English") is muted while the setting name is in ink. The thing you are choosing is primary; its current value is secondary.
• Tailwind UI and Refactoring UIWathan & Schoger, 2018 onward
  The book's examples are presented as before/after pairs, and almost every "after" is the "before" with things removed or quieted. Study before/after pairs; they train the eye faster than finished designs.

A grid is a small set of lines you agree to obey. It replaces hundreds of tiny placement decisions with one decision, which makes layouts consistent, faster to build and easier to read.

Swiss designers of the 1950s and 60s, Josef Müller-Brockmann most famously, turned grids into a discipline. His book Grid Systems in Graphic Design (1981) argues that a grid brings order and objectivity to a page: the reader senses the underlying structure even if they never see a line. Massimo Vignelli built his career on the same belief; his "Unigrid" system for the US National Park Service brochures (1977) let dozens of different publications share one structure and still feel designed.

On screens, a grid does three practical things. It gives every element a place to snap to, so edges line up. It creates consistent widths, so cards and columns feel related. And it gives you a vocabulary for responsive layout ("this spans 8 of 12 columns on desktop, all 4 on mobile").

The grid system is an aid, not a guarantee.Josef Müller-Brockmann, Grid Systems in Graphic Design, 1981

Four kinds of grid

Anatomy of a column grid

A column grid has three parts: columns (where content goes), gutters (the fixed gaps between columns) and margins (the space at the outer edges). Content spans whole columns, starting and ending on column edges, never inside a gutter.

Grids in practice, in code

You no longer need a framework for this. CSS Grid lets you declare the structure directly, and it is the clearest way to design in code:

.page { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 24px; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.main    { grid-column: 1 / span 8; }
.sidebar { grid-column: 9 / span 4; }
@media (max-width: 760px) { .main, .sidebar { grid-column: 1 / -1; } }

Most app screens do not need twelve columns everywhere. A list screen might be one column with a fixed maximum width. A settings page might be a two-column label/control grid. The point is not "always 12 columns"; it is "decide the structure once and snap to it".

In the wild

• NPS Unigrid brochuresMassimo Vignelli, 1977
  A black band at the top with the park name in Helvetica, and a modular grid underneath that every brochure in the system shares. One grid can carry a whole family of documents; a product with many screens is the same problem.
• Apple PhotosApple
  A strict modular grid of square thumbnails with tiny, constant gutters. Pinch to change the column count; the grid re-flows but never breaks. A modular grid makes thousands of items feel orderly.
• Medium article pagesMedium, 2012 onward
  A single reading column of about 680px, with images allowed to break out wider. Manuscript grid for reading; deliberate breaks for emphasis.

Pick a small scale of spacing values and use only those. A scale turns "how much space here?" from a fresh guess into a choice between a few options, and it makes grouping consistent across the whole product.

Without a system, spacing drifts: 10px here, 14px there, 15px because it "looked right" one afternoon. Each value is defensible alone, but together they create a faint visual noise that people feel as "something is slightly off". A spacing scale fixes that the same way a type scale fixes font sizes.

Why 8?

Most product teams use multiples of 8 (with 4 for small adjustments). Google's Material Design uses an 8dp grid, and many design systems follow it. The reasons are practical. Eight divides evenly into common screen dimensions. It scales cleanly at 1.5x, 2x and 3x pixel densities (8 × 1.5 = 12, a whole pixel; 5 × 1.5 = 7.5, a blurry half-pixel). And it is coarse enough that 16 versus 24 is a visible, deliberate difference, while 15 versus 16 is not a decision anyone can see.

A scale, not a ruler

A good spacing scale is not linear (8, 16, 24, 32, 40, 48…). It gets more spread out as values grow, because we notice differences relative to size: 4 versus 8 is a big change, 64 versus 68 is invisible. Refactoring UI suggests that no two adjacent values should be closer than about 25% apart. A typical scale:

The one spacing rule that matters most

Space inside a group must be clearly smaller than space between groups. This is Gestalt proximity turned into a rule. The classic failure is a form where the gap between a label and its input equals the gap between that input and the next label, so labels float halfway between two fields and the eye cannot tell which one they belong to.

In the wild

• Tailwind CSSTailwind Labs, 2017 onward
  Its default spacing scale is based on 0.25rem (4px) steps, with named sizes like p-4 (16px) and gap-6 (24px). Developers pick from the scale instead of typing pixels. A scale baked into your tools enforces itself.
• Material DesignGoogle, 2014 onward
  Components and layouts align to an 8dp grid, with icons and small type on a 4dp grid. Two granularities: a coarse one for layout, a fine one for details.
• Apple NotesApple
  The note list uses a tight gap between title and preview line, and a clearly larger gap between notes. Proximity alone, with a thin divider at most, makes each note read as one unit.

Align things to as few edges as possible, and align what the eye sees, not what the code measures. When geometry and perception disagree, trust perception.

Robin Williams's The Non-Designer's Design Book (first published 1994) reduced layout to four principles: contrast, repetition, alignment and proximity. Her rule for alignment is blunt: nothing should be placed on the page arbitrarily; every element should have a visual connection with another element. On a screen, that connection is usually a shared edge.

Edge alignment

Left-aligned text has a strong, straight left edge that the eye can return to at the start of every line. Centered text has two ragged edges and no anchor. That is why long text, lists and forms should be left-aligned (in left-to-right languages), and centering should be kept for short, symmetric things: a single heading on an empty state, a dialog with one sentence, a button label.

Optical alignment: when the math is wrong

Our eyes judge size by area and mass, not by bounding boxes. A circle and a square with the same height do not look the same size: the circle looks smaller, because it has less area near its edges. A triangle looks smaller still. Type designers have known this for centuries. Round letters like O and pointed ones like A slightly overshoot the baseline and cap height, so they look the same height as flat letters like H. Icon designers do the same with keylines: on Material Design's 24-unit icon grid, a circle is drawn about 20 units wide while a square is about 18, so they look equal.

Aligning icons with text

An icon next to a label is a classic place where code alignment fails. Flexbox's align-items: center centers the icon on the line box of the text, which includes space for ascenders and descenders. But the eye judges the text by its x-height or cap height. Lowercase labels often need the icon nudged down 1px, because the visible mass of lowercase text sits low in the line box. Check at real size, and fix with a small offset in the icon component, once, so every use inherits it.

More places where optics beat math

• Hanging punctuation. An opening quotation mark at the start of a pull quote makes the text edge look indented. Hang the mark outside the edge (CSS hanging-punctuation is supported in Safari; elsewhere use a small negative indent).
• Text inside buttons. Uppercase or digit-only labels look high or low depending on the font's metrics. Look at the real rendering, not the padding numbers.
• Play and arrow icons. A triangle centered by its bounding box looks off-center to the left. It must move toward its point. (More in chapter 18.)
• Numbers in tables. Right-align numbers and use tabular figures, so digits line up by place value. (See Information & Data.)

In the wild

• SF SymbolsApple, 2019 onward
  Symbols are designed to align with San Francisco text: they come in weights and scales that match the font, and they align to the text baseline and cap height, so an icon in a label sits right without manual nudging. The best fix for icon-text alignment is an icon system designed with the type.
• Apple's app icon gridApple
  Apple publishes an icon template with a grid of circles and squares (keylines) so that icons of different shapes feel the same size on the home screen. Keylines are written-down optical corrections.

White space is not leftover space. It is an active material that frames, groups, slows the eye and signals calm. What you leave empty is as designed as what you fill.

Kenya Hara, art director of MUJI since 2002, writes about emptiness as a design idea. In books like Designing Design and White, he contrasts "simplicity" (removing things to make them efficient) with "emptiness" (leaving room so that the person can bring their own meaning). He compares a good design to an empty vessel: its value is the space it offers. MUJI's 2003 "Horizon" campaign showed little more than a person standing on a vast, flat horizon, such as Bolivia's Uyuni salt flat. The ads said almost nothing, and that was the message.

You do not need a philosophy to use this, but it helps to stop thinking of empty space as waste. On screens, white space does four concrete jobs:

Macro and micro white space

Macro white space is the large stuff: page margins, space between sections, the empty area around a hero. Micro white space is the small stuff: line-height, letter-spacing, padding inside a button, the gap between an icon and its label. Macro space shapes the layout and mood; micro space shapes legibility. Most "cramped" screens fail on micro space first (tight line-height, buttons with 4px padding), and most "empty and lost" screens fail on macro space (content floating in a sea with no frame or alignment).

The cost of white space

White space is not free. Every pixel of space is a pixel not showing content, and in tools people use all day (email, spreadsheets, code editors, trading screens) too much space means more scrolling, more eye travel and less overview. The right amount depends on what the person is doing. Reading and deciding want space. Scanning, comparing and monitoring want density. Chapter 9 is about choosing between them.

In the wild

• Google Search home pageGoogle, since 1998
  A logo, one input and two buttons in a mostly empty page. For years competitors were dense "portals"; Google's emptiness said "we do one thing". Emptiness can be a product's whole positioning.
• MUJIRyohin Keikaku, art direction by Kenya Hara
  Products, stores and ads share plain materials, muted colors and lots of space, so the product and the customer's use of it are the focus. Emptiness invites the person to fill it with their own use.
• iA WriterInformation Architects
  A blank page with a single column of text and wide margins; the interface appears only when needed. In a tool for thinking, empty space is the feature.

A layout is not a picture at one size; it is a set of rules for how content behaves as space changes. Design the rules (what stretches, what wraps, what moves, what hides) instead of drawing three fixed screens.

Ethan Marcotte coined "responsive web design" in a 2010 article in A List Apart, combining fluid grids, flexible images and media queries. Luke Wroblewski's Mobile First (2011) added the discipline of designing the smallest screen first, which forces you to decide what matters. Jen Simmons later championed "intrinsic web design", where layouts lean on CSS Grid and Flexbox to size themselves from content rather than from a few fixed breakpoints.

Four things a layout can do as space changes

Fluid first, breakpoints where the content breaks

Start fluid: widths in fractions, a max-width for readability, sizes that scale with clamp(). Then add breakpoints only where the content starts to look wrong (a line gets too long, a card gets too narrow), not at the widths of particular phones. Devices change every year; your content's needs do not.

.title   { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); }
.cards   { display: grid; gap: 24px;
           grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* No breakpoint needed: cards wrap when there is no room for another 240px column. */

Container queries: components that know their own space

Media queries ask "how wide is the window?". But a card does not care about the window; it cares about the box it sits in. The same card might sit in a wide main column and a narrow sidebar on the same screen. Container queries, supported in all major browsers since 2023, let a component change its layout based on its container's width.

.card-slot { container-type: inline-size; }
@container (min-width: 420px) {
  .card { display: grid; grid-template-columns: 140px 1fr; gap: 16px; }
}

In the wild

• GmailGoogle
  On wide screens the folder list sits on the left; as space narrows it collapses to icons, then to a hidden drawer on phones. The message list stays the constant. Reposition and hide navigation; never the main content.
• NotionNotion Labs
  The sidebar can be collapsed by the user on desktop and is a slide-over panel on mobile; pages are a single centered column with a max width, with a toggle for full width. Let readers choose width where content varies.

Most software screens are variations of a handful of proven layouts. Pick the one that matches how people move through your content, then choose a density that matches how often and how expertly they use it.

You do not need to invent a layout. People already know how a sidebar works, how a list opens into a detail view, how a grid of cards behaves. Reusing these patterns costs them nothing to learn (Jakob's law: people spend most of their time in other products). Your design work is choosing the right pattern and then executing it well.

The list-detail pattern deserves extra respect. On wide screens both panes are visible; on phones the detail pushes in over the list. Apple's split views and Android's list-detail canonical layout both formalize this. If your product is about a collection of things (notes, tasks, documents, clients), this is probably your layout.

Density: compact versus comfortable

Density is how much information fits in a given area. It is not good or bad; it is a fit. A Bloomberg Terminal is famously dense: black background, amber and colored text, many panels of numbers. Professional traders want it that way, because they compare and monitor many values at once and they use it all day, so they have learned where everything is. Apple Notes is the opposite: one note, a big text area, a short list. Its users open it for a few seconds to jot something down; density would only slow them.

Rules for dense screens that still feel calm

• Reduce chrome before reducing space. Remove borders, icons and repeated labels first; they consume more area than padding.
• Keep hierarchy strict. In a dense table, the one column people scan by must be in full ink; the rest muted.
• Align relentlessly. Density without alignment is chaos; density with alignment is a table.
• Use tabular figures so numbers line up.
• Offer a density setting if your audience is split. Gmail offers Default, Comfortable and Compact; many tools offer a compact mode for power users.

In the wild

• Bloomberg TerminalBloomberg, since the 1980s
  Extremely dense panels on a dark background, keyboard-driven, with color used to code types of information. Its users invest weeks learning it and use it for hours a day. Density is a reward for expertise; it fits when people live in the tool.
• LinearLinear
  Compact issue lists with small type and tight rows, but very little chrome, so it reads as clean rather than crowded. Dense and calm are compatible if you subtract chrome.
• Apple NotesApple
  A list-detail layout that becomes a single stack on iPhone, with generous text and almost no controls visible. Occasional, quick tasks want sparse screens.

Screens mix red, green and blue light, but people do not see in RGB. Use a color model that matches perception (OKLCH) when you build palettes, so that "same lightness" actually looks the same lightness.

Josef Albers's Interaction of Color (1963) begins with a humbling lesson: color is the most relative medium in art. The same grey looks lighter on black than on white; the same orange looks different next to blue than next to red. You can never judge a color alone, only in context. That is why you build palettes as systems and test them on real screens.

Three ways to describe a color

RGB / hex

How much red, green and blue light the screen emits, for example #2457C5. Precise for machines, nearly impossible for people to reason about ("make it a bit lighter" changes all three numbers).

HSL

Hue (angle on a color wheel, 0 to 360), saturation and lightness. Much easier to think in. But its "lightness" is mathematical, not perceptual: at 50% lightness, yellow looks far brighter than blue.

OKLCH

Lightness, chroma (colorfulness) and hue, built on Oklab, a perceptual color space Björn Ottosson published in 2020. Equal L values look roughly equally light across hues. Available in CSS as oklch(L C H) and supported in all major browsers since 2023.

Why this matters: when you generate a palette in HSL by keeping lightness fixed and rotating hue, you get a yellow that is nearly invisible on white and a blue that is nearly black. Text colored with them fails contrast unpredictably. In OKLCH, if your blue at L 0.55 passes contrast on white, your green and red at L 0.55 will be close too. Toggle the demo to see the difference.

Hue, chroma and lightness as design decisions

:root {
  --accent:        oklch(0.55 0.16 255);  /* button, links */
  --accent-hover:  oklch(0.50 0.16 255);  /* just darker: change L only */
  --accent-soft:   oklch(0.95 0.03 255);  /* tinted background: high L, low C */
}

In the wild

• Stripe's accessible color systemStripe, 2019
  Stripe described rebuilding its palette in a perceptually uniform space (CIELAB), so that colors at the same level have similar contrast across hues, making accessible combinations predictable. Perceptual models turn contrast from guesswork into a rule.
• Tailwind CSS v4Tailwind Labs, 2025
  The default palette was redefined in OKLCH. The industry has moved; there is no reason to start a new palette in HSL.
• LinearLinear, 2024 redesign
  Linear has written about generating its themes in the LCH color space from a few inputs (base color, accent, contrast), so custom themes stay legible. A perceptual model lets a small set of inputs generate a whole, consistent theme.

A product palette is mostly neutrals. Add one accent for interaction and identity, a few semantic colors for state, and build each as a scale of shades. That is enough for almost any product.

Beginners pick five brand colors and try to use all of them. Look closely at calm products and you will see something different: 90% greys (often slightly tinted), one accent used sparingly, and red, green and amber reserved for status. Refactoring UI makes this point strongly: you need more shades of fewer colors, not more colors.

The parts of a UI palette

Neutrals with a hue bias

Pure greys (zero chroma) can look cold and lifeless, especially next to a colorful accent. Most polished products tint their neutrals very slightly, toward warm (yellow, red) or cool (blue). The chroma is tiny, around 0.005 to 0.015 in OKLCH, so you barely notice the tint, but the whole interface feels more coherent. A cool bias suits technical, precise products; a warm bias suits reading, writing and personal products. This course itself uses a slightly warm paper.

60-30-10: proportion matters more than hue

An old interior-design rule of thumb says a room looks balanced when about 60% is a dominant color, 30% a secondary color and 10% an accent. Treat it as a starting point, not a law. For software it translates well: about 60% background, 30% surfaces and text, and no more than about 10% accent. The accent works because it is rare. If everything clickable, every icon and every heading is accent-colored, it no longer marks anything.

Scales: tints and shades from one hue

Every family needs a range of shades: a very light tint for subtle backgrounds, light shades for borders and hover fills, a solid middle for buttons, and dark shades for text on tinted backgrounds. A common convention numbers them 50, 100, 200 … 900. Radix Colors goes further and assigns each of its 12 steps a job (steps 1 and 2 for backgrounds, 3 to 5 for component backgrounds, 6 to 8 for borders, 9 and 10 for solid fills, 11 and 12 for text), which is a very useful way to think even if you build your own.

Build your scale in the lab. Pick a hue, set the chroma, and see ten steps generated with even perceptual lightness. Each swatch shows its contrast against white and black, so you can see which steps are safe for text.

Contrast rules and how to test them are covered in depth in Accessible & Inclusive. The short version: body text at least 4.5:1 against its background, large text and essential UI boundaries at least 3:1.

A complete small palette, as tokens

:root {
  /* neutrals, warm bias */
  --bg:        oklch(0.98 0.006 80);   --surface:  oklch(1 0 0);
  --border:    oklch(0.90 0.010 80);   --muted:    oklch(0.52 0.012 80);
  --text:      oklch(0.22 0.010 80);
  /* one accent */
  --accent:    oklch(0.52 0.15 255);   --accent-soft: oklch(0.95 0.03 255);
  /* semantic */
  --success:   oklch(0.52 0.12 150);   --danger:   oklch(0.53 0.17 28);
  --warning:   oklch(0.62 0.13 75);    /* darker text variant needed on white */
}

In the wild

• Radix ColorsRadix team, now part of WorkOS
  Open 12-step scales with documented roles for each step, in light and dark versions designed together. A scale is more useful when every step has a job.
• Things 3Cultured Code
  Almost entirely white and grey, with blue for selection and interaction and a yellow star for Today. Color appears only where it means something. A calm palette is a restrained palette.
• SpotifySpotify
  A dark neutral interface with the brand green reserved for the main play control and a few active states. Album art provides the color. Let content be colorful and keep the chrome neutral.

Colors carry meaning from culture and from convention, and in an interface they mostly signal state. Use them consistently, never as the only signal, and remember that about one in twelve men see red and green differently.

Meaning comes from convention and culture

No color has a universal meaning, but software has built strong conventions: red for errors and destructive actions, green for success, amber for warnings, blue for links and information. Break them and people misread your interface. At the same time, some meanings are cultural. In Western stock markets green means "up"; in mainland China, red means up and green means down. Red is the color of luck and celebration in China and of brides and auspicious occasions in much of India, while white is associated with mourning in parts of East and South Asia. If your product shows financial change or is used across cultures, decide deliberately, and prefer signals that do not depend on color alone (arrows, signs, words).

Color for state

Interactive elements move through states: default, hover, pressed, focused, selected, disabled, and for inputs, error and success. Design them as a set, and use color changes that follow a rule (for example "hover = one step darker, pressed = two steps darker, selected = soft accent background"). Then every component behaves alike.

Never color alone

WCAG success criterion 1.4.1 says color must not be the only visual means of conveying information. The reason is simple: roughly 8% of men and 0.5% of women (of Northern European descent; rates vary by population) have some form of color vision deficiency, most commonly red-green. For them, a red error border and a green success border can look nearly identical. Others use your app in sunlight, on a dim screen, or in grayscale mode. Add a second channel: an icon, a word, a pattern, a position, or a change in shape or weight.

You can check your own screens: Chrome's DevTools has a Rendering panel with "Emulate vision deficiencies", and Figma and other tools have simulation plugins. A quick, crude check is to view a screenshot in grayscale: if states become indistinguishable, you depend on color alone.

In the wild

• GitHubGitHub
  Pull request and check states pair color with distinct icons (a check, an x, a dot, a merge symbol) and words such as "Open", "Merged" and "Closed". GitHub also offers color-blind friendly themes. Shape and text carry meaning; color reinforces it.
• Chinese brokerage and market appsmainland China
  Rising prices are shown in red and falling prices in green, the reverse of most Western apps. Many international trading apps let users pick the convention. When meaning is cultural, make it a setting.

Dark mode is a second palette with its own rules: surfaces get lighter as they rise, accents get lighter and calmer, text is off-white rather than pure white, and shadows mostly stop working. Inverting your light theme breaks all four.

Apple added a system-wide dark mode in macOS Mojave (2018) and iOS 13 (2019); Android 10 (2019) did the same. Since then people expect it, and many use it all the time. Designing it well is mostly about knowing what changes when the background goes dark.

Rule 1: elevation by lightness

In light mode, a raised card is shown with a shadow. On a dark background a shadow is nearly invisible. Instead, raised surfaces get lighter, as if closer to a light source. Material Design's dark theme (2019) formalized this: a base surface of #121212 with white overlays that increase with elevation, from about 5% at the lowest level to about 16% at the highest. Apple's dark mode similarly uses lighter "elevated" background colors for sheets and popovers.

Rule 2: lighter, calmer accents

A saturated color that looks fine on white can appear to vibrate or glow on a dark background, and it may fail contrast for text. In dark mode, use a lighter, slightly less saturated step of your accent and semantic colors (Material recommends lighter tones of the primary color for dark themes). In OKLCH terms: raise L, lower C a little.

Rule 3: off-white text, and fewer levels of it

Pure white on pure black is the maximum possible contrast, 21:1. For long reading, many people find it harsh, and people with astigmatism often report a halo or blur around light text on dark backgrounds. Use off-white for primary text (Material 2 used white at 87% opacity for high-emphasis text and 60% for medium) and keep body text comfortably above 4.5:1, ideally well above it.

Rule 4: pure black is an option, not the default

Pure black backgrounds do have uses. On OLED screens, black pixels are switched off, saving some battery and giving a seamless edge in a dark room, which is why reading apps often offer a true-black theme for night reading. But as a default for text-heavy UIs, a very dark grey is calmer and leaves room to show elevation. Consider offering both: dark (dark grey) and "black" or "OLED" for those who want it.

:root { --bg: oklch(0.98 0.006 80); --surface: oklch(1 0 0); --text: oklch(0.22 0.01 80); --accent: oklch(0.52 0.15 255); }
@media (prefers-color-scheme: dark) {
  :root { --bg: oklch(0.18 0.006 80); --surface: oklch(0.23 0.006 80);
          --text: oklch(0.93 0.006 80); --accent: oklch(0.74 0.11 255); }
}

In the wild

• Apple system dark modeApple, macOS 2018, iOS 2019
  Uses "base" and "elevated" background colors so that sheets and popovers sit lighter than the screen below, and adapts system colors for dark backgrounds. Semantic colors that change per theme make dark mode almost automatic.
• Material Design dark themeGoogle, 2019
  Defined a dark grey base surface, white elevation overlays, desaturated primaries and text emphasis by opacity. The clearest public write-up of dark-theme rules; worth reading in full.
• Reading apps with a black themee.g. e-reader and read-later apps
  Many offer separate "dark" and "black" themes so night readers can choose the darkest possible screen. Pure black is a user choice, not your default.

Corner radius sets the personality of an interface, and consistency sets its quality. Pick a small radius scale, scale radius with element size, and when shapes nest, make the outer radius equal the inner radius plus the gap between them.

What radius says

Sharp corners read as precise, technical, serious, sometimes severe. Small radii (4 to 8px) read as neutral and modern. Large radii and pill shapes read as soft, friendly, touchable. None is correct in general; what matters is that the choice fits the product and is applied consistently. A banking tool with bubbly pill cards feels unserious; a children's app with razor corners feels cold.

Radius should grow with the size of the element. A 16px radius on a large card looks gentle; the same 16px on a 32px-tall button makes it nearly a pill. That is why a radius scale works better than a single value.

The nested radius rule

When a rounded shape sits inside another rounded shape (a button inside a card, an image inside a frame, a selected segment inside a segmented control), the two curves should look parallel, as if one were drawn around the other. Geometrically, that means they share a center: outer radius = inner radius + padding. If you use the same radius for both, the gap between them is wider at the corners than along the edges, and the inner shape looks pinched or the outer one looks bloated.

Continuous corners

A normal CSS border-radius is a quarter circle joined to a straight edge. Where they meet, the curvature jumps abruptly from zero to a constant, and a sharp eye can see the "kink". Apple uses continuous corners (often called squircles) on app icons and hardware: the curvature ramps up gradually, so the corner flows out of the edge. In UI code this is a refinement, not a requirement. SwiftUI offers it via a continuous corner style; on the web, it is usually approximated with SVG masks, and a proposed CSS property (corner-shape) aims to support it natively.

Borders, when you do use them

Chapter 3 argued for fewer borders. When you need one, make it quiet: 1px, in a low-contrast neutral step (unless it is an input that needs 3:1). Prefer borders that are inside the element's box (CSS box-shadow: inset 0 0 0 1px or outline tricks) when you want the border not to change layout size. And keep border colors as tokens, like everything else.

In the wild

• iPhone hardware and screenApple
  Since the iPhone X (2017), the display corners are rounded to sit concentric with the rounded device corners, and iOS widgets and sheets echo those curves. The nested radius rule, applied from the glass to the pixels.
• Stripe and Linearweb apps
  Both use small, consistent radii (around 4 to 8px) on controls and slightly larger ones on cards and menus, matching their precise, professional tone. Small radii signal a serious tool.

Depth tells people what is on top of what: what floats, what can be moved, what will go away. Shadows should behave like light: one consistent source, two layers (a tight contact shadow and a soft ambient one), and bigger, softer shadows for higher things.

Why depth helps

A menu that floats above the page, a dialog over a dimmed screen, a card you can drag: these are layers, and people understand layers from the physical world. Depth answers "what is in front?", "what is temporary?", "what can I pick up?". Used for those jobs, it is communication. Used everywhere (every card floating, every button glowing) it becomes noise, and nothing reads as "on top" any more.

How real shadows work

In the real world, a raised object casts two kinds of shadow. Right where it nearly touches the surface there is a small, dark, sharp contact shadow. Around it there is a larger, lighter, blurry ambient shadow from light coming from many directions. The higher the object, the more offset, larger and softer the shadow gets. A single CSS shadow with a big blur and high opacity looks like a smudge; two layers look like an object.

A short history of depth on screens

Interface depth has swung like a pendulum, and knowing the swings helps you avoid copying a trend at its peak.

• Skeuomorphism (iPhone OS to iOS 6, 2007 to 2012, and the Mac of the same era). Interfaces imitated physical materials: stitched leather in Find My Friends and the Mac's iCal, green felt in Game Center, a wooden bookshelf in iBooks. It helped people who were new to touchscreens understand what was pressable, but the textures carried no information and aged quickly.
• Flat (Windows Phone's Metro, 2010; iOS 7, 2013). Microsoft's Metro design language and then Apple's iOS 7, led by Jony Ive after Scott Forstall's departure, stripped textures and most shadows. Typography, color and layering through blur took over. Early flat design overcorrected: some buttons became plain text with no affordance at all.
• Material Design (Google, 2014). A middle path: flat surfaces like sheets of paper, with elevation expressed by shadows that follow consistent rules. It reintroduced depth as information.
• Neumorphism (around 2019 to 2020). A popular trend on design showcase sites: shapes that seem extruded from a single soft background with paired light and dark shadows. It looked lovely in still images but had very low contrast, so buttons and states were hard to see. It mostly stayed a showcase style, which is itself a lesson.
• Glass and translucency. Translucent, blurred layers have been part of iOS since iOS 7; Microsoft's Fluent "Acrylic" (2017) and "Mica" (Windows 11, 2021) and macOS Big Sur (2020) leaned in further, and Apple's "Liquid Glass" (announced in 2025 across its platforms) made translucency and refraction central to controls and bars.

Using glass and translucency well

Translucent layers keep context visible (you can see the page under a toolbar as you scroll), and they make layering obvious. The cost is legibility: text over a moving, colorful background can become unreadable. Rules that keep glass usable:

• Blur strongly enough that underlying content becomes soft color, not readable shapes.
• Add a tint (a semi-opaque surface color) so text always has a predictable background.
• Use it for chrome (bars, sidebars, menus), not for content cards or long text.
• Respect accessibility settings: iOS and macOS have "Reduce Transparency", and the web has an emerging prefers-reduced-transparency media query. Provide an opaque fallback.

In the wild

• iOS 7Apple, 2013
  Removed textures and most shadows, and used translucent, blurred layers (Control Center, notification center) to show what sat on top. Depth can come from translucency and motion, not just shadows.
• Material DesignGoogle, 2014
  Specified elevation for each component (cards low, menus higher, dialogs higher still) with matching shadows. Make elevation a token with meaning, not an aesthetic choice per screen.
• Things 3Cultured Code
  Mostly flat, but an open to-do lifts into a card with a soft shadow, and dragged items float. Reserve depth for the moment something becomes active.

Icons are a small visual language. They help when they are consistent, recognizable and paired with words; they hurt when they are decorative, ambiguous or mixed from different sets.

Susan Kare designed the original Macintosh icons (1984) on a 32 by 32 pixel grid: the trash can, the paintbrush, the "happy Mac". They worked because each was a simple, recognizable object and all shared the same grid, line weight and spirit. Those are still the rules.

What makes an icon set consistent

An icon set is consistent when every icon shares the same grid (usually 24 by 24 with about 2 units of padding), the same stroke weight (for example 1.5 or 2 at 24px), the same corner treatment (round or square joins and caps), the same style (outline, filled or duotone) and the same level of detail. Mixing two sets breaks all five at once, and people notice even if they cannot say what is wrong.

Icon plus label, almost always

Very few icons are universally understood without a label: perhaps search (magnifier), home, print, close (x), play and pause. Most others (share, archive, sync, the many "sparkle" icons for AI features) mean different things in different apps. Nielsen Norman Group's long-running advice is that icons need a text label to be clear, especially for anything beyond the most standard actions. A label also gives a larger click target and helps screen reader users if wired correctly. Icon-only buttons are acceptable when space is tight and the icon is standard, and they still need a tooltip and an accessible name.

Metaphors and when not to use icons

Icons are metaphors, and metaphors age. The floppy disk still means "save" to many people who have never seen one; the phone handset still means "call". These survive because they became conventions. Inventing new metaphors is risky: for abstract concepts (permissions, workflow, integrations), a word is clearer than any picture. Do not use icons:

• to decorate every list item or heading (they add noise and dilute meaning);
• for abstract ideas with no established symbol;
• when two similar icons would sit next to each other (archive versus inbox);
• as the only way to tell states apart (see chapter 12).

Choosing an icon set

Match the icon stroke weight to your text weight: thin icons next to bold text (or the reverse) look mismatched. At 16 to 20px sizes, use the set's smaller optical size if it has one, because a 24px icon simply scaled down gets spindly and blurry.

In the wild

• Original Macintosh iconsSusan Kare, 1984
  Simple objects on a tiny pixel grid, with a consistent spirit and clear metaphors (trash, document, folder). Constraints breed consistency; metaphors work when they are concrete.
• iOS tab barsApple
  Standard tab bars show an icon with a short label beneath, outline when inactive and filled when selected. Icon plus label, with fill as the state signal, is a proven pattern.
• GmailGoogle, 2011 redesign
  The redesign replaced text buttons such as "Archive" and "Report spam" with icons, and Gmail added a setting to show text button labels instead. When even a huge team adds a "show labels" option, take the hint: labels matter.

Images and illustrations earn their place when they show the real thing, explain an idea faster than words, or set a tone at a quiet moment. Generic stock and filler illustrations cost attention and trust.

When imagery helps

• Showing the real thing. A screenshot of your actual product, a photo of the actual product, a preview of the user's own content. Real beats representative.
• Explaining. A small diagram of how sync works, or a before/after, can replace paragraphs.
• Quiet moments. Empty states, onboarding, success and error pages: moments with little content, where a small illustration sets tone and lowers stress.
• Identity. A consistent illustration style becomes part of the brand (see Identity & Launch).

When it hurts

Generic stock photos (smiling people pointing at laptops, handshake close-ups) signal "template" and lower trust, because everyone has seen them on a hundred other sites. The same happened to the flat, bendy-limbed illustration style that spread across tech companies in the late 2010s, sometimes nicknamed "Corporate Memphis": once friendly, now so common it reads as no personality at all. And any image inside a working screen (a dashboard, an editor) competes with the content people came to work on.

Consistency rules for illustration

If you use illustrations, they must look like one artist made them: the same line weight, the same palette (ideally drawn from your UI palette), the same level of detail, the same way of drawing people or objects. Mixing a free pack from one site with icons from another produces the same "leftovers" feel as mixed icon sets. If you cannot draw, a few options work well for solo makers: simple geometric spot illustrations built from your icon set's shapes; monochrome line drawings in your ink color; or no illustration at all, with confident typography doing the work.

Text on images

Text placed directly on a photo is readable only where the photo happens to be plain. Since you cannot control every image (especially user content), add a scrim: a gradient or semi-opaque overlay behind the text, or place text below the image instead. Check contrast against the busiest part of the image, not the calmest.

.cover { position: relative; }
.cover::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / .65), rgb(0 0 0 / 0) 55%); }
.cover h3 { position: absolute; left: 16px; bottom: 16px; z-index: 1; color: var(--on-image); }

Image handling basics

• Fixed aspect ratios. Pick two or three (1:1, 4:3, 16:9) and crop to them with aspect-ratio and object-fit: cover, so grids stay aligned whatever users upload.
• Placeholders. Reserve the image's space before it loads (a neutral or dominant-color block) so the layout does not jump.
• Dark mode. Very bright images can glare on dark backgrounds; some products dim them slightly.
• Alt text for meaningful images; empty alt for decorative ones (see Accessible & Inclusive).

In the wild

• Notionillustrations by Roman Muradov
  Black-and-white, hand-drawn, slightly whimsical figures used on the website, in empty states and templates. They match the product's mostly monochrome interface. An illustration style can extend the UI's palette instead of fighting it.
• MailchimpIntuit Mailchimp
  Freddie the chimp and a distinctive illustration style give personality to success moments (the famous high-five after sending a campaign) without intruding on the editing tools. Spend personality at moments of relief, not during work.
• DuolingoDuolingo
  A tightly specified cast of characters and shapes, drawn with consistent geometry, appears across lessons, notifications and marketing. Consistency of style is what makes illustration feel like a brand.

Quality is mostly consistency: the same thing always looks and behaves the same. Polish is the last 5%: crisp lines, centered icons, visible focus, honest hover states. People rarely notice polish, but they always notice its absence.

Repetition and rhythm

Repetition is how people learn an interface. When every primary button is the same shape and color, people find primary buttons without thinking. When every list uses the same row height, spacing and hierarchy, scanning becomes automatic. Repetition also creates rhythm: a steady beat of spacing and sizes that makes a long screen feel organized, the way regular line spacing makes a page of text calm. Break the rhythm only on purpose, to signal "this is different".

Consistency at scale comes from tokens and components: named values for color, space, type, radius and elevation, and components that use only those values. That is the subject of Systems & Platforms. In this guide, the point is simpler: every decision you made in chapters 4 to 17 should exist exactly once, as a token or a component, and everything else should refer to it.

The "everything aligned" pass

Before you call a screen finished, do one pass looking only at alignment and consistency. Turn on a grid or ruler overlay. Check that every left edge sits on the grid, every icon is the same size and centered against its label, every gap is a scale value, every corner is a radius token, and every repeated element is pixel-identical to its siblings. It is tedious; it takes 15 minutes; and it is the difference between "looks fine" and "looks made".

Pixel snapping and hairlines

Screens draw in physical pixels. A 1px line placed at a fractional position (say y = 10.5 in a scaled layout) is split across two pixel rows, and it renders as a blurry 2px grey line instead of a crisp 1px dark one. The same happens to icons whose paths sit on half pixels. On high-density screens (2x, 3x) the blur is smaller but still visible as softness.

A hairline is the thinnest line the screen can draw: one physical pixel. On a 2x display that is 0.5 CSS pixels. Hairline dividers look elegant and quiet, and Apple's own UIs use them; but on 1x screens 0.5px may round unpredictably. The safe approach: use 1px CSS borders in a low-contrast color, and use true hairlines only where you know the display density.

Optical centering: the play button

A play triangle centered by its bounding box looks shifted to the left, because most of its visual mass is on the flat left side. Move it right until it looks centered; a common starting point is to center the triangle's centroid instead, which shifts it right by about one sixth of its width.

Focus rings and hover states

Every interactive element needs a visible keyboard focus state and, on devices with a pointer, a hover state. These are not decoration; they answer "where am I?" and "what can I click?". Removing the browser's focus outline (outline: none) without replacing it is one of the most common accessibility failures on the web. Use :focus-visible so the ring appears for keyboard users but not on every mouse click, make it at least 2px, offset it from the element, and give it enough contrast against both the element and the background (WCAG 2.2 adds specific focus appearance guidance). This course uses a 2px blue outline with a 2px offset; press Tab to see it.

For hover: a subtle background change (one neutral step) for rows and ghost buttons, one lightness step for solid buttons, and an underline or color shift for links. Keep hover transitions fast (around 100 to 150ms) or instant; see Motion & Feel. And never put essential information only in a hover state, because touch screens have no hover.

A polish punch list

In the wild

• TweetieLoren Brichter, 2008 to 2010
  A one-person Twitter client celebrated for crisp details and for introducing pull-to-refresh. Its polish set a bar that much bigger teams copied. Detail is a competitive advantage for small makers.
• LinearLinear
  Known for consistent focus states, keyboard navigation and pixel-precise alignment across a large app. Consistency at scale comes from a small set of strictly reused components.

Do not try to fix everything at once. Tidy a screen in five passes, from the most structural to the most cosmetic: content, layout, spacing, hierarchy, then color and details. Each pass makes the next one easier.

The order matters. If you start by picking colors, you will polish elements that pass 1 deletes. If you fix hierarchy before spacing, the groups will be wrong and your type sizes will compensate for it. Structural decisions first, cosmetic decisions last. Here is the whole process on one screen, a messy settings page like the one in the warm-up.

The five passes, as a procedure

1. Content and order (chapters 1 to 3). Write the screen's purpose in one sentence. Remove anything that does not serve it. Group what remains, order groups by frequency or importance, and put destructive or rare actions last.
2. Layout and alignment (chapters 4, 6, 8, 9). Choose the layout pattern and grid. Snap everything to as few edges as possible. Check the narrow width.
3. Spacing and grouping (chapters 5 and 7). Apply three steps from your scale: within items, between items, between groups. Remove borders that spacing now makes unnecessary.
4. Hierarchy and type (chapters 2 and 3, and Typography). Rank: one focal point, three text levels. De-emphasize labels and metadata. Squint.
5. Color, shape and details (chapters 10 to 18). Neutrals first, one accent for interaction, semantic colors only for state. Radius and elevation tokens. Icons from one set. Focus and hover states. Polish punch list.

In the wild

• Refactoring UI case studiesWathan & Schoger
  Steve Schoger's well-known design tips and redesign videos show this same order: remove, align, space, rank, then color and details. Watching someone tidy a real screen step by step is one of the fastest ways to learn.
• iOS SettingsApple
  The end state of our example is close to Apple's own grouped settings lists: grouped surfaces, muted section headers, values on the right, chevrons for drill-down, switches for booleans. When a platform convention fits, converging on it is not copying; it is respecting what people already know.

Wrap-up

Practice assignment for the next two weeks

Thirty to sixty minutes a day, all on your own product. The goal is a product whose visual system lives in tokens and whose main screens pass the visual review checklist.

Reading list

• Refactoring UI
  Adam Wathan and Steve Schoger, 2018 · The most practical visual design book for developers who design. Read it first, with your own product open.
• The Non-Designer's Design Book
  Robin Williams, first edition 1994 · Contrast, repetition, alignment, proximity, explained so simply that you will never un-see them.
• Grid Systems in Graphic Design
  Josef Müller-Brockmann, 1981 · The classic on grids. Look at the examples more than you read the text.
• The Vignelli Canon
  Massimo Vignelli, 2010 · Short, opinionated, free to read online. On grids, type and the discipline of a few good choices.
• Interaction of Color
  Josef Albers, 1963 · Why color is relative. Do a few of the exercises with paper or a simple app; they rewire how you see.
• Designing Design
  Kenya Hara, 2007 · Emptiness, MUJI and the quiet power of leaving things out.
• Envisioning Information
  Edward Tufte, 1990 · Layering and separation, "1 + 1 = 3", and how to make dense information calm.
• "A perceptual color space for image processing"
  Björn Ottosson, 2020 (blog post) · The introduction of Oklab, the basis of OKLCH. Technical, but the motivation section alone is worth it.
• "Designing accessible color systems"
  Stripe blog, 2019 · A real team's account of building a perceptually uniform, accessible palette.
• "Responsive Web Design"
  Ethan Marcotte, A List Apart, 2010 · The article that started it; short and still clear.
• Apple Human Interface Guidelines and Material Design 3
  Apple and Google, continuously updated · Read the sections on color, dark mode, layout, icons and materials for your platform. They encode years of testing.

Next, carry this into text itself: Typography covers type scales, measure, leading and the details of type on screens, which is where most of a calm interface actually lives.