Home Work About Field Notes Contact
Back to work Design Systems

A unified design language
that boosts consistency

With a new brand identity came the opportunity to build a structured, scalable token system from the ground up. The goal was a transparent architecture that served designers and engineers equally — enabling consistency today and theming flexibility tomorrow.

Scope Token Architecture
Context FreeAgent · Rebrand
Category Design Systems
Focus Tokens · Theming · Consistency
TIER 1 — CORE TIER 2 — SEMANTIC TIER 3 — COMPONENT blue-50 #1A6BFF yellow-40 #F7C948 font-size-400 16px spacing-200 8px color-background-primary color-interactive-default font-heading-large spacing-component-gap button-bg-primary button-text-primary input-border-default card-padding-default Colour Typography Spacing Border Radius Shadow DESIGN TOKENS · THREE-TIER ARCHITECTURE · THEMING · FREEAGENT REBRAND
Objective

Structured tokens for a new design language

The objective was to create a structured, scalable, and brand-aligned token system reflecting a new identity while enabling consistency, flexibility, and theming across products and platforms.

This meant solving immediate styling needs while laying infrastructure for future requirements — dark mode, accessibility themes, or AI-driven experiences.

Challenges & Goals

No system, no shared language

  • No existing token system — complete lack of clarity regarding token purposes and roles
  • Designers lacked a shared semantic language for spacing, colour, or typography
  • No distinction between core values and semantic roles, making scalability impossible
  • Limited engineering visibility into design decisions, creating friction during handoffs
  • New brand identity needed to be reflected consistently across every product surface
Solutions

A three-tier architecture built to last

We designed a transparent three-tier token system that gave every value a clear purpose and consistent name.

  • Core Tokens: raw values (hex codes, font stacks, pixel measurements) defining the base design language — e.g. blue-50, font-size-400, spacing-200
  • Semantic Tokens: purpose-driven styles with meaningful intent — e.g. color-background-primary, font-heading-large
  • Component Tokens: an optional layer within components allowing targeted overrides where specific treatment is needed
  • Consistent naming conventions across colour, typography, spacing, border, radius, and shadow categories
  • Tokens aligned with CSS layers in collaboration with engineering — shared naming, shared language
  • Full tokenisation of the Figma UI Kit, replacing hardcoded styles with semantic tokens
Process

From audit to adoption

1

Token Audit

Translated brand foundations into token values, reviewing palette changes, typography updates, and spacing scales in collaboration with brand partners.

2

Architecture Design

Created clear variable structures aligned to token tiers with consistent naming and logical grouping supporting Figma variable modes and collections.

3

Engineering Alignment

Collaborated with engineering to validate token names and structures against CSS token layers, ensuring design and code spoke the same language.

4

UI Kit Tokenisation

Replaced all hardcoded styles in the Figma UI Kit with tokens, adding semantic labels to enable component theming and global updates.

5

Documentation & Rollout

Created Notion templates, published FreeStyle guidance, and ran working sessions for designer and engineer onboarding.

Results & Impact

Consistency cascading across the product

🎨

Brand Alignment

Design tokens consistently reflect the new identity across all product surfaces — a single update propagates everywhere.

🌗

Theming Foundation

The architecture supports future needs including dark mode, accessibility themes, and potential product-level branding.

⚡

Increased Velocity

Global token changes — like updating spacing or colours — now cascade through the system and products automatically.

🤝

Improved Collaboration

Shared naming and clearer intent reduced design-development friction, with token purpose and values accessible directly from the system.

Want to talk through this work?

Get in touch →