Ready
One shared Theme
Every component uses the same semantic roles.
Read the guideTools / Color
Palette Tester
Assign semantic roles, preview the same Theme in context, and find focused contrast risks.
Theme editor
Focused contrast checks
Preview scene
Vision simulations are approximations applied to the preview only.
1. Theme editor
2. Preview scene
Preview scene
Product website
Navigation, hero content, cards, links, and calls to action.
Desktop
Northstar
Build a calmer product workflow.
A compact example of hierarchy, actions, links, and surfaces working together.
Accessibility audit
All 7 checks pass.
Pass
| Role pair | Ratio | Threshold | Status |
|---|---|---|---|
| Body text on page background Body text / Page background Normal text should reach at least 4.5:1 against the page. | 14.63:1 | 4.5:1 | Pass |
| Heading text on page background Heading text / Page background Large text should reach at least 3:1 against the page. | 17.85:1 | 3:1 | Pass |
| Body text on surface Body text / Surface Normal text should remain readable on cards and panels. | 13.98:1 | 4.5:1 | Pass |
| Primary label on primary fill Primary label / Primary fill Primary actions need readable labels in every state. | 6.70:1 | 4.5:1 | Pass |
| Secondary label on secondary fill Secondary label / Secondary fill Secondary actions also need readable labels. | 14.48:1 | 4.5:1 | Pass |
| Feedback indicators on surface Feedback / Surface The weakest success, warning, or error color must reach 3:1. Weakest role: Success | 4.79:1 | 3:1 | Pass |
| Focus indicator on page background Focus indicator / Page background Keyboard focus must remain visible against the page. | 7.09:1 | 3:1 | Pass |