Swatch 4.0 color-system rebuild: direct palette colors, broad roles, simpler themes, and stronger dark mode.

This is for testing only.

SWATCH 4.0 THEME PREVIEW

Theme class

Nested theme class

Light preview

Theme preview

Build safer color pairings

Test default text shifts against the selected background.

This builder helps decide which text, border, button, inline link and nested container colors should be paired when a background color class is used.

  • Default circle icon
  • Save orientation date
  • Find the advising office
  • Submit final forms
  • Download your checklist

Nested surface

Backgrounds can overlap

Use this nested card to test how a panel color behaves inline link when it sits inside another color surface.

Dark preview

Theme preview

Build safer color pairings

Test default text shifts against the selected background.

This builder helps decide which text, border, button, inline link and nested container colors should be paired when a background color class is used.

  • Default circle icon
  • Save orientation date
  • Find the advising office
  • Submit final forms
  • Download your checklist

Nested surface

Backgrounds can overlap

Use this nested card to test how a panel color behaves inline link when it sits inside another color surface.