Workshop 02
Design-System-Driven Build
Stop redesigning every screen. Define the system once and build against it.
Overview
What you will build
A three-page marketing site where every screen shares one enforced design system.
Who it is for
Builders whose projects look good on page one and fall apart by page four.
Before you start
- — You have shipped at least one small app
- — You can describe a look you like in words
- — A project you are willing to restyle from scratch
What you will walk away with
- Write a design system document the builder actually obeys
- Use tokens instead of one-off colours so themes hold together
- Add new pages that inherit the system with no restyling
Resources
Open these in a second tab before you begin.
Instructions
Work through these in order. Where there is a prompt, copy it and fill in the parts in angle brackets.
- 01
Pick a system, do not invent one
Open the Design Library, choose the system closest to your product's mood, and copy the whole file. Starting from a complete system beats assembling one colour at a time.
- 02
Install the system before any pages exist
Paste the system as the first instruction of the project. It becomes the constitution every later prompt is judged against.
Here is the design system for this project. Set it up as the single source of truth — colours, typography, spacing, radius and component styles as reusable tokens, not hardcoded values. <paste the full design system here> Confirm what you created before building any pages.
- 03
Build page one and audit it
Ask for the home page only. Then check every colour and font against the system. Fix drift immediately — drift compounds.
Build the home page using only the tokens from the design system. Do not introduce any new colours, fonts or shadow values. List any place where you had to improvise.
- 04
Add pages two and three without restyling
If a new page needs new visual decisions, the system is incomplete. Extend the system, then rebuild the page.
Add an About page and a Pricing page. Reuse the existing components and tokens exactly. If something is missing from the system, tell me what it is instead of inventing a one-off style.
- 05
Break it on purpose
Switch one token — the accent colour — and reload every page. If only some screens change, you still have hardcoded values to hunt down.
Change the accent colour token to <colour> and nothing else. Every place that uses the accent should update automatically. Report anything that did not.
Build-along
The same journey as milestones, so you can stop at any point and pick it up later. Do not move on until the checkpoint is true.
Milestone 1 — System installed
Tokens and base components exist before any page.
Checkpoint — You can name where the accent colour is defined, once.
Milestone 2 — Home page on system
A finished home page with zero improvised styles.
Checkpoint — No raw hex codes in page code.
Milestone 3 — Three pages, one look
About and Pricing added with no new visual decisions.
Checkpoint — Screens look like siblings, not cousins.
Milestone 4 — Token swap test
One token change reskins the whole site.
Checkpoint — Every page reflects the new accent.
Build Submission
Send two screenshots — before and after the token swap — plus the design system you used.
Submissions are sent by message — nothing is stored on this site.
Submit your buildOther workshops