Design system · Code · 2022

A multi-brand design system in Vue

The take-home test for Meiuca’s hiring process, in January 2022. Meiuca sent the layout in Figma, and I built the whole system in code: tokens, components that switch brands through configuration, documentation in Storybook and visual tests.

Company: Meiuca hiring process
Role: Tokens, components, documentation and visual tests
Team: Just me
Timeline: January 2022
Tools: Style Dictionary, Vue, TypeScript, Storybook, Loki
Outcome: Led to my hiring at Meiuca, a design systems consultancy

Context

The take-home test for the hiring process at Meiuca, a design systems consultancy whose clients include Itaú and Banco BV. Meiuca sent a Figma file with the layout, and the test was to turn it into a design system in code. The project already had two ideas I still use today: tokens as the single source of truth and components that switch brands through configuration.

The Storybook is in Portuguese, as it was built for a Brazilian company.

Problem

Building a small set of components that could serve more than one brand without being copied, documented in a way that someone else could use on their own.

My role

Starting from Meiuca’s Figma, I did everything on my own: the tokens, the components, the Storybook documentation and the visual tests. The code is in the meiuca-test repository on GitHub.

Process

The system has a single path, from value to component:

1. Tokens in JSON86 values in 12 categories, in a single file (properties/tokens.json).
↓
2. Style DictionaryTurns the JSON into CSS variables and a TypeScript enum. The same value serves the styles and the code.
↓
3. Base componentsButton, title, subtitle, paragraph and shape. They only read tokens.

4. Composite componentThe content card, built only from the base components.

5. Multi-brandWhatever changes between brands comes in through props. Same component, different brand.
↓
6. Storybook + LokiEach state documented as a story, and each story compared with a reference image to flag visual changes before the merge.

Token category	Count
Shadow	16
Spacing (inset and squish)	25
Font size, weight and family, line height	19
Brand and neutral color	10
Radius, border and opacity	16

Live Storybook: browse the components and change their properties Open the Storybook in full screen ↗

The original Storybook, compiled from the 2022 code.

Decisions

One token file as the single source What I saw
The same color, spacing or font value had to serve both the CSS and the TypeScript code.
What I decided
Put the 86 values, in 12 categories, in a single properties/tokens.json, and let Style Dictionary generate the CSS variables and the TypeScript enum.
Why
Each value lives in one place, and a change reaches the styles and the code at the same time.
The brand comes in through props What I saw
The components had to serve more than one brand without being copied.
What I decided
Whatever changes from one brand to another, such as the button color, comes in through props. The base components only read tokens, and the content card is built only from them.
Why
It’s the same component for another brand, with no duplicated code.
Visual testing in Storybook What I saw
In a shared system, a small change can alter how several components look without anyone noticing.
What I decided
Document each state as a story and compare each story with a reference image, using Loki.
Why
Any visual change shows up before the merge.

Outcome

The test led to my hiring at Meiuca. Looking back at the project today, I would do three things differently.

Contrast: the default button uses white text on the orange #F04E23, at 3.6:1, below the 4.5:1 minimum. Today every text color pair goes through an automated check, as in this portfolio’s system.
Brand as a theme: passing the color to each component works, but it spreads the decision across all of them. Today I would use semantic tokens with one mode per brand, as I did with the dark theme in the Appmax design system.
Font in Storybook: Archivo was in the tokens but wasn’t loaded, so Storybook showed everything in Times. I fixed it for this publication.