Material Design 3 — Vanilla CSS

Overview

Implement Material Design 3 using only CSS custom properties and semantic classes. No framework dependency. This is the canonical approach used by all other M3 skills in this repository.

Keywords: Material Design 3, M3, vanilla CSS, CSS custom properties, design tokens, Beer CSS, CSS framework, no framework

When to Use

• Static sites or simple web apps
• Any project where you want zero dependencies
• When you need full control over every design token
• As a reference implementation for other frameworks
• Rapid prototyping without build tools

Setup

Define M3 tokens as CSS custom properties: