Classes and tokens

Design tokens and classes turn a page of one-off styles into a design system. Tokens hold the values, classes hold the rules, and local styles handle the exceptions.

Design tokens

Open the Tokens tab of the inspector to edit the site’s colours, fonts and spacing. Each token becomes a CSS variable, and style fields show token chips you can pick instead of raw values.

:root {
  --color-brand: #fe5900;
  --font-heading: Inter;
  --space-md: 16px;
}

• Rename a token and every reference across pages, components, classes and other tokens is rewritten. It is one undo step.
• Delete a token in use and Malla tells you how many places use it, then replaces each reference with the token’s value, so nothing loses its style.

Fonts

Font tokens pick a Google font and the weights you need. Published sites load only those weights, with font-display: swap.

Classes

A class is a named, reusable set of styles with its own breakpoints and states. The class bar above the inspector sections lists the classes on the selection. Type to add an existing class or create a new one.

1. Create a class

   Select an element, type a name such as card in the class bar and press Enter.

2. Style the class

   Make sure the style target is the class, not local styles, then edit. Every element with card updates.

3. Reuse it

   Add card to other elements. Use local styles only for true one-offs.

Combo classes

Add a second class to an element that already has one and you get a combo class: a variation that builds on its parent. It compiles to a more specific selector, so it reliably overrides the base class without affecting other uses.

.btn { padding: 12px 20px; background: var(--color-brand); }
.btn:hover { opacity: .9; }
.btn.btn-ghost { background: transparent; }   /* combo class */

Good practice

• Put colours, fonts and spacing in tokens; reference tokens from classes.
• Name classes for their role (card, heading-xl), not their look (orange-box).
• Use combo classes for variants (btn + btn-ghost) and components for repeated structure.
• Unused classes are left out of the published CSS automatically.