Get started

Start building with Jolu Design System in minutes. Add the CSS, use the components, and customise with tokens.

rocket_launch

1. Install

Include the CSS files in your HTML document. You can load them from a CDN or host locally.

<link rel="stylesheet" href="/css/tokens.css">
<link rel="stylesheet" href="/css/components.css">

2. Add fonts

Jolu uses Google Sans and Roboto with Material Symbols. The font import is included in tokens.css. No extra steps needed.

3. Use components

Add M3 components to your markup using BEM-style classes:

<button class="md-button md-button--filled">
  Click me
</button>

<label class="md-switch">
  <input type="checkbox">
  <span class="md-switch__track"></span>
  <span class="md-switch__handle"></span>
</label>

4. Customise theme

Override CSS custom properties to create your own theme:

:root {
  --md-ref-palette-primary40: #6750a4;  /* your primary */
  --md-ref-palette-primary80: #d0bcff;  /* your primary light */
}

5. Dark mode

Toggle dark mode by adding data-theme="dark" to the root element:

document.documentElement.setAttribute('data-theme', 'dark');

What's included

deployed_code

tokens.css

Color palettes, type scale, shape, elevation, motion tokens

widgets

components.css

30+ M3 components ready to use

code

main.js

Theme toggle, tabs, dialogs, scroll reveal