From palette to system:
Rebuilding color tokens
Red300
#F0ABAB
Red100
#FADCDC
Red600
#D63131
Red800
#A30000
Red1000
#520000
Red1200
#290000
AAA 10.28
AAA 15.11
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
AA 4.83
AAA 8.21
AAA 15.45
AAA 19.19
Green300
#9AD6BB
Green100
#D5F5E7
Green600
#229461
Green800
#006437
Green1000
#003C21
Green1200
#002112
11.76 AAA
16.69 AAA
Hue 153
Hue 153
Hue 153
Hue 153
Hue 153
Hue 153
5.06 AA
7.29 AAA
12.58 AAA
17.12 AAA
Orange300
#FDD1B2
Orange100
#FFE9D9
Orange600
#F98633
Orange800
#C65300
Orange1000
#632A00
Orange1200
#311400
13.82 AAA
16.57 AAA
Hue 25
Hue 25
Hue 25
Hue 25
Hue 25
Hue 25
7.85 AAA
4.52 AA
11.27 AAA
17.06 AAA
White
#FFFFFF
AAA 18.62
Hue 0
Gray100
#F3F3F3
Gray300
#DADADA
Gray600
#999999
Gray1200
#0D0D0D
Gray1000
#292929
Gray800
#666666
AAA 17.51
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
AAA 13.9
AAA 6.82
AAA 19.43
AAA 14.54
AA 5.74
Blue300
#AACEFC
Blue100
#DEECFF
Blue600
#2B83F7
Blue800
#0057C9
Blue1000
#00357B
Blue1200
#001531
AAA 11.97
AAA 16.24
Hue 214
Hue 214
Hue 214
Hue 214
Hue 214
Hue 214
AA 5.26
AA 6.54
AAA 11.69
AAA 18.23
Yellow800
#F5B400
Yellow1000
#B57900
Yellow100
#FFF3D1
17.57 AAA
Hue 44
Yellow300
#FFE396
15.43 AAA
Hue 44
Hue 44
Hue 40
Yellow600
#FFCF4D
Hue 44
13.22 AAA
10.56 AAA
5.69 AA
Yellow1200
#593900
Hue 38
10.44 AAA
Purple100
#E3CEFF
Purple300
#B78AF2
Purple600
#7030C2
Purple800
#490C97
Purple1000
#310865
Purple1200
#1C053B
13.45 AAA
Hue 266
Hue 266
Hue 266
Hue 266
Hue 266
Hue 266
7.34 AAA
7.26 AAA
11.77 AAA
15.51 AAA
18.51 AAA
Mariana Azambuja
Happy you explored my work!
Context
Celebration is the Design System serving Ambev (Brazil) and AB InBev (global), created to drive consistency, scalability, and operational efficiency across internal digital products.
Since its launch in September 2021, it has expanded to support around 70 products, aligning design and engineering teams around shared standards, reusable components, and streamlined workflows. The system plays a key role in accelerating product delivery while maintaining quality and coherence at scale, with continued growth in adoption across the organization.
Role
Design Lead
Team
1 Designer
2 Developers
Tool
Figma
”Contrast” Figma plugin
Project goal
This project focused on re-architecting Celebration’s color system to address structural limitations and enable long term scalability. The objective was to establish a robust token foundation that could support accessibility standards, improve semantic clarity, and ensure consistent behavior across Light and Dark modes.
By strengthening the color architecture, the initiative aimed to reduce complexity, enhance maintainability,
and provide a flexible framework capable of sustaining the system’s continued growth across products and teams.
Key challenges
Main goals
all products;
. and reusability;
and use cases;
Process
Before initiating the refactor, we defined a consolidation strategy: maintaining a single “Core” theme based on the company’s official brand colors. This decision eliminated the need to revise the remaining 11 department-specific themes and reduced structural complexity within the system.
Before
Core theme
#FFC629
Department-specific themes
#B82E78
#4BA68D
#ABD643
#FA7317
#FD9D1E
#BA0C2F
#803286
#A755F7
#2C589B
#4ECAF0
After
Core theme
#FFC629
Step 2
I began with a structured audit of the existing color tokens, analyzing their architecture, semantic structure, and scalability. The goal was to identify structural inconsistencies, accessibility gaps, and opportunities for refinement.
Key findings included:
Step 3
I began by auditing the existing color scales, mapping each hue to its corresponding semantic tokens and documenting their relationships across the system. This included a structured analysis of contrast variations, evaluating color-on-color and text-on-color combinations to assess consistency and accessibility compliance.
Brand300
Brand400
Brand200
Brand100
Brand500
Brand600
#FFC629
#EBB01B
#F9DC95
#FCECC5
#BC850D
#8A620A
12.36 AAA
9.95 AAA
14.52 AAA
16.6 AAA
Hue 43
Hue 43
Hue 44
Hue 43
Hue 41
Hue 41
6.01 AA
5.48 AA
Danger300
Danger400
Danger200
Danger100
Danger500
Danger600
#C92323
#AE1E1E
#F3C0BE
#FFEAEA
#8E1818
#7A130A
5.6 AA
6.99 AA
12.11 AAA
16.85 AAA
Hue 0
Hue 2
Hue 0
Hue 0
Hue 0
Hue 5
9.15 AAA
10.9 AAA
Warning300
Warning400
Warning200
Warning100
Warning500
Warning600
#FF9040
#DB5C00
#FFD0AD
#FFF0DE
#943E00
#853E00
9.31 AAA
5.54 AA
13.76 AAA
17.37 AAA
Hue 33
Hue 26
Hue 25
Hue 25
Hue 25
Hue 28
7.12 AAA
7.81 AAA
Positive300
Positive400
Positive200
Positive100
Positive500
Positive600
#00B261
#08663B
#D0EFBD
#E1FCE9
#053821
#273F32
7.54 AAA
7.06 AAA
15.51 AAA
17.86 AAA
Hue 138
Hue 97
Hue 153
Hue 153
Hue 153
Hue 148
13.17 AAA
11.39 AAA
Neutral300
Neutral400
Neutral200
Neutral100
Neutral500
Neutral600
#BFBFBF
#666666
#D9D9D9
#FFFFFF
#292929
#0E0E0E
11.41 AAA
5.74 AA
14.87 AAA
21 AAA
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
14.54 AAA
19.3 AAA
Step 4
Following the audit, the next step was to redesign the color scales based on the identified structural gaps. New proposals were developed to ensure consistent hue progression, improved tonal regularity, and expanded tonal range across each color family.
The revised scales were constructed with accessibility criteria embedded from the outset, validating contrast performance across key use cases (text-on-color and color-on-color) and ensuring compliance with established standards.
This phase focused on creating more granular, predictable tonal ramps that could support diverse interface states while maintaining visual cohesion and scalability within the system.
Value
Primitive
Hue
Text color
WCAG
#FFDC7D
Yellow400
Hue 44
14.6 AAA
#FFD666
Yellow500
Hue 44
13.94 AAA
#FFCF4D
Yellow600
Hue 44
13.22 AAA
#EB9393
Red400
Hue 0
8.44 AAA
#E06262
Red500
Hue 0
5.53 AA
#D63131
Red600
Hue 0
4.83 AA
#FCC399
Orange400
Hue 25
12.4 AAA
#FAA466
Orange500
Hue 25
9.77 AAA
#F98633
Orange600
Hue 25
7.85 AAA
#78C4A2
Green400
Hue 153
9.45 AAA
#4DAB81
Green500
Hue 153
6.9 AA
#229461
Green600
Hue 153
5.06 AA
#80B5FA
Blue400
Hue 214
9.16 AAA
#559CF8
Blue500
Hue 214
6.93 AA
#2B83F7
Blue600
Hue 214
5.26 AA
#9D65E5
Purple400
Hue 266
5.02 AA
#8245D1
Purple500
Hue 266
5.64 AA
#7030C2
Purple600
Hue 266
7.26 AAA
#CCCCCC
Grey400
Hue 0
12.1 AAA
#B3B3B3
Grey500
Hue 0
9.26 AAA
#999999
Grey600
Hue 0
6.82 AAA
#FFFFFF
White
Hue 0
21.0 AAA
Step 5
Once the scales were defined and structured, the next step was to determine which tonal steps would be activated in the initial design system implementation. Rather than exposing the entire range, a curated subset of intervals was selected to support core interface use cases (e.g., surfaces, text, borders, states), ensuring clarity and reducing unnecessary complexity.
The non-activated intervals remain intentionally preserved within the primitive layer. These unused steps play a strategic role in maintaining scalability, enabling future expansion, theming flexibility, and the introduction of new semantic tokens without requiring structural refactoring.
The tonal ramps themselves remain identical across Light and Dark modes. The distinction lies in how intervals are mapped at the semantic layer. For example, the surface token in Light mode corresponds to Gray50 (#F7F7F7), while its Dark mode counterpart maps to Gray1100 (#1A1A1A). This approach ensures consistency at the primitive level while enabling contextual adaptation through semantic reassignment.
Value
Primitive
Hue
Text color
WCAG
#FFF3D1
Yellow100
Hue 44
17.57 AAA
#FFE396
Yellow300
Hue 44
15.43 AAA
#FFCF4D
Yellow600
Hue 44
13.22 AAA
#F5B400
Yellow800
Hue 44
10.56 AAA
#B57900
Yellow1000
Hue 40
5.69 AA
#593900
Yellow1200
Hue 38
10.44 AAA
#FADCDC
Red100
Hue 0
15.11 AAA
#F0ABAB
Red300
Hue 0
10.28 AAA
#D63131
Red600
Hue 0
4.83 AA
#A30000
Red800
Hue 0
8.21 AAA
#520000
Red1000
Hue 0
15.45 AAA
#290000
Red1200
Hue 0
19.19 AAA
#FFE9D9
Orange100
Hue 25
16.57 AAA
#FDD1B2
Orange300
Hue 25
13.82 AAA
#F98633
Orange600
Hue 25
7.85 AAA
#C65300
Orange800
Hue 25
4.52 AA
#632A00
Orange1000
Hue 25
11.27 AAA
#311400
Orange1200
Hue 25
17.06 AAA
#D5F5E7
Green100
Hue 153
16.69 AAA
#9AD6BB
Green300
Hue 153
11.76 AAA
#229461
Green600
Hue 153
5.06 AA
#006437
Green800
Hue 153
7.29 AAA
#003C21
Green1000
Hue 153
12.58 AAA
#002112
Green1200
Hue 153
17.12 AAA
#DEECFF
Blue100
Hue 214
16.24 AAA
#AACEFC
Blue300
Hue 214
11.97 AAA
#2B83F7
Blue600
Hue 214
5.26 AA
#0057C9
Blue800
Hue 214
6.54 AA
#00357B
Blue1000
Hue 214
11.69 AAA
#001531
Blue1200
Hue 214
18.23 AAA
#E3CEFF
Purple100
Hue 266
13.45 AAA
#B78AF2
Purple300
Hue 266
7.34 AAA
#7030C2
Purple600
Hue 266
7.26 AAA
#490C97
Purple800
Hue 266
11.77 AAA
#310865
Purple1000
Hue 266
15.51 AAA
#1C053B
Purple1200
Hue 266
18.51 AAA
#F3F3F3
Grey100
Hue 0
17.51 AAA
#DADADA
Grey300
Hue 0
13.9 AAA
#999999
Grey600
Hue 0
6.82 AAA
#666666
Grey800
Hue 0
5.74 AA
#292929
Grey1000
Hue 0
14.54 AAA
#0D0D0D
Grey1200
Hue 0
19.43 AAA
#FFFFFF
White
Hue 0
21.0 AAA
Step 6
Following the audits, structural analysis, and usage mapping, the semantic token layer was defined to translate primitive values into functional application contexts.
Eight core usage categories were established, including surface, background, feedback, text (covering label and placeholder), border, and icon, each representing a distinct interaction and hierarchy role within the interface.
For every category, existing components and templates were systematically reviewed to identify real usage patterns, state variations, and contrast requirements. This ensured that semantic tokens were grounded in practical implementation needs rather than abstract definitions.
Tokens were structured to maintain parity between Light and Dark modes through mirrored semantic logic, allowing contextual adaptation without altering the underlying primitive scales.
#F5B400
Yellow600
--color-surface-brand
Surface
Token
Primitives
--color-surface-inverse
White
Grey1000
--color-surface-disabled
Grey200
Grey800
--color-surface-neutral
Grey100
Grey1200
--color-surface-inverse-hover
Yellow100
Yellow800
--color-surface-active
Yellow300
Yellow600
--color-surface-brand
Yellow600
Yellow600
--color-surface-brand-hover
Yellow300
Yellow800
--color-surface-brand-subtle
Yellow100
Yellow800
--color-surface-brand-tertiary
Yellow100
Yellow1000
Handoff
A structured handoff was conducted to ensure accurate implementation of the new token architecture. Documentation detailed the full token hierarchy, including raw values (hex), primitive tokens, semantic mappings, and usage guidelines, enabling developers to clearly understand the relationship between layers and apply them consistently in code.
On the design side, a comprehensive variable structure was implemented in Figma, reflecting the same primitive-to-semantic architecture defined for development.
Light and Dark modes were configured through variable modes, preserving semantic parity while allowing contextual value mapping.
All existing components and templates were systematically refactored to align with the new token structure, ensuring consistency, reducing hardcoded values, and reinforcing adoption across the system.
Results
Deliverables
From palette to system:
Rebuilding color tokens
Red300
#F0ABAB
Red100
#FADCDC
Red600
#D63131
Red800
#A30000
Red1000
#520000
Red1200
#290000
AAA 10.28
AAA 15.11
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
AA 4.83
AAA 8.21
AAA 15.45
AAA 19.19
Green300
#9AD6BB
Green100
#D5F5E7
Green600
#229461
Green800
#006437
Green1000
#003C21
Green1200
#002112
11.76 AAA
16.69 AAA
Hue 153
Hue 153
Hue 153
Hue 153
Hue 153
Hue 153
5.06 AA
7.29 AAA
12.58 AAA
17.12 AAA
Orange300
#FDD1B2
Orange100
#FFE9D9
Orange600
#F98633
Orange800
#C65300
Orange1000
#632A00
Orange1200
#311400
13.82 AAA
16.57 AAA
Hue 25
Hue 25
Hue 25
Hue 25
Hue 25
Hue 25
7.85 AAA
4.52 AA
11.27 AAA
17.06 AAA
White
#FFFFFF
AAA 18.62
Hue 0
Gray100
#F3F3F3
Gray300
#DADADA
Gray600
#999999
Gray1200
#0D0D0D
Gray1000
#292929
Gray800
#666666
AAA 17.51
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
AAA 13.9
AAA 6.82
AAA 19.43
AAA 14.54
AA 5.74
Blue300
#AACEFC
Blue100
#DEECFF
Blue600
#2B83F7
Blue800
#0057C9
Blue1000
#00357B
Blue1200
#001531
AAA 11.97
AAA 16.24
Hue 214
Hue 214
Hue 214
Hue 214
Hue 214
Hue 214
AA 5.26
AA 6.54
AAA 11.69
AAA 18.23
Yellow800
#F5B400
Yellow1000
#B57900
Yellow100
#FFF3D1
17.57 AAA
Hue 44
Yellow300
#FFE396
15.43 AAA
Hue 44
Hue 44
Hue 40
Yellow600
#FFCF4D
Hue 44
13.22 AAA
10.56 AAA
5.69 AA
Yellow1200
#593900
Hue 38
10.44 AAA
Purple100
#E3CEFF
Purple300
#B78AF2
Purple600
#7030C2
Purple800
#490C97
Purple1000
#310865
Purple1200
#1C053B
13.45 AAA
Hue 266
Hue 266
Hue 266
Hue 266
Hue 266
Hue 266
7.34 AAA
7.26 AAA
11.77 AAA
15.51 AAA
18.51 AAA
Mariana Azambuja
Happy you explored my work!
Context
Celebration is the Design System serving Ambev (Brazil) and AB InBev (global), created to drive consistency, scalability, and operational efficiency across internal digital products.
Since its launch in September 2021, it has expanded to support around 70 products, aligning design and engineering teams around shared standards, reusable components, and streamlined workflows. The system plays a key role in accelerating product delivery while maintaining quality and coherence at scale, with continued growth in adoption across the organization.
Role
Design Lead
Team
1 Designer
2 Developers
Tool
Figma
”Contrast” Figma plugin
Project goal
This project focused on re-architecting Celebration’s color system to address structural limitations and enable long-term scalability. The objective was to establish a robust token foundation that could support accessibility standards, improve semantic clarity, and ensure consistent behavior across Light and Dark modes. By strengthening the color architecture, the initiative aimed to reduce complexity, enhance maintainability, and provide a flexible framework capable of sustaining the system’s continued growth across products and teams.
Key challenges
Main goals
Process
Before initiating the refactor, we defined a consolidation strategy: maintaining a single “Core” theme based on the company’s official brand colors. This decision eliminated the need to revise the remaining 11 department-specific themes and reduced structural complexity within the system.
Before
Core theme
#FFC629
Department-specific themes
#B82E78
#4BA68D
#ABD643
#FA7317
#FD9D1E
#BA0C2F
#803286
#A755F7
#2C589B
#4ECAF0
After
Core theme
#FFC629
Step 2
I began with a structured audit of the existing color tokens, analyzing their architecture, semantic structure, and scalability. The goal was to identify structural inconsistencies, accessibility gaps, and opportunities for refinement.
Key findings included:
Step 3
I began by auditing the existing color scales, mapping each hue to its corresponding semantic tokens and documenting their relationships across the system. This included a structured analysis of contrast variations, evaluating color-on-color and text-on-color combinations to assess consistency and accessibility compliance.
Brand300
Brand400
Brand200
Brand100
Brand500
Brand600
#FFC629
#EBB01B
#F9DC95
#FCECC5
#BC850D
#8A620A
12.36 AAA
9.95 AAA
14.52 AAA
16.6 AAA
Hue 43
Hue 43
Hue 44
Hue 43
Hue 41
Hue 41
6.01 AA
5.48 AA
Danger300
Danger400
Danger200
Danger100
Danger500
Danger600
#C92323
#AE1E1E
#F3C0BE
#FFEAEA
#8E1818
#7A130A
5.6 AA
6.99 AA
12.11 AAA
16.85 AAA
Hue 0
Hue 2
Hue 0
Hue 0
Hue 0
Hue 5
9.15 AAA
10.9 AAA
Warning300
Warning400
Warning200
Warning100
Warning500
Warning600
#FF9040
#DB5C00
#FFD0AD
#FFF0DE
#943E00
#853E00
9.31 AAA
5.54 AA
13.76 AAA
17.37 AAA
Hue 33
Hue 26
Hue 25
Hue 25
Hue 25
Hue 28
7.12 AAA
7.81 AAA
Positive300
Positive400
Positive200
Positive100
Positive500
Positive600
#00B261
#08663B
#D0EFBD
#E1FCE9
#053821
#273F32
7.54 AAA
7.06 AAA
15.51 AAA
17.86 AAA
Hue 138
Hue 97
Hue 153
Hue 153
Hue 153
Hue 148
13.17 AAA
11.39 AAA
Neutral300
Neutral400
Neutral200
Neutral100
Neutral500
Neutral600
#BFBFBF
#666666
#D9D9D9
#FFFFFF
#292929
#0E0E0E
11.41 AAA
5.74 AA
14.87 AAA
21 AAA
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
14.54 AAA
19.3 AAA
Step 4
Following the audit, the next step was to redesign the color scales based on the identified structural gaps. New proposals were developed to ensure consistent hue progression, improved tonal regularity, and expanded tonal range across each color family.
The revised scales were constructed with accessibility criteria embedded from the outset, validating contrast performance across key use cases (text-on-color and color-on-color) and ensuring compliance with established standards.
This phase focused on creating more granular, predictable tonal ramps that could support diverse interface states while maintaining visual cohesion and scalability within the system.
Value
Primitive
Hue
Text color
WCAG
#FFDC7D
Yellow400
Hue 44
14.6 AAA
#FFD666
Yellow500
Hue 44
13.94 AAA
#FFCF4D
Yellow600
Hue 44
13.22 AAA
#EB9393
Red400
Hue 0
8.44 AAA
#E06262
Red500
Hue 0
5.53 AA
#D63131
Red600
Hue 0
4.83 AA
#FCC399
Orange400
Hue 25
12.4 AAA
#FAA466
Orange500
Hue 25
9.77 AAA
#F98633
Orange600
Hue 25
7.85 AAA
#78C4A2
Green400
Hue 153
9.45 AAA
#4DAB81
Green500
Hue 153
6.9 AA
#229461
Green600
Hue 153
5.06 AA
#80B5FA
Blue400
Hue 214
9.16 AAA
#559CF8
Blue500
Hue 214
6.93 AA
#2B83F7
Blue600
Hue 214
5.26 AA
#9D65E5
Purple400
Hue 266
5.02 AA
#8245D1
Purple500
Hue 266
5.64 AA
#7030C2
Purple600
Hue 266
7.26 AAA
#CCCCCC
Grey400
Hue 0
12.1 AAA
#B3B3B3
Grey500
Hue 0
9.26 AAA
#999999
Grey600
Hue 0
6.82 AAA
#FFFFFF
White
Hue 0
21.0 AAA
Step 5
Once the scales were defined and structured, the next step was to determine which tonal steps would be activated in the initial design system implementation. Rather than exposing the entire range, a curated subset of intervals was selected to support core interface use cases (e.g., surfaces, text, borders, states), ensuring clarity and reducing unnecessary complexity.
The non-activated intervals remain intentionally preserved within the primitive layer. These unused steps play a strategic role in maintaining scalability, enabling future expansion, theming flexibility, and the introduction of new semantic tokens without requiring structural refactoring.
The tonal ramps themselves remain identical across Light and Dark modes. The distinction lies in how intervals are mapped at the semantic layer. For example, the surface token in Light mode corresponds to Gray50 (#F7F7F7), while its Dark mode counterpart maps to Gray1100 (#1A1A1A). This approach ensures consistency at the primitive level while enabling contextual adaptation through semantic reassignment.
Value
Primitive
Hue
Text color
WCAG
#FFF3D1
Yellow100
Hue 44
17.57 AAA
#FFE396
Yellow300
Hue 44
15.43 AAA
#FFCF4D
Yellow600
Hue 44
13.22 AAA
#F5B400
Yellow800
Hue 44
10.56 AAA
#B57900
Yellow1000
Hue 40
5.69 AA
#593900
Yellow1200
Hue 38
10.44 AAA
#FADCDC
Red100
Hue 0
15.11 AAA
#F0ABAB
Red300
Hue 0
10.28 AAA
#D63131
Red600
Hue 0
4.83 AA
#A30000
Red800
Hue 0
8.21 AAA
#520000
Red1000
Hue 0
15.45 AAA
#290000
Red1200
Hue 0
19.19 AAA
#FFE9D9
Orange100
Hue 25
16.57 AAA
#FDD1B2
Orange300
Hue 25
13.82 AAA
#F98633
Orange600
Hue 25
7.85 AAA
#C65300
Orange800
Hue 25
4.52 AA
#632A00
Orange1000
Hue 25
11.27 AAA
#311400
Orange1200
Hue 25
17.06 AAA
#D5F5E7
Green100
Hue 153
16.69 AAA
#9AD6BB
Green300
Hue 153
11.76 AAA
#229461
Green600
Hue 153
5.06 AA
#006437
Green800
Hue 153
7.29 AAA
#003C21
Green1000
Hue 153
12.58 AAA
#002112
Green1200
Hue 153
17.12 AAA
#DEECFF
Blue100
Hue 214
16.24 AAA
#AACEFC
Blue300
Hue 214
11.97 AAA
#2B83F7
Blue600
Hue 214
5.26 AA
#0057C9
Blue800
Hue 214
6.54 AA
#00357B
Blue1000
Hue 214
11.69 AAA
#001531
Blue1200
Hue 214
18.23 AAA
#E3CEFF
Purple100
Hue 266
13.45 AAA
#B78AF2
Purple300
Hue 266
7.34 AAA
#7030C2
Purple600
Hue 266
7.26 AAA
#490C97
Purple800
Hue 266
11.77 AAA
#310865
Purple1000
Hue 266
15.51 AAA
#1C053B
Purple1200
Hue 266
18.51 AAA
#F3F3F3
Grey100
Hue 0
17.51 AAA
#DADADA
Grey300
Hue 0
13.9 AAA
#999999
Grey600
Hue 0
6.82 AAA
#666666
Grey800
Hue 0
5.74 AA
#292929
Grey1000
Hue 0
14.54 AAA
#0D0D0D
Grey1200
Hue 0
19.43 AAA
#FFFFFF
White
Hue 0
21.0 AAA
Step 6
Following the audits, structural analysis, and usage mapping, the semantic token layer was defined to translate primitive values into functional application contexts.
Eight core usage categories were established, including surface, background, feedback, text (covering label and placeholder), border, and icon, each representing a distinct interaction and hierarchy role within the interface.
For every category, existing components and templates were systematically reviewed to identify real usage patterns, state variations, and contrast requirements. This ensured that semantic tokens were grounded in practical implementation needs rather than abstract definitions.
Tokens were structured to maintain parity between Light and Dark modes through mirrored semantic logic, allowing contextual adaptation without altering the underlying primitive scales.
#F5B400
Yellow600
--color-surface-brand
Surface
Token
Primitives
--color-surface-inverse
White
Grey1000
--color-surface-disabled
Grey200
Grey800
--color-surface-neutral
Grey100
Grey1200
--color-surface-inverse-hover
Yellow100
Yellow800
--color-surface-active
Yellow300
Yellow600
--color-surface-brand
Yellow600
Yellow600
--color-surface-brand-hover
Yellow300
Yellow800
--color-surface-brand-subtle
Yellow100
Yellow800
--color-surface-brand-tertiary
Yellow100
Yellow1000
Handoff
A structured handoff was conducted to ensure accurate implementation of the new token architecture. Documentation detailed the full token hierarchy, including raw values (hex), primitive tokens, semantic mappings, and usage guidelines, enabling developers to clearly understand the relationship between layers and apply them consistently in code.
On the design side, a comprehensive variable structure was implemented in Figma, reflecting the same primitive-to-semantic architecture defined for development.
Light and Dark modes were configured through variable modes, preserving semantic parity while allowing contextual value mapping.
All existing components and templates were systematically refactored to align with the new token structure, ensuring consistency, reducing hardcoded values, and reinforcing adoption across the system.
Results
Deliverables
From palette to system:
Rebuilding color tokens
Red300
#F0ABAB
Red100
#FADCDC
Red600
#D63131
Red800
#A30000
Red1000
#520000
Red1200
#290000
AAA 10.28
AAA 15.11
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
AA 4.83
AAA 8.21
AAA 15.45
AAA 19.19
Green300
#9AD6BB
Green100
#D5F5E7
Green600
#229461
Green800
#006437
Green1000
#003C21
Green1200
#002112
11.76 AAA
16.69 AAA
Hue 153
Hue 153
Hue 153
Hue 153
Hue 153
Hue 153
5.06 AA
7.29 AAA
12.58 AAA
17.12 AAA
Orange300
#FDD1B2
Orange100
#FFE9D9
Orange600
#F98633
Orange800
#C65300
Orange1000
#632A00
Orange1200
#311400
13.82 AAA
16.57 AAA
Hue 25
Hue 25
Hue 25
Hue 25
Hue 25
Hue 25
7.85 AAA
4.52 AA
11.27 AAA
17.06 AAA
White
#FFFFFF
AAA 18.62
Hue 0
Gray100
#F3F3F3
Gray300
#DADADA
Gray600
#999999
Gray1200
#0D0D0D
Gray1000
#292929
Gray800
#666666
AAA 17.51
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
AAA 13.9
AAA 6.82
AAA 19.43
AAA 14.54
AA 5.74
Blue300
#AACEFC
Blue100
#DEECFF
Blue600
#2B83F7
Blue800
#0057C9
Blue1000
#00357B
Blue1200
#001531
AAA 11.97
AAA 16.24
Hue 214
Hue 214
Hue 214
Hue 214
Hue 214
Hue 214
AA 5.26
AA 6.54
AAA 11.69
AAA 18.23
Yellow800
#F5B400
Yellow1000
#B57900
Yellow100
#FFF3D1
17.57 AAA
Hue 44
Yellow300
#FFE396
15.43 AAA
Hue 44
Hue 44
Hue 40
Yellow600
#FFCF4D
Hue 44
13.22 AAA
10.56 AAA
5.69 AA
Yellow1200
#593900
Hue 38
10.44 AAA
Purple100
#E3CEFF
Purple300
#B78AF2
Purple600
#7030C2
Purple800
#490C97
Purple1000
#310865
Purple1200
#1C053B
13.45 AAA
Hue 266
Hue 266
Hue 266
Hue 266
Hue 266
Hue 266
7.34 AAA
7.26 AAA
11.77 AAA
15.51 AAA
18.51 AAA
Mariana Azambuja
Happy you explored my work!
Context
Celebration is the Design System serving Ambev (Brazil) and AB InBev (global), created to drive consistency, scalability, and operational efficiency across internal digital products.
Since its launch in September 2021, it has expanded to support around 70 products, aligning design and engineering teams around shared standards, reusable components, and streamlined workflows. The system plays a key role in accelerating product delivery while maintaining quality and coherence at scale, with continued growth in adoption across the organization.
Role
Design Lead
Team
1 Designer
2 Developers
Tool
Figma
”Contrast” Figma plugin
Project goal
This project focused on re-architecting Celebration’s color system to address structural limitations and enable long-term scalability. The objective was to establish a robust token foundation that could support accessibility standards, improve semantic clarity, and ensure consistent behavior across Light and Dark modes. By strengthening the color architecture, the initiative aimed to reduce complexity, enhance maintainability, and provide a flexible framework capable of sustaining the system’s continued growth across products and teams.
Key challenges
Main goals
Process
Before initiating the refactor, we defined a consolidation strategy: maintaining a single “Core” theme based on the company’s official brand colors. This decision eliminated the need to revise the remaining 11 department-specific themes and reduced structural complexity within the system.
Before
Core theme
#FFC629
Department-specific themes
#B82E78
#4BA68D
#ABD643
#FA7317
#FD9D1E
#BA0C2F
#803286
#A755F7
#2C589B
#4ECAF0
After
Core theme
#FFC629
Step 2
I began with a structured audit of the existing color tokens, analyzing their architecture, semantic structure, and scalability. The goal was to identify structural inconsistencies, accessibility gaps, and opportunities for refinement.
Key findings included:
Step 3
I began by auditing the existing color scales, mapping each hue to its corresponding semantic tokens and documenting their relationships across the system. This included a structured analysis of contrast variations, evaluating color-on-color and text-on-color combinations to assess consistency and accessibility compliance.
Brand300
Brand400
Brand200
Brand100
Brand500
Brand600
#FFC629
#EBB01B
#F9DC95
#FCECC5
#BC850D
#8A620A
12.36 AAA
9.95 AAA
14.52 AAA
16.6 AAA
Hue 43
Hue 43
Hue 44
Hue 43
Hue 41
Hue 41
6.01 AA
5.48 AA
Danger300
Danger400
Danger200
Danger100
Danger500
Danger600
#C92323
#AE1E1E
#F3C0BE
#FFEAEA
#8E1818
#7A130A
5.6 AA
6.99 AA
12.11 AAA
16.85 AAA
Hue 0
Hue 2
Hue 0
Hue 0
Hue 0
Hue 5
9.15 AAA
10.9 AAA
Warning300
Warning400
Warning200
Warning100
Warning500
Warning600
#FF9040
#DB5C00
#FFD0AD
#FFF0DE
#943E00
#853E00
9.31 AAA
5.54 AA
13.76 AAA
17.37 AAA
Hue 33
Hue 26
Hue 25
Hue 25
Hue 25
Hue 28
7.12 AAA
7.81 AAA
Positive300
Positive400
Positive200
Positive100
Positive500
Positive600
#00B261
#08663B
#D0EFBD
#E1FCE9
#053821
#273F32
7.54 AAA
7.06 AAA
15.51 AAA
17.86 AAA
Hue 138
Hue 97
Hue 153
Hue 153
Hue 153
Hue 148
13.17 AAA
11.39 AAA
Neutral300
Neutral400
Neutral200
Neutral100
Neutral500
Neutral600
#BFBFBF
#666666
#D9D9D9
#FFFFFF
#292929
#0E0E0E
11.41 AAA
5.74 AA
14.87 AAA
21 AAA
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
14.54 AAA
19.3 AAA
Step 4
Following the audit, the next step was to redesign the color scales based on the identified structural gaps. New proposals were developed to ensure consistent hue progression, improved tonal regularity, and expanded tonal range across each color family.
The revised scales were constructed with accessibility criteria embedded from the outset, validating contrast performance across key use cases (text-on-color and color-on-color) and ensuring compliance with established standards.
This phase focused on creating more granular, predictable tonal ramps that could support diverse interface states while maintaining visual cohesion and scalability within the system.
Value
Primitive
Hue
Text color
WCAG
#FFDC7D
Yellow400
Hue 44
14.6 AAA
#FFD666
Yellow500
Hue 44
13.94 AAA
#FFCF4D
Yellow600
Hue 44
13.22 AAA
#EB9393
Red400
Hue 0
8.44 AAA
#E06262
Red500
Hue 0
5.53 AA
#D63131
Red600
Hue 0
4.83 AA
#FCC399
Orange400
Hue 25
12.4 AAA
#FAA466
Orange500
Hue 25
9.77 AAA
#F98633
Orange600
Hue 25
7.85 AAA
#78C4A2
Green400
Hue 153
9.45 AAA
#4DAB81
Green500
Hue 153
6.9 AA
#229461
Green600
Hue 153
5.06 AA
#80B5FA
Blue400
Hue 214
9.16 AAA
#559CF8
Blue500
Hue 214
6.93 AA
#2B83F7
Blue600
Hue 214
5.26 AA
#9D65E5
Purple400
Hue 266
5.02 AA
#8245D1
Purple500
Hue 266
5.64 AA
#7030C2
Purple600
Hue 266
7.26 AAA
#CCCCCC
Grey400
Hue 0
12.1 AAA
#B3B3B3
Grey500
Hue 0
9.26 AAA
#999999
Grey600
Hue 0
6.82 AAA
#FFFFFF
White
Hue 0
21.0 AAA
Step 5
Once the scales were defined and structured, the next step was to determine which tonal steps would be activated in the initial design system implementation. Rather than exposing the entire range, a curated subset of intervals was selected to support core interface use cases (e.g., surfaces, text, borders, states), ensuring clarity and reducing unnecessary complexity.
The non-activated intervals remain intentionally preserved within the primitive layer. These unused steps play a strategic role in maintaining scalability, enabling future expansion, theming flexibility, and the introduction of new semantic tokens without requiring structural refactoring.
The tonal ramps themselves remain identical across Light and Dark modes. The distinction lies in how intervals are mapped at the semantic layer. For example, the surface token in Light mode corresponds to Gray50 (#F7F7F7), while its Dark mode counterpart maps to Gray1100 (#1A1A1A). This approach ensures consistency at the primitive level while enabling contextual adaptation through semantic reassignment.
Value
Primitive
Hue
Text color
WCAG
#FFF3D1
Yellow100
Hue 44
17.57 AAA
#FFE396
Yellow300
Hue 44
15.43 AAA
#FFCF4D
Yellow600
Hue 44
13.22 AAA
#F5B400
Yellow800
Hue 44
10.56 AAA
#B57900
Yellow1000
Hue 40
5.69 AA
#593900
Yellow1200
Hue 38
10.44 AAA
#FADCDC
Red100
Hue 0
15.11 AAA
#F0ABAB
Red300
Hue 0
10.28 AAA
#D63131
Red600
Hue 0
4.83 AA
#A30000
Red800
Hue 0
8.21 AAA
#520000
Red1000
Hue 0
15.45 AAA
#290000
Red1200
Hue 0
19.19 AAA
#FFE9D9
Orange100
Hue 25
16.57 AAA
#FDD1B2
Orange300
Hue 25
13.82 AAA
#F98633
Orange600
Hue 25
7.85 AAA
#C65300
Orange800
Hue 25
4.52 AA
#632A00
Orange1000
Hue 25
11.27 AAA
#311400
Orange1200
Hue 25
17.06 AAA
#D5F5E7
Green100
Hue 153
16.69 AAA
#9AD6BB
Green300
Hue 153
11.76 AAA
#229461
Green600
Hue 153
5.06 AA
#006437
Green800
Hue 153
7.29 AAA
#003C21
Green1000
Hue 153
12.58 AAA
#002112
Green1200
Hue 153
17.12 AAA
#DEECFF
Blue100
Hue 214
16.24 AAA
#AACEFC
Blue300
Hue 214
11.97 AAA
#2B83F7
Blue600
Hue 214
5.26 AA
#0057C9
Blue800
Hue 214
6.54 AA
#00357B
Blue1000
Hue 214
11.69 AAA
#001531
Blue1200
Hue 214
18.23 AAA
#E3CEFF
Purple100
Hue 266
13.45 AAA
#B78AF2
Purple300
Hue 266
7.34 AAA
#7030C2
Purple600
Hue 266
7.26 AAA
#490C97
Purple800
Hue 266
11.77 AAA
#310865
Purple1000
Hue 266
15.51 AAA
#1C053B
Purple1200
Hue 266
18.51 AAA
#F3F3F3
Grey100
Hue 0
17.51 AAA
#DADADA
Grey300
Hue 0
13.9 AAA
#999999
Grey600
Hue 0
6.82 AAA
#666666
Grey800
Hue 0
5.74 AA
#292929
Grey1000
Hue 0
14.54 AAA
#0D0D0D
Grey1200
Hue 0
19.43 AAA
#FFFFFF
White
Hue 0
21.0 AAA
Step 6
Following the audits, structural analysis, and usage mapping, the semantic token layer was defined to translate primitive values into functional application contexts.
Eight core usage categories were established, including surface, background, feedback, text (covering label and placeholder), border, and icon, each representing a distinct interaction and hierarchy role within the interface.
For every category, existing components and templates were systematically reviewed to identify real usage patterns, state variations, and contrast requirements. This ensured that semantic tokens were grounded in practical implementation needs rather than abstract definitions.
Tokens were structured to maintain parity between Light and Dark modes through mirrored semantic logic, allowing contextual adaptation without altering the underlying primitive scales.
#F5B400
Yellow600
--color-surface-brand
Surface
Token
Primitives
--color-surface-inverse
White
Grey1000
--color-surface-disabled
Grey200
Grey800
--color-surface-neutral
Grey100
Grey1200
--color-surface-inverse-hover
Yellow100
Yellow800
--color-surface-active
Yellow300
Yellow600
--color-surface-brand
Yellow600
Yellow600
--color-surface-brand-hover
Yellow300
Yellow800
--color-surface-brand-subtle
Yellow100
Yellow800
--color-surface-brand-tertiary
Yellow100
Yellow1000
Handoff
A structured handoff was conducted to ensure accurate implementation of the new token architecture. Documentation detailed the full token hierarchy, including raw values (hex), primitive tokens, semantic mappings, and usage guidelines, enabling developers to clearly understand the relationship between layers and apply them consistently in code.
On the design side, a comprehensive variable structure was implemented in Figma, reflecting the same primitive-to-semantic architecture defined for development.
Light and Dark modes were configured through variable modes, preserving semantic parity while allowing contextual value mapping.
All existing components and templates were systematically refactored to align with the new token structure, ensuring consistency, reducing hardcoded values, and reinforcing adoption across the system.
Results
Deliverables
Value
Primitive
Hue
Text color
WCAG
#FFF3D1
Yellow100
Hue 44
17.57 AAA
#FFEBB5
Yellow200
Hue 44
16.47 AAA
#FFE396
Yellow300
Hue 44
15.43 AAA
#FFDC7D
Yellow400
Hue 44
14.6 AAA
#FFD666
Yellow500
Hue 44
13.94 AAA
#FFCF4D
Yellow600
Hue 44
13.22 AAA
#FFC629
Yellow700
Hue 44
12.36 AAA
#F5B400
Yellow800
Hue 44
10.56 AAA
#DB9A00
Yellow900
Hue 42
7.99 AAA
#B57900
Yellow1000
Hue 40
5.69 AA
#8A5700
Yellow1100
Hue 38
6.09 AA
#593900
Yellow1200
Hue 38
10.44 AAA
#FADCDC
Red100
Hue 0
15.11 AAA
#FF5C4C4
Red200
Hue 0
12.56 AAA
#F0ABAB
Red300
Hue 0
10.28 AAA
#EB9393
Red400
Hue 0
8.44 AAA
#E06262
Red500
Hue 0
5.53 AA
#D63131
Red600
Hue 0
4.83 AA
#CC0000
Red700
Hue 0
5.88 AA
#A30000
Red800
Hue 0
8.21 AAA
#7A0000
Red900
Hue 0
11.49 AAA
#520000
Red1000
Hue 0
15.45 AAA
#3D0000
Red1100
Hue 0
17.52 AAA
#290000
Red1200
Hue 0
19.19 AAA
#FFE9D9
Orange100
Hue 25
16.57 AAA
#FDE0CC
Orange200
Hue 25
15.46 AAA
#FDD1B2
Orange300
Hue 25
13.82 AAA
#FCC399
Orange400
Hue 25
12.4 AAA
#FAA466
Orange500
Hue 25
9.77 AAA
#F98633
Orange600
Hue 25
7.85 AAA
#F76800
Orange700
Hue 25
6.41 AA
#C65300
Orange800
Hue 25
4.52 AA
#943E00
Orange900
Hue 25
7.12 AAA
#632A00
Orange1000
Hue 25
11.27 AAA
#4A1F00
Orange1100
Hue 25
14.12 AAA
#311400
Orange1200
Hue 25
17.06 AAA
#D5F5E7
Green100
Hue 153
16.69 AAA
#BEEBD7
Green200
Hue 153
14.85 AAA
#9AD6BB
Green300
Hue 153
11.76 AAA
#78C4A2
Green400
Hue 153
9.45 AAA
#4DAB81
Green500
Hue 153
6.9 AA
#229461
Green600
Hue 153
5.06 AA
#007842
Green700
Hue 153
5.57 AA
#006437
Green800
Hue 153
7.29 AAA
#00502C
Green900
Hue 153
9.61 AAA
#003C21
Green1000
Hue 153
12.58 AAA
#002B18
Green1100
Hue 153
15.45 AAA
#002112
Green1200
Hue 153
17.12 AAA
#DEECFF
Blue100
Hue 214
16.24 AAA
#CCE1FD
Blue200
Hue 214
14.58 AAA
#AACEFC
Blue300
Hue 214
11.97 AAA
#80B5FA
Blue400
Hue 214
9.16 AAA
#559CF8
Blue500
Hue 214
6.93 AA
#2B83F7
Blue600
Hue 214
5.26 AA
#006AF5
Blue700
Hue 214
4.79 AA
#0057C9
Blue800
Hue 214
6.54 AA
#0047A3
Blue900
Hue 214
8.64 AAA
#00357B
Blue1000
Hue 214
11.69 AAA
#002352
Blue1100
Hue 214
15.41 AAA
#001531
Blue1200
Hue 214
18.23 AAA
#E3CEFF
Purple100
Hue 266
13.45 AAA
#D1ADFF
Purple200
Hue 266
10.3 AAA
#B78AF2
Purple300
Hue 266
7.34 AAA
#9D65E5
Purple400
Hue 266
5.02 AA
#8245D1
Purple500
Hue 266
5.64 AA
#7030C2
Purple600
Hue 266
7.26 AAA
#5D1BB2
Purple700
Hue 266
9.27 AAA
#490C97
Purple800
Hue 266
11.77 AAA
#3D0A7E
Purple900
Hue 266
13.6 AAA
#310865
Purple1000
Hue 266
15.51 AAA
#26064F
Purple1100
Hue 266
17.19 AAA
#1C053B
Purple1200
Hue 266
18.51 AAA
#F3F3F3
Grey100
Hue 0
17.51 AAA
#E6E6E6
Grey200
Hue 0
15.57 AAA
#DADADA
Grey300
Hue 0
13.9 AAA
#CCCCCC
Grey400
Hue 0
12.1 AAA
#B3B3B3
Grey500
Hue 0
9.26 AAA
#999999
Grey600
Hue 0
6.82 AAA
#808080
Grey700
Hue 0
4.92 AA
#666666
Grey800
Hue 0
5.74 AA
#4D4D4D
Grey900
Hue 0
8.45 AAA
#292929
Grey1000
Hue 0
14.54 AAA
#1A1A1A
Grey1100
Hue 0
17.4 AAA
#0D0D0D
Grey1200
Hue 0
19.43 AAA
#FFFFFF
White
Hue 0
21.0 AAA
From palette to system:
Rebuilding color tokens
Red300
#F0ABAB
Red100
#FADCDC
Red600
#D63131
Red800
#A30000
Red1000
#520000
Red1200
#290000
AAA 10.28
AAA 15.11
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
AA 4.83
AAA 8.21
AAA 15.45
AAA 19.19
Green300
#9AD6BB
Green100
#D5F5E7
Green600
#229461
Green800
#006437
Green1000
#003C21
Green1200
#002112
11.76 AAA
16.69 AAA
Hue 153
Hue 153
Hue 153
Hue 153
Hue 153
Hue 153
5.06 AA
7.29 AAA
12.58 AAA
17.12 AAA
Orange300
#FDD1B2
Orange100
#FFE9D9
Orange600
#F98633
Orange800
#C65300
Orange1000
#632A00
Orange1200
#311400
13.82 AAA
16.57 AAA
Hue 25
Hue 25
Hue 25
Hue 25
Hue 25
Hue 25
7.85 AAA
4.52 AA
11.27 AAA
17.06 AAA
White
#FFFFFF
AAA 18.62
Hue 0
Gray100
#F3F3F3
Gray300
#DADADA
Gray600
#999999
Gray1200
#0D0D0D
Gray1000
#292929
Gray800
#666666
AAA 17.51
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
AAA 13.9
AAA 6.82
AAA 19.43
AAA 14.54
AA 5.74
Blue300
#AACEFC
Blue100
#DEECFF
Blue600
#2B83F7
Blue800
#0057C9
Blue1000
#00357B
Blue1200
#001531
AAA 11.97
AAA 16.24
Hue 214
Hue 214
Hue 214
Hue 214
Hue 214
Hue 214
AA 5.26
AA 6.54
AAA 11.69
AAA 18.23
Yellow800
#F5B400
Yellow1000
#B57900
Yellow100
#FFF3D1
17.57 AAA
Hue 44
Yellow300
#FFE396
15.43 AAA
Hue 44
Hue 44
Hue 40
Yellow600
#FFCF4D
Hue 44
13.22 AAA
10.56 AAA
5.69 AA
Yellow1200
#593900
Hue 38
10.44 AAA
Purple100
#E3CEFF
Purple300
#B78AF2
Purple600
#7030C2
Purple800
#490C97
Purple1000
#310865
Purple1200
#1C053B
13.45 AAA
Hue 266
Hue 266
Hue 266
Hue 266
Hue 266
Hue 266
7.34 AAA
7.26 AAA
11.77 AAA
15.51 AAA
18.51 AAA
Mariana Azambuja
Happy you explored my work!
Context
Celebration is the Design System serving Ambev (Brazil) and AB InBev (global), created to drive consistency, scalability, and operational efficiency across internal digital products.
Since its launch in September 2021, it has expanded to support around 70 products, aligning design and engineering teams around shared standards, reusable components, and streamlined workflows. The system plays a key role in accelerating product delivery while maintaining quality and coherence at scale, with continued growth in adoption across the organization.
Role
Design Lead
Team
1 Designer
2 Developers
Tool
Figma
”Contrast” Figma plugin
Project goal
This project focused on re-architecting Celebration’s color system to address structural limitations and enable long-term scalability. The objective was to establish a robust token foundation that could support accessibility standards, improve semantic clarity, and ensure consistent behavior across Light and Dark modes. By strengthening the color architecture, the initiative aimed to reduce complexity, enhance maintainability, and provide a flexible framework capable of sustaining the system’s continued growth across products and teams.
Key challenges
Main goals
Process
Before initiating the refactor, we defined a consolidation strategy: maintaining a single “Core” theme based on the company’s official brand colors. This decision eliminated the need to revise the remaining 11 department-specific themes and reduced structural complexity within the system.
Before
Core theme
#FFC629
Department-specific themes
#B82E78
#4BA68D
#ABD643
#FA7317
#FD9D1E
#BA0C2F
#803286
#A755F7
#2C589B
#4ECAF0
After
Core theme
#FFC629
Step 2
I began with a structured audit of the existing color tokens, analyzing their architecture, semantic structure, and scalability. The goal was to identify structural inconsistencies, accessibility gaps, and opportunities for refinement.
Key findings included:
Step 3
I began by auditing the existing color scales, mapping each hue to its corresponding semantic tokens and documenting their relationships across the system. This included a structured analysis of contrast variations, evaluating color-on-color and text-on-color combinations to assess consistency and accessibility compliance.
Brand300
Brand400
Brand200
Brand100
Brand500
Brand600
#FFC629
#EBB01B
#F9DC95
#FCECC5
#BC850D
#8A620A
12.36 AAA
9.95 AAA
14.52 AAA
16.6 AAA
Hue 43
Hue 43
Hue 44
Hue 43
Hue 41
Hue 41
6.01 AA
5.48 AA
Danger300
Danger400
Danger200
Danger100
Danger500
Danger600
#C92323
#AE1E1E
#F3C0BE
#FFEAEA
#8E1818
#7A130A
5.6 AA
6.99 AA
12.11 AAA
16.85 AAA
Hue 0
Hue 2
Hue 0
Hue 0
Hue 0
Hue 5
9.15 AAA
10.9 AAA
Warning300
Warning400
Warning200
Warning100
Warning500
Warning600
#FF9040
#DB5C00
#FFD0AD
#FFF0DE
#943E00
#853E00
9.31 AAA
5.54 AA
13.76 AAA
17.37 AAA
Hue 33
Hue 26
Hue 25
Hue 25
Hue 25
Hue 28
7.12 AAA
7.81 AAA
Positive300
Positive400
Positive200
Positive100
Positive500
Positive600
#00B261
#08663B
#D0EFBD
#E1FCE9
#053821
#273F32
7.54 AAA
7.06 AAA
15.51 AAA
17.86 AAA
Hue 138
Hue 97
Hue 153
Hue 153
Hue 153
Hue 148
13.17 AAA
11.39 AAA
Neutral300
Neutral400
Neutral200
Neutral100
Neutral500
Neutral600
#BFBFBF
#666666
#D9D9D9
#FFFFFF
#292929
#0E0E0E
11.41 AAA
5.74 AA
14.87 AAA
21 AAA
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
Hue 0
14.54 AAA
19.3 AAA
Step 4
Following the audit, the next step was to redesign the color scales based on the identified structural gaps. New proposals were developed to ensure consistent hue progression, improved tonal regularity, and expanded tonal range across each color family.
The revised scales were constructed with accessibility criteria embedded from the outset, validating contrast performance across key use cases (text-on-color and color-on-color) and ensuring compliance with established standards.
This phase focused on creating more granular, predictable tonal ramps that could support diverse interface states while maintaining visual cohesion and scalability within the system.
Value
Primitive
Hue
Text color
WCAG
#FFDC7D
Yellow400
Hue 44
14.6 AAA
#FFD666
Yellow500
Hue 44
13.94 AAA
#FFCF4D
Yellow600
Hue 44
13.22 AAA
#EB9393
Red400
Hue 0
8.44 AAA
#E06262
Red500
Hue 0
5.53 AA
#D63131
Red600
Hue 0
4.83 AA
#FCC399
Orange400
Hue 25
12.4 AAA
#FAA466
Orange500
Hue 25
9.77 AAA
#F98633
Orange600
Hue 25
7.85 AAA
#78C4A2
Green400
Hue 153
9.45 AAA
#4DAB81
Green500
Hue 153
6.9 AA
#229461
Green600
Hue 153
5.06 AA
#80B5FA
Blue400
Hue 214
9.16 AAA
#559CF8
Blue500
Hue 214
6.93 AA
#2B83F7
Blue600
Hue 214
5.26 AA
#9D65E5
Purple400
Hue 266
5.02 AA
#8245D1
Purple500
Hue 266
5.64 AA
#7030C2
Purple600
Hue 266
7.26 AAA
#CCCCCC
Grey400
Hue 0
12.1 AAA
#B3B3B3
Grey500
Hue 0
9.26 AAA
#999999
Grey600
Hue 0
6.82 AAA
#FFFFFF
White
Hue 0
21.0 AAA
Step 5
Once the scales were defined and structured, the next step was to determine which tonal steps would be activated in the initial design system implementation. Rather than exposing the entire range, a curated subset of intervals was selected to support core interface use cases (e.g., surfaces, text, borders, states), ensuring clarity and reducing unnecessary complexity.
The non-activated intervals remain intentionally preserved within the primitive layer. These unused steps play a strategic role in maintaining scalability, enabling future expansion, theming flexibility, and the introduction of new semantic tokens without requiring structural refactoring.
The tonal ramps themselves remain identical across Light and Dark modes. The distinction lies in how intervals are mapped at the semantic layer. For example, the surface token in Light mode corresponds to Gray50 (#F7F7F7), while its Dark mode counterpart maps to Gray1100 (#1A1A1A). This approach ensures consistency at the primitive level while enabling contextual adaptation through semantic reassignment.
Value
Primitive
Hue
Text color
WCAG
#FFF3D1
Yellow100
Hue 44
17.57 AAA
#FFE396
Yellow300
Hue 44
15.43 AAA
#FFCF4D
Yellow600
Hue 44
13.22 AAA
#F5B400
Yellow800
Hue 44
10.56 AAA
#B57900
Yellow1000
Hue 40
5.69 AA
#593900
Yellow1200
Hue 38
10.44 AAA
#FADCDC
Red100
Hue 0
15.11 AAA
#F0ABAB
Red300
Hue 0
10.28 AAA
#D63131
Red600
Hue 0
4.83 AA
#A30000
Red800
Hue 0
8.21 AAA
#520000
Red1000
Hue 0
15.45 AAA
#290000
Red1200
Hue 0
19.19 AAA
#FFE9D9
Orange100
Hue 25
16.57 AAA
#FDD1B2
Orange300
Hue 25
13.82 AAA
#F98633
Orange600
Hue 25
7.85 AAA
#C65300
Orange800
Hue 25
4.52 AA
#632A00
Orange1000
Hue 25
11.27 AAA
#311400
Orange1200
Hue 25
17.06 AAA
#D5F5E7
Green100
Hue 153
16.69 AAA
#9AD6BB
Green300
Hue 153
11.76 AAA
#229461
Green600
Hue 153
5.06 AA
#006437
Green800
Hue 153
7.29 AAA
#003C21
Green1000
Hue 153
12.58 AAA
#002112
Green1200
Hue 153
17.12 AAA
#DEECFF
Blue100
Hue 214
16.24 AAA
#AACEFC
Blue300
Hue 214
11.97 AAA
#2B83F7
Blue600
Hue 214
5.26 AA
#0057C9
Blue800
Hue 214
6.54 AA
#00357B
Blue1000
Hue 214
11.69 AAA
#001531
Blue1200
Hue 214
18.23 AAA
#E3CEFF
Purple100
Hue 266
13.45 AAA
#B78AF2
Purple300
Hue 266
7.34 AAA
#7030C2
Purple600
Hue 266
7.26 AAA
#490C97
Purple800
Hue 266
11.77 AAA
#310865
Purple1000
Hue 266
15.51 AAA
#1C053B
Purple1200
Hue 266
18.51 AAA
#F3F3F3
Grey100
Hue 0
17.51 AAA
#DADADA
Grey300
Hue 0
13.9 AAA
#999999
Grey600
Hue 0
6.82 AAA
#666666
Grey800
Hue 0
5.74 AA
#292929
Grey1000
Hue 0
14.54 AAA
#0D0D0D
Grey1200
Hue 0
19.43 AAA
#FFFFFF
White
Hue 0
21.0 AAA
Step 6
Following the audits, structural analysis, and usage mapping, the semantic token layer was defined to translate primitive values into functional application contexts.
Eight core usage categories were established, including surface, background, feedback, text (covering label and placeholder), border, and icon, each representing a distinct interaction and hierarchy role within the interface.
For every category, existing components and templates were systematically reviewed to identify real usage patterns, state variations, and contrast requirements. This ensured that semantic tokens were grounded in practical implementation needs rather than abstract definitions.
Tokens were structured to maintain parity between Light and Dark modes through mirrored semantic logic, allowing contextual adaptation without altering the underlying primitive scales.
#F5B400
Yellow600
--color-surface-brand
Surface
Token
Primitives
--color-surface-inverse
White
Grey1000
--color-surface-disabled
Grey200
Grey800
--color-surface-neutral
Grey100
Grey1200
--color-surface-inverse-hover
Yellow100
Yellow800
--color-surface-active
Yellow300
Yellow600
--color-surface-brand
Yellow600
Yellow600
--color-surface-brand-hover
Yellow300
Yellow800
--color-surface-brand-subtle
Yellow100
Yellow800
--color-surface-brand-tertiary
Yellow100
Yellow1000
Handoff
A structured handoff was conducted to ensure accurate implementation of the new token architecture. Documentation detailed the full token hierarchy, including raw values (hex), primitive tokens, semantic mappings, and usage guidelines, enabling developers to clearly understand the relationship between layers and apply them consistently in code.
On the design side, a comprehensive variable structure was implemented in Figma, reflecting the same primitive-to-semantic architecture defined for development.
Light and Dark modes were configured through variable modes, preserving semantic parity while allowing contextual value mapping.
All existing components and templates were systematically refactored to align with the new token structure, ensuring consistency, reducing hardcoded values, and reinforcing adoption across the system.
Results
Deliverables
Value
Primitive
Hue
Text color
WCAG
#FFF3D1
Yellow100
Hue 44
17.57 AAA
#FFEBB5
Yellow200
Hue 44
16.47 AAA
#FFE396
Yellow300
Hue 44
15.43 AAA
#FFDC7D
Yellow400
Hue 44
14.6 AAA
#FFD666
Yellow500
Hue 44
13.94 AAA
#FFCF4D
Yellow600
Hue 44
13.22 AAA
#FFC629
Yellow700
Hue 44
12.36 AAA
#F5B400
Yellow800
Hue 44
10.56 AAA
#DB9A00
Yellow900
Hue 42
7.99 AAA
#B57900
Yellow1000
Hue 40
5.69 AA
#8A5700
Yellow1100
Hue 38
6.09 AA
#593900
Yellow1200
Hue 38
10.44 AAA
#FADCDC
Red100
Hue 0
15.11 AAA
#FF5C4C4
Red200
Hue 0
12.56 AAA
#F0ABAB
Red300
Hue 0
10.28 AAA
#EB9393
Red400
Hue 0
8.44 AAA
#E06262
Red500
Hue 0
5.53 AA
#D63131
Red600
Hue 0
4.83 AA
#CC0000
Red700
Hue 0
5.88 AA
#A30000
Red800
Hue 0
8.21 AAA
#7A0000
Red900
Hue 0
11.49 AAA
#520000
Red1000
Hue 0
15.45 AAA
#3D0000
Red1100
Hue 0
17.52 AAA
#290000
Red1200
Hue 0
19.19 AAA
#FFE9D9
Orange100
Hue 25
16.57 AAA
#FDE0CC
Orange200
Hue 25
15.46 AAA
#FDD1B2
Orange300
Hue 25
13.82 AAA
#FCC399
Orange400
Hue 25
12.4 AAA
#FAA466
Orange500
Hue 25
9.77 AAA
#F98633
Orange600
Hue 25
7.85 AAA
#F76800
Orange700
Hue 25
6.41 AA
#C65300
Orange800
Hue 25
4.52 AA
#943E00
Orange900
Hue 25
7.12 AAA
#632A00
Orange1000
Hue 25
11.27 AAA
#4A1F00
Orange1100
Hue 25
14.12 AAA
#311400
Orange1200
Hue 25
17.06 AAA
#D5F5E7
Green100
Hue 153
16.69 AAA
#BEEBD7
Green200
Hue 153
14.85 AAA
#9AD6BB
Green300
Hue 153
11.76 AAA
#78C4A2
Green400
Hue 153
9.45 AAA
#4DAB81
Green500
Hue 153
6.9 AA
#229461
Green600
Hue 153
5.06 AA
#007842
Green700
Hue 153
5.57 AA
#006437
Green800
Hue 153
7.29 AAA
#00502C
Green900
Hue 153
9.61 AAA
#003C21
Green1000
Hue 153
12.58 AAA
#002B18
Green1100
Hue 153
15.45 AAA
#002112
Green1200
Hue 153
17.12 AAA
#DEECFF
Blue100
Hue 214
16.24 AAA
#CCE1FD
Blue200
Hue 214
14.58 AAA
#AACEFC
Blue300
Hue 214
11.97 AAA
#80B5FA
Blue400
Hue 214
9.16 AAA
#559CF8
Blue500
Hue 214
6.93 AA
#2B83F7
Blue600
Hue 214
5.26 AA
#006AF5
Blue700
Hue 214
4.79 AA
#0057C9
Blue800
Hue 214
6.54 AA
#0047A3
Blue900
Hue 214
8.64 AAA
#00357B
Blue1000
Hue 214
11.69 AAA
#002352
Blue1100
Hue 214
15.41 AAA
#001531
Blue1200
Hue 214
18.23 AAA
#E3CEFF
Purple100
Hue 266
13.45 AAA
#D1ADFF
Purple200
Hue 266
10.3 AAA
#B78AF2
Purple300
Hue 266
7.34 AAA
#9D65E5
Purple400
Hue 266
5.02 AA
#8245D1
Purple500
Hue 266
5.64 AA
#7030C2
Purple600
Hue 266
7.26 AAA
#5D1BB2
Purple700
Hue 266
9.27 AAA
#490C97
Purple800
Hue 266
11.77 AAA
#3D0A7E
Purple900
Hue 266
13.6 AAA
#310865
Purple1000
Hue 266
15.51 AAA
#26064F
Purple1100
Hue 266
17.19 AAA
#1C053B
Purple1200
Hue 266
18.51 AAA
#F3F3F3
Grey100
Hue 0
17.51 AAA
#E6E6E6
Grey200
Hue 0
15.57 AAA
#DADADA
Grey300
Hue 0
13.9 AAA
#CCCCCC
Grey400
Hue 0
12.1 AAA
#B3B3B3
Grey500
Hue 0
9.26 AAA
#999999
Grey600
Hue 0
6.82 AAA
#808080
Grey700
Hue 0
4.92 AA
#666666
Grey800
Hue 0
5.74 AA
#4D4D4D
Grey900
Hue 0
8.45 AAA
#292929
Grey1000
Hue 0
14.54 AAA
#1A1A1A
Grey1100
Hue 0
17.4 AAA
#0D0D0D
Grey1200
Hue 0
19.43 AAA
#FFFFFF
White
Hue 0
21.0 AAA