Design Foundations
The rules, principles and concepts used to create work that is useful, understandable and worth trusting.
- Cards:
- 6
- Chapters:
- 3
- Time:
- about 9 minutes
In this module
- 1Principles of Design2 cards
- 2Colour Theory2 cards
- 3Typography2 cards
Sample cards
Exactly what you would swipe through in the app — one idea per card, with the example that makes it stick.
Principles of Design
Visual hierarchy
Hierarchy is the order the eye travels in. You build it with size, weight, colour and space — not with more elements. If everything is emphasised, nothing is.
On a pricing page where the plan name is 14px and the price is 40px, the eye lands on cost first — exactly where the decision happens.
Principles of Design
Contrast
Contrast separates what matters from what surrounds it. Push differences hard — a 10% size jump reads as a mistake, a 60% jump reads as intent.
Two greys 5% apart look like a rendering bug. Two greys 40% apart look like a label and a value.
Colour Theory
Building a palette
Most interfaces need one accent, one neutral ramp and two states. Everything else is decoration you will have to maintain forever.
A product that ships with a single accent and nine neutrals looks designed rather than decorated. The restraint is the craft.
Colour Theory
Content & accessibility
Body text needs 4.5:1 against its background; large text and UI edges need 3:1. Check the token, not the screenshot.
A muted grey that passes at 18px semibold will quietly fail at 14px regular — the same hex, two different verdicts.
Up next
UX Research