Material Design is Google’s design system. It’s things like colors, icons, and typography, but also patterns, animation, and principals.

There are implementations of Material Design, like Angular Material, which you can also work with on CodePen. They even have an account for their own demos.

Brand new on the Material Design site is the Color Tool.

It allows you to pick colors from the Material Palette, or entirely custom colors, and it shows you how that might look inside an UI:

Plus an accessibility audit, which warns you that certain colors of text have contrast problems for legibility (so don’t use them):

Then, click the < > button in the upper right to hop right over to CodePen with your chosen colors and play with components.

This uses our Prefill API, which is free and available to anyone! It’s kinda like our templating URL structure:

You can create a URL that opens a new Pen based on an existing one like:

Only with the Prefill API, no Pen has to exist for it to work, you can send code from anywhere.