Skip to content
aiarabicdev
Design systems

Material Web

Material Design as standard web components

Material Web implements Material Design 3 as framework agnostic web components, with the dynamic colour system that generates a full palette from a single source colour. It is the most rigorously specified system on this shelf.

FreeApache-2.0TypeScriptSelf hostable

The colour system is the interesting part

Material 3 generates tonal palettes algorithmically from one seed colour, producing surfaces, containers and text colours with contrast relationships already guaranteed. Reading how that works is valuable whether or not you use the components.

It solves the problem most hand built palettes get wrong, which is that a colour picked for a button rarely has a usable set of tints and shades behind it.

The recognisability problem

Material is the most identifiable design language in software. A product built on it reads as an Android application, which is exactly right sometimes and a liability otherwise.

Check the current status of the project before committing. Its scope and roadmap have shifted more than once, and web components integrate into React with more friction than a React library.

Reach for it when

  • the product should feel native on Android
  • you want a colour system with contrast guarantees built in
  • framework agnostic web components suit your stack

Watch out for

  • Material is instantly recognisable, which is a strong branding decision
  • the project's scope and roadmap have changed more than once, so check its current status
  • web components in React need wrappers and event handling care
NEXT TO IT ON THE SHELF

Compare with these

@arabic_Intelligence

New entries, as they land

One channel. New tools when they are added, with the caveat included. No daily digest, no course, nothing to buy.

Join the Telegram

Free. No email required.