Home

Introduce

@sandlada/material-design-css is a CSS library for Material Design. Each style is obtained and written from Material Design 3. Developers can easily use Material Design design tokens such as text-on-primary, bg-surface-container, title-medium, shape-large, etc. through this style library.

CSS styles utilities include:

• Color
• Palette
• Prebuilt Colors
• Prebuilt Palettes
• Motion
• Shape
• Spacing
• Typography

TailwindCSS v4 is also supported!

Installation

npm i @sandlada/material-design-css

Import

If you are using a development environment such as Vite, you can import the css style file through import in the JS/TS file:

// TypeScript / JavaScript Format

/**
 * Load preset before color or prebuilt-color utilities.
 *
 * :root:not([dark]) {
 *     color-scheme: light;
 * }
 *
 * :root[dark] {
 *     color-scheme: dark;
 * }
 */
import "@sandlada/material-design-css/preset.css"

// text-on-surface & bg-surface
import "@sandlada/material-design-css/color/utilities.css"

// See more details on the /prebuilt-colors page.
import "@sandlada/material-design-css/prebuilt-colors/tonal-spot/h0-2025.css"

// text-primary-0 & bg-primary-100
import "@sandlada/material-design-css/palette/utilities.css"

// Prebuilt Palettes. See more details on the /prebuilt-palettes page.
import "@sandlada/material-design-css/prebuilt-palettes/tonal-spot/h0-2025.css"

// display-large
import "@sandlada/material-design-css/typography/utilities.css"
import "@sandlada/material-design-css/typography/variables.css"

// rounded-medium
import "@sandlada/material-design-css/shape/utilities.css"
import "@sandlada/material-design-css/shape/variables.css"

// animation-easing-expressive-fast-spatial & transition-easing-expressive-fast-spatial
import "@sandlada/material-design-css/motion/utilities.css"
import "@sandlada/material-design-css/motion/variables.css"

// spacing utilities
import "@sandlada/material-design-css/spacing/utilities.css"
import "@sandlada/material-design-css/spacing/variables.css"

If you prefer to use CSS files to import css style files:

/* CSS Examples */
@import "@sandlada/material-design-css/preset.css";
@import "@sandlada/material-design-css/color/utilities.css";
/* ... */

Prebuilt Colors

Prebuilt colors are ready-made color palettes generated by Material Design’s color system. Each CSS file contains light/dark schemes and three contrast levels built in.

import "@sandlada/material-design-css/prebuilt-colors/tonal-spot/h0-2025.css"

Toggle the dark attribute on :root to switch between light and dark themes, or use low-contrast / high-contrast attributes to adjust contrast.

Prebuilt Palettes

Prebuilt palettes provide raw reference tonal palettes generated by Material Design’s color system. Unlike prebuilt colors, these are not semantic color schemes — they are low-level palette data you can use to build custom designs.

import "@sandlada/material-design-css/prebuilt-palettes/tonal-spot/h0-2025.css"

Then use the palette tokens in your styles:

.my-element {
    background-color: var(--md-ref-palette-primary-40);
    color: var(--md-ref-palette-primary-90);
}

For detailed prebuilt palette usage, naming conventions, and examples, see the Prebuilt Palettes page.

TailwindCSS v4

@import "tailwindcss";

/**
 * Optional ready-made palette.
 * Replace the path with any file under prebuilt-colors/.
 */
@import "@sandlada/material-design-css/prebuilt-colors/tonal-spot/h0-2025.css";
@import "@sandlada/material-design-css/prebuilt-palettes/tonal-spot/h0-2025.css";

/**
 * bg-primary
 * text-on-primary
 */
@import "@sandlada/material-design-css/color/tw.css";

/**
 * bg-primary-90
 * text-primary-10
 */
@import "@sandlada/material-design-css/palette/tw.css";

/* rounded-medium */
@import "@sandlada/material-design-css/shape/tw.css";

/* spacing */
@import "@sandlada/material-design-css/spacing/tw.css";

/*
 * display-large
 * font-display-large
 * text-display-large
 * tracking-display-large
 * leading-display-large
 * font-weight-display-large
 */
@import "@sandlada/material-design-css/typography/tw.css";

/**
 * ease-emphasized
 * duration-[var(--duration-medium1)]
 */
@import "@sandlada/material-design-css/motion/tw.css";

@layer base {
    :root:not([dark]) {
        color-scheme: light;
    }
    :root[dark] {
        color-scheme: dark;
    }
}

Usage

Copy this code into your configured project and you will see a button with color and rounded corners.

<button class="rounded-medium bg-primary text-on-primary px-4 py-2">
    A rounded button
</button>

Pages

Now that you have completed the installation and import, go to the following page for more usage tutorials:

• Color
• Palette
• Prebuilt Colors
• Prebuilt Palettes
• Motion
• Shape
• Spacing
• Typography