Containers for content. Pick by intent: card for content groupings, callout for editorial asides, alert for state messages, banner for global persistent notices, modal for tasks that demand focus, tooltip for at-a-glance hints.
Content groupings. Default e-1; raise to e-2 on hover for clickable cards.
Hairline ring + small drop shadow. Used for grouping related content.
Read more →Editorial: asides, notes, warnings inside running prose.
In-page state messages. Inline; can be dismissable.
Your assessment is saved. You can return to complete it later from the dashboard.
Your Grade-2 certificate is now visible on your public page.
Sections 4, 6, and 8 have unanswered questions. You can submit a partial assessment with caveats.
We couldn't save your assessment. Please retry, or contact us if the problem persists.
Global persistent notices. Top of viewport, full bleed.
Tasks that need focus. Always have a primary action and a way to dismiss.
Once submitted, your grade is locked for 90 days. You can update disclosures during that window but not change the underlying answers.
Tooltip: short text only. Popover: rich content, can have actions.
Reasoning is disclosed: the public can see how decisions were reached, not just that AI was used.
Read the spec →