Totalis

Designing the next primitives for trading on anything

Members

1 Designer, 1 Design Advisor, CEO + CTO

Timeline

Jan - May 2026

Role

Contract Product Designer

Totalis

Designing the next primitives for trading on anything

Members

1 Designer, 1 Design Advisor, CEO + CTO

Timeline

Jan - May 2026

Role

Contract Product Designer

Totalis

Designing the next primitives for trading on anything

Members

1 Designer, 1 Design Advisor, CEO + CTO

Timeline

Jan - May 2026

Role

Contract Product Designer

Overview

Bringing order to a system of Theme Sets & Design Variables

Persona develops infrastructure for businesses to verify individuals and organizations, trusted by the world's leading companies. During my 3-month internship there, I shipped a variety of foundational features that has been adopted widely, but my primary focus was a complex architectural pivot: Theme Sets & Design Tokens.


I led the design of a scalable system to help massive B2B2C organizations manage their brand configurations centrally, eliminating the need to manually update hard-coded values across thousands of templates.

The Problem

Customers were repeating the same decisions hundreds of times

As Persona's B2B2C customers scaled, their branding systems didn't. Instead of defining a visual property once, customers were forced to repeat the exact same values across hundreds of isolated templates. Branding decisions became repetitive, difficult to maintain, and prone to inconsistency.

Let's have a look at Twilio

The color #0263E was repeated in

1000x templates
435x color.primary
30 theme sets

The problem became even more complex for B2B2C customers, where different businesses needed to dynamically apply their own branding to the same experience.

How might we…

help builders define a value once and reuse it across Persona?

The intitial proposal

A new layer for reusable values

The initial direction was to create Resources: a central place where customers could define reusable values and reference them throughout Persona.

I explored multiple models for how reusable values could be created, inherited, overridden, and swapped safely.

Option 1

Default values & overrides

A superset with override values layered on

Option 2

Collection + Variants

Borrowed from Figma's design variables

Where it fell apart

Don't we already have the primitive we need?

But the more I explored, the more problems surfaced. A centralized resource layer could easily become a dumping ground for unrelated values. And once values could be overridden or inherited from multiple places, it became difficult to answer a deceptively simple question:

Users where left to question

"Where does this value actually comes from?"

Theme Sets already represented a reusable, brand-specific configuration that could be selected at runtime. Instead of introducing another abstraction, I explored expanding what Theme Sets & design variables could do.

Shaping the architecture

Where should design variables live?

While Theme Sets supported swappable experiences, they lacked granular customization. Design tokens provided the exact semantic architecture we needed, but we had to decide where they should sit within the hierarchy.

Org-level + Scoped tokens

Pro: Greatest flexibility across shared and localized tokens

Con: Most complex to explain and onboard builders

Org-level tokens only

Pro: Global consistency without a layer to maintain

Con: Can't build a reusable, brand-specific token set for B2B2C

Scoped-tokens only

Pro: The implest mental model

Con: Less flexible for one-offs

Scoped-tokens only was the best option

Compared with the combined direction, the ownership was much clearer: brand-specific values lived with the brand context that supplied them. This gave us the behavior the B2B2C use case required, while keeping each brand context independent.

Working around edge cases

How do we prevent runtime errors?

Introducing scoped tokens created a dangerous edge case. If Theme A defined color_primary but Theme B didn't, swapping themes at runtime could leave the template with a broken, unresolved value

We thought about template-level fallnbacks, or adding preflight validation to surface risks before publish

We thought about template-level fallnbacks, or adding preflight validation to surface risks before publish

What if we enforce a shared universal token schema?

When a new token is created, it is automatically added across all Theme Sets. Themes can have completely different visual values, but they will never have different structural shapes, ensuring seamless runtime handoffs.

The final solutions

The final solutions

From architecture to interface

With the system model established, I translated the architecture into the actual builder experience. I explored how builders would create, apply, edit, and understand different token types, including colors, assets, and typography, without forcing them to understand the underlying architecture first.

With the system model established, I translated the architecture into the actual builder experience. I explored how builders would create, apply, edit, and understand different token types, including colors, assets, and typography, without forcing them to understand the underlying architecture first.

Before

A standalone, repeated experience that requires workarounds

After

A shared, reusable system that's adaptive, scalable and consistent

In the Theme Set Editor,

In the Theme Set Editor,

where builders make and manage variables

Token creation

Token creation

The interface now guides the user through defining how that value scales across the entire theme.

The interface now guides the user through defining how that value scales across the entire theme.

Token application

Token application

Once a token exists, applying it needed to feel just as effortless

Once a token exists, applying it needed to feel just as effortless

In the Flow Editor, Inquiry Templates and other surfaces,…

In the Flow Editor, Inquiry Templates and other surfaces,…

where builders reference a variable

Select the primary button and easily apply a design token.

Select the primary button and easily apply a design token.

Creating a reusable font, spacing, weight, or bundle of these variables

Creating a reusable font, spacing, weight, or bundle of these variables

An image asset like logos, graphics, etc can also be turned into a token

An image asset like logos, graphics, etc can also be turned into a token

The next opportunity

Token Management System

Inspired by the industry standard of design systems, I also see a world where there's separate Compare Themes view supports a more advanced job: auditing several brands side by side, reviewing copied values, spotting raw overrides, or performing cross-Theme edits.

Inspired by the industry standard of design systems, I also see a world where there's separate Compare Themes view supports a more advanced job: auditing several brands side by side, reviewing copied values, spotting raw overrides, or performing cross-Theme edits.

──── ୨୧ ────

Key Takeaways

My previous internship was heavily visual—I spent a lot of my time thinking about visual direction, assets, layouts, and how things looked.At Persona, the people pushed me to care just as much about the logic underneath the craft as the craft itself.

The interface was only the tip of the iceberg

What looked like a UI problem was really a systems problem. Changing the relationship between Resources, Theme Sets, tokens, and variants fundamentally changed what the interface needed to be.

What looked like a UI problem was really a systems problem. Changing the relationship between Resources, Theme Sets, tokens, and variants fundamentally changed what the interface needed to be.

Artefacts & diagrams showed invisible trade-offs

I stopped treating diagrams and prototypes as just artifacts for communicating a solution. Each prototype helped expose trade-offs, challenge assumptions, and eliminate weaker models before they became more expensive to build

I stopped treating diagrams and prototypes as just artifacts for communicating a solution. Each prototype helped expose trade-offs, challenge assumptions, and eliminate weaker models before they became more expensive to build

Protyping with Cursor, choosing the right fidelity

This was my first time working in Cursor, and it quickly became one of my most useful tools for exploring ideas. I could make a system interactive in a matter of minutes and experience the consequences of a design direction instead of just imagining them.


But I also learned that high fidelity can make a weak concept feel more resolved than it actually is. It was a lesson knowing when to push the prototype further and when to step back and rethink the idea in the canvas.

This was my first time working in Cursor, and it quickly became one of my most useful tools for exploring ideas. I could make a system interactive in a matter of minutes and experience the consequences of a design direction instead of just imagining them.


But I also learned that high fidelity can make a weak concept feel more resolved than it actually is. It was a lesson knowing when to push the prototype further and when to step back and rethink the idea in the canvas.