Material Design 3

Dynamic Color implementation using Astro, Material Color Utilities, and Tailwind CSS. Change the seed color or theme mode to see the effect instantly.

Primary Container

Used for key components like FABs, active states, or high-emphasis sections.

Secondary Container

Used for less prominent components, chips, or tonal buttons.

Tertiary Container

Used for accents that balance primary and secondary colors.

Surface Variant

Used for decorative elements, dividers, or disabled states.

Sample Pages

Check out how this theme applies to different app scenarios.

Dashboard

Data visualization & cards

Article

Typography & reading

Settings

Forms & controls

Tonal Palettes

The core palette generated from your seed color. Click any color to copy.

Typography & Utility

This generic surface card demonstrates how the system handles neutral colors. The text needs to be legible against the background. Primary colored text draws attention within the content. Error states are also dynamically generated.