Final assessment

Twelve questions across the whole course. Score 70% or more to pass and unlock your certificate. You can retake it as often as you like.

Finish every lesson to earn the certificate — you can take the assessment any time.

Northwind wants Tidewater’s marketing hero to be dark while the rest of the page stays light. Which setup achieves this with no component changes?

Set data-theme="dark" on the hero section, with dark tokens under a bare [data-theme="dark"] selector and component tokens declared on component selectors.
Add a .dark class to every component inside the hero.
Load a second stylesheet for the hero section.
Use filter: invert(1) on the hero.

Which file content would a DTCG 2025.10 tool reject?

A group with "$type": "color" containing tokens without their own $type.
A token whose $value is "{color.blue.600}" where color.blue.600 is a token.
A color token with colorSpace, components and an optional hex.
A token named space.inset inside a space group.

A Button’s API is variant, size, loading, startIcon, endIcon, plus all native button attributes. A team needs a Button that opens a menu. What should the system do?

Add a menuItems prop to Button.
Provide a composed MenuButton built from Button and a Menu, following the WAI-ARIA menu button pattern.
Tell the team to build it from scratch with a <div>.
Add a isMenu boolean to Button.

In Northwind’s token pipeline, why is the dark theme built with primitives in include and only the dark semantic file in source, filtered on isSource?

Because include files are minified.
Because Figma exports only dark modes.
So references resolve against primitives while only the remapped semantic tokens are written under the dark selector.
Because dark mode doesn’t use primitives.

Which situation calls for aria-disabled="true" rather than the disabled attribute?

A Submit button while the form is being sent, with no explanation needed.
A decorative button that never does anything.
A button hidden on mobile.
A Save button that must stay focusable so keyboard users can reach the explanation of why it’s unavailable.

The light-dark() CSS function is suggested as a replacement for Northwind’s theme token blocks. What’s the accurate assessment?

It handles two-mode color values well but can’t express brands, density or more than two modes, so token remapping is still needed.
It replaces custom properties entirely.
It only works in Figma.
It requires JavaScript to switch modes.

After 5.0.0 removes the deprecated kind prop, the billing team can’t upgrade for two months. What does Northwind’s deprecation policy give them?

Nothing; they must upgrade immediately.
A private fork of 5.0.0 with kind restored.
Bug and security fixes on 4.x for six months, so they can upgrade on their own schedule.
A new 5.0.1 that brings kind back.

Visual baselines were generated on a designer’s Mac and CI runs on Linux. Every text-heavy story fails by a few pixels. What’s the right fix?

Raise the diff threshold until the tests pass.
Generate and compare baselines in the same CI environment.
Disable visual tests for text-heavy stories.
Run visual tests only on designers’ machines.

A contributor’s new Combobox has stories only for its default and hover states. What should the review ask for?

Nothing more; two stories are enough to document it.
A longer description in the docs.
A screenshot of each state in the pull request description.
Stories for every cell of its state matrix, including focus, open, disabled and invalid.

Which description of the DTCG 2025.10 release is accurate?

The first stable version of a W3C Community Group report, implemented by tools such as Style Dictionary and Figma’s variable import and export.
A W3C Recommendation that browsers implement natively.
An early draft with no tool support yet.
A proprietary Figma format.

The dispatch app shows Northwind and Tidewater sections side by side, and Tidewater sections still use Inter for headings even though [data-brand="tidewater"] sets --nw-brand-font-heading. What fixes it?

Add !important to the Tidewater font token.
Load the Georgia font file.
Re-declare the semantic mappings, including --nw-font-heading, under [data-brand] as well as :root.
Give Tidewater headings their own class.

Which combination of signals gives the most trustworthy picture of a design system’s health?

Number of components in the library.
Stars on the documentation site’s repository.
Total pull requests merged per month.
Component adoption, token coverage, version lag and team satisfaction, tracked as trends together.

12 questions unanswered