Skip to content
Academy
0/15

Routes
On this page

Auditable architecture · Unit 4 of 5

The visual contract is executable

A CSS class isn't enough of a contract. Milpa Design documents anatomy, states, tokens, accessibility, motion and examples, and the gates check that the published package preserves those promises.

Intermediate to senior35 min

By the end, you'll be able to

  • Read structure, states and a11y as a contract
  • Check dark/light parity

Understand

A CSS class isn't enough of a contract. Milpa Design documents anatomy, states, tokens, accessibility, motion and examples, and the gates check that the published package preserves those promises.

See

Measure the contract

Inspect AA contrast and change surface without altering the content.

Open artifact

Do

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

terminal
$npm test
Check @milpa/design

Verify

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

Criteria assessed

  • The component keeps its meaning without relying on color alone.
  • The consumed version is pinned and doesn't follow main by accident.

Graded assessment

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

0 attempts
Question 1 of 3A gate shows approved in green and rejected in red, but both states carry the same text and expose no accessible state. The background contrast passes. Can the contract be considered met?
Question 2 of 3Academy looks correct today by loading CSS from Design's main branch. Which change makes that dependency auditable?
Question 3 of 3A new class produces the expected screenshot in dark, but has no *.contract.json, no light case and no reduced-motion fallback. What is its correct status?

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

Primary sources

Content verified: 2026-07-10