Weavy has great possibilities for styling and making each product match your styling. Everything is designed around Material Design, which is very customizable to fit into different environments.

Material design

All of our design is based on Material Design v3, so it's a great start to get to know their concepts and guides. MD 3 is very well adapted to dark theming and other custom visual modes. They use design tokens for setting colors and properties. Design tokens are used as CSS variables in the stylesheets.

We recommend generating colors tones using Material Theme Builder to get matching color tones and proper dark mode out of the box. This will usually meet Web color contrast standards to get minimum contrast ratio of 3:1.

Material design: Color & accessibility


We have common styling for all web based UI kits and any customization you make in one kit can be used in another. You need to make sure that you include provided stylesheets in the UI kits. The stylesheets in the JS UI kit are loaded automatically.

Usually the basic styles, such as font and some colors are inherited from your environment, but you may also set basic styling using CSS custom properties (also known as CSS variables). The CSS custom properties can set both font styling and provide a full color palette. The font and colors will then be used without the need of any additional styling.

If you already are using Material 3 colors, you can just pass them on to Weavy. In other cases you can just use the Material theme builder to generate a full palette from your own brand colors. We have also built this functionality into the Javascript UI kit so you just have to provide a brand color to automatically generate a full palette.

Whenever you need to customize the styling further all styles are meant to be easily overridable using your own stylesheet. For the Javascript UI kit we also have supporting JS functions for setting styles.

Weavy Docs