Foundation & Token Architecture
When I joined MediBuddy, designers were shipping independently across services, with no shared design foundations to ensure visual consistency.
Goal:
Create a shared language across services
Encode consistency into the system itself
Reduce subjective interpretation of UI decisions
Prepare the system for scale, theming, and future workflows
Tokenisation
Designers directly interacted with semantic tokens instead of primitive values. Primitive tokens existed underneath, but were intentionally hidden from day-to-day usage.
This decision reduced ambiguity.
Designers chose intent (“body text”, “surface fill”, “subtle border”) rather than values (“#FFFFFF”, “#E5E7EB”).
Building Typography System
Setting up a responsive typographic system was crucial in baking in consistency in the system.
We started with selecting a proven typeface for scalable interfaces: Lexend Deca
Defined a responsive Typescale across breakpoints using a scaling and a responsiveness factor.
Tokenised the values into primitive Typographic variables
Now, Instead of exposing raw Tpographic variables to designers, Mozaic used Semantic text styles such as:
Caption
Label
Body
Title
Heading
Each style internally referenced variables for:
Font Family
Font Size
Font Weight
Line Height
Letter Spacing
Paragraph Spacing
Defining Object Styles
We also defined other core foundational elements like Border Width, Border Radius, Elevation etc. in a similar semantic format keeping scalability and headless architecture in mind.
Applied Strategies
As the system evolved, some key decisions were taken
01
Prioritize simplicity over completeness.
To drive early adoption, we avoided over-segmenting tokens. Starting with a lean set of tokens prevented designers from being overwhelmed and allowed the system to scale based on real usage.
02
Embed state tokens in the component.
Tokens for hover, focus, active etc. were baked into components. This hidden semantics approach reduced the decision-making fatigue for designers while ensuring consistency.
03
Enforce Figma-Engineering parity.
Foundations were collaboratively developed to ensure Figma mirrored the codebase exactly. This eliminated handoff friction and accelerating development.
04
Abstract through usage, not theory.
We allowed the system to evolve through active feedback loops. Real-world usages signaled what to add as tokens and semantics across the system.
Topic Deep Dives
Components & Patterns
AI-Assisted Workflows
How Mozaic enabled consistent, system-aligned UI generation using AI tools.