Reference pack

Compare the same shell across three treatments

Use this guide to compare light, dark, and dusk against one constant specimen, then validate the choice in the design system.

Theme overview

Use themes to judge hierarchy, contrast, and surface treatment without changing the route contract.

  • Keep navigation order stable while you compare treatments.
  • Check focus states, muted surfaces, and dense cards in each tone.

Light theme

Best for editorial reading, documentation, and mixed-content dashboards.

  • Use light as the baseline for editorial readability and documentation checks.
  • Confirm low-emphasis surfaces still carry enough structure before you judge the palette a success.

Dark theme

Best for low-light use, denser control surfaces, and contrast-discipline checks.

  • Verify focus states, borders, and muted copy still separate clearly on denser surfaces.
  • Check that status colours stay disciplined rather than becoming the main source of hierarchy.

Dusk theme

Best for more expressive brand work where the interface still needs a calm reading rhythm.

  • Use dusk when you want more character without losing utility.
  • Watch for accent colour overtaking structure in compact cards, filters, and notices.

How to review theme changes

Walk the same routes in the same order, compare the weak signals first, then use the design system to confirm what changed deliberately.

  • Navigation, route access, CTA placement, and content structure should stay stable.
  • Only treatment, emphasis, and mood should move between the three variants.