Skip to content
Academy
0/15

Routes
On this page

Design with Milpa · Unit 1 of 3

The six layers

Tokens name decisions; motion defines movement; primitives resolve controls; components form pieces; artifacts express content; layouts organize pages.

Intermediate25 min

By the end, you'll be able to

  • Recognize the published cascade
  • Choose the right layer for each piece

Understand

Tokens name decisions; motion defines movement; primitives resolve controls; components form pieces; artifacts express content; layouts organize pages.

See

Inspect the visual contract

Relate the visible selector to its contract and its gates.

Open artifact

Do

Run the practice in your checkout and keep the output as evidence.

Open the published npm package

Verify

Show that you can apply the unit. Progress only advances once you pass the assessment.

Criteria assessed

  • Order the six layers by their load contract.
  • Prioritize existing semantic tokens over new visual values.

Graded assessment

Solve the 3 scenarios. This unit requires 3 of 3 correct answers.

0 attempts
Question 1 of 3A page uses controls, cards, code examples and the documentation shell. What is the contractual load order?
Question 2 of 3The team needs to show a code block inside a lesson's shell. Where should it look first for each piece?
Question 3 of 3A product needs a different color identity, but mui-btn's anatomy already solves its case. What is the smallest, most governable first intervention?

Grading validates answers in this browser; it doesn't certify identity.

Primary sources

Content verified: 2026-07-10