MallaDocs
HomeQuickstartOpen Malla

Create a design system

Set up tokens and fonts, build classes and combo classes, and make a button component with instances and overrides.

User guide
Intermediate25 min

You will build: Brand tokens, a button class with a secondary combo class, and a button component placed as instances across a page

Read first: Build a landing page

In this tutorial you set up the building blocks that keep a site consistent: tokens for your brand colours, fonts and spacing, classes that reuse a look, and a component that reuses a structure. At the end, changing one token or one component updates the whole site. Start from any page with a few buttons, for example the page from the Build a landing page tutorial.

Create a design systemVideo coming soon. The written steps below cover everything.
Create a design system· 9 min

Set up tokens

  1. Open the Tokens tab

    The inspector on the right has three tabs: Design, Interactions and Tokens. Open Tokens. It has three sections: Colors, Spacing and Fonts. Tokens belong to the site, so every page shares them.

  2. Add your brand colours

    In Colors, press + (Add color token). A token named color appears. Rename it to brand and pick your main colour in the colour field next to the name. Add two more: ink for text and surface for backgrounds.

  3. Add a spacing scale

    In Spacing, press + (Add spacing token) and add a few steps, for example sm at 8, md at 16 and lg at 32.

  4. Add your fonts

    In Fonts, open Add font… and pick a Google font for headings, for example Google · Inter. For Google fonts, the token shows the weights you can turn on or off. Add a second font for body text if you want one.

Checkpoint

The Tokens tab lists three colours, three spacing steps and at least one font.

Use tokens in styles

  1. Apply a colour token

    Go back to Design and select the page's button. In Fill, click the colour swatch and pick brand from the token palette. The field now shows the token name instead of a hex value.

  2. Apply a spacing token

    In Layout → Padding, press the variable icon (Use a spacing token) and pick md. Padding, Margin and Gap all accept spacing tokens.

  3. Apply a font token

    Select a heading. In Typography → Font, the font tokens are listed first. Pick the one you added.

  4. Change a token

    Open Tokens and change the colour of brand. Every element that uses it updates at once. To break the link on one element, press Detach token next to the token name; the element keeps the current value.

Build a button class

  1. Add a class

    Select the button. In the class bar at the top of the Design tab, type btn in Add class… and press ↵. A .btn chip appears.

  2. Style the class, not the layer

    Below the chips, set Style to Class .btn (or click the chip). Now set the fill, the padding, a Radius in Border and the font. These styles live on the class, so every element with .btn gets them.

  3. Add a hover state

    With the class still targeted, pick Hover in the state bar above the sections and change the fill a little. Pick Default to go back.

  4. Reuse the class

    Select another button, type btn in Add class… and press ↵. The class name is suggested as you type. The button takes the whole look at once.

Add a combo class

  1. Create the combo

    Select the second button. Type is-secondary in Add class… and press ⇧↵. Shift+Enter creates a combo class on top of the last class, so .is-secondary only applies together with .btn.

  2. Style the difference

    Set Style to Class .is-secondary. Change only what differs: a transparent fill, a border in brand and brand text. Everything else still comes from .btn.

  3. See it propagate

    Change the radius on .btn. Both buttons follow, and the secondary one keeps its own fill and border.

Checkpoint

The page has a primary and a secondary button. Both share the base .btn style, and the secondary one adds its own look.

Make a button component

  1. Create the component

    Select the primary button and press ⌘⌥K, or right-click it and choose Create component. The button moves into a new component, and an instance takes its place on the page.

  2. Name it

    Open the Components tab in the left sidebar. Right-click the new component, choose Rename and call it Button.

  3. Place instances

    Drag Button from the Components tab onto the page, or press the + on its row (Insert Button). Place two or three instances.

  4. Override the text

    Select one instance and double-click its text. Type a new label, for example Book a call. The new text is an override: it applies to this instance only.

  5. Read and reset overrides

    With the instance selected, the Instance section lists its overrides. Press the reset arrow next to an override to go back to the component's value.

  6. Edit the component

    Press Edit component in the Instance section and change the button, for example its padding. Every instance updates, and overridden text stays as it is.

Done

Your site has brand tokens, a .btn class with a secondary combo, and a Button component placed several times with its own text on each instance.

What you learned

  • Tokens hold your brand colours, spacing and fonts in one place; changing a token updates every element that uses it.
  • Classes share a look, combo classes add a variation on top of a base class, and states such as Hover work on classes too.
  • Components share a structure; each instance can override its text and still receive every other change.

Keep going with the next tutorials, or read the guides behind this one:

Classes and tokensReusable classes, combo classes, design tokens and fonts that keep a whole site consistent.ComponentsBuild once, reuse everywhere: components, variants, instances and overrides.Layout and stylingFlex, grid and free layouts, the style sections of the inspector, breakpoints and states.