The visual approach
Trello's design is built on constraint. The primary blue (#0079BF) anchors nearly every call to action, from the hero "Sign up - it's free" button to inline links throughout the interface. This isn't accent color variety—it's a single, confident hue doing most of the work. The surface grays step through four predictable values: #FFFFFF for cards, #FAFBFC for list backgrounds, #F4F5F7 for board surfaces, and #E3E8ED for structural chrome. Text lives in three shades of near-black and mid-gray (#172B4D, #5E6C84, #6B778C), ordered by hierarchy rather than sentiment.
The type system uses the system font stack (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) and a scale that runs from 14px secondary text through 56px hero headlines. Most interface chrome sits at 14px or 16px, with 20px reserved for section headings and 32px for page titles. Line height holds steady between 1.5 and 1.6, which keeps cards and list items breathable without wasting vertical space. The spacing grid starts at 4px and doubles cleanly: 8px, 16px, 24px, 32px, 48px, 64px, 96px. Border radius offers four choices—3px, 8px, 12px, 16px—with the smallest reserved for buttons and inputs, the largest for modals.
Motion is present but measured. The marketing page uses parallax scroll on floating app icons and geometric shapes, each layer moving at a different speed to suggest depth. Hover states on primary CTAs apply transform: translateY(-2px) with a deeper shadow over 200ms. Secondary outlined buttons fill with color on hover at 250ms. Accordion FAQ items expand with a 350-400ms ease-out, while the icon rotates 180 degrees from plus to minus.
What works
The 4px base unit creates a coherent rhythm across components. Padding inside a button might be 8px vertical and 16px horizontal; margin between a heading and paragraph might be 24px; the gap between two columns might be 32px. Every measurement locks to the same underlying beat, so elements feel intentionally placed rather than eyeballed. Designers can prototype in Figma and developers can implement in CSS without translation loss.
The single primary color simplifies decision-making. There's no internal debate about whether a button should be blue or purple or green—every affirmative action is #0079BF. The orange (#FF9F1C), purple (#B04EC4), and yellow (#FFC400) accents exist for labels and status indicators, not for structural UI. This keeps the interface legible even when a board is crowded with colorful cards and cover images uploaded by users.
The gray ladder (#FFFFFF → #FAFBFC → #F4F5F7 → #E3E8ED) provides just enough contrast to separate nested containers—board from list, list from card—without resorting to heavy borders. Cards sit on #FFFFFF and cast subtle shadows; lists sit on #FAFBFC; the board canvas uses #F4F5F7; the outer app shell uses #E3E8ED. You perceive the hierarchy before you consciously read it.
The type scale avoids half-steps. Moving from 14px to 16px to 20px to 32px produces clear jumps in weight without the ambiguity of 15px or 18px sizes. Developers can map these to CSS custom properties (--text-sm: 14px, --text-base: 16px, --text-lg: 20px, --text-2xl: 32px) and apply them semantically.
What a builder can borrow
Start with a 4px or 8px spacing base and stick to it. Define your scale explicitly—4, 8, 16, 24, 32, 48, 64, 96—and resist the urge to add 12px or 20px exceptions. Use CSS custom properties or design tokens so the scale is enforced in both design and code. If something feels too tight at 16px and too loose at 24px, the problem is likely elsewhere (type size, line height, container width), not the spacing system.
Limit your primary action color to one. If you need additional accent colors for labels, tags, or alerts, keep them out of buttons and navigation. A single affirmative color trains users to recognize "this is the thing you probably want to click" without reading every label.
Build a gray ladder with four to five stops maximum. Define them by role—surface, container, border, disabled, text—rather than by arbitrary lightness values. This makes it easier to implement dark mode later, since you can swap the entire ladder rather than hunting for every hex code.
For motion, default to 200-250ms transitions with ease-out timing. Reserve longer durations (350-400ms) for height animations like accordions, where the content needs time to flow into view. Keep hover transforms small—2px vertical lifts are enough to signal interactivity without making the interface feel bouncy.
Trello's design system proves that constraint is generative. A tight palette, a disciplined grid, and a handful of reusable patterns create an interface that works for solo freelancers and Fortune 500 teams alike.