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!

masazambuja@gmail.com

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

  • Limited scalability of the existing palette;
  • Weak semantic naming structure;
  • Lack of cohesion between hues and tonal scales;
  • Accessibility issues across color combinations;
  • Multiple area-specific color themes (Logistics, Supply, etc.), increasing fragmentation and complexity;
  • High maintenance overhead due to decentralized color governance.

Main goals

  • Redesign the color system to support scalability and long-term evolution;
  • Establish a cohesive and unified chromatic foundation across

all products;

  • Strengthen semantic structure to improve clarity, flexibility,

. and reusability;

  • Ensure accessibility compliance across color combinations

and use cases;

  • Reduce complexity caused by department-specific themes;
  • Enable easier adoption and governance within the Design System.

Process

Step 1

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:

 

  • Color scales with limited tonal steps
  • Irregular hue progression across tonal scales
  • Color families without structured tonal ramps
  • Low semantic specificity in token naming
  • Lack of clearly defined accessibility guidelines
  • Absence of secondary/supporting color families within the palette

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

  • Expanded and restructured color palette, introducing two new base colors to increase expressive range;
  • Improved accessibility standards across key color combinations and UI components;
  • Increased system scalability through clearer tonal hierarchies and reusable structures;
  • Established a unified chromatic framework adopted across multiple product areas;
  • Enhanced semantic clarity, enabling more flexible and predictable application;
  • Reduced fragmentation by consolidating previously department-specific themes.

Deliverables

  • Re-architected color system with rebuilt tonal ramps, improved hue consistency, and expanded tonal range;
  • Accessibility framework integrated into the token structure, including validated contrast pairs and documented compliance criteria;
  • Structured token architecture with clear primitive–semantic separation and scalable naming logic;
  • Light and Dark mode implementation;
  • Handoff specification covering raw values, token hierarchy, and usage definitions;
  • Figma variable system aligned with engineering token architecture;
  • Refactored components and templates to ensure full system adoption;
  • Comprehensive documentation supporting usage, hierarchy, and long-term governance;
  • Coordinated rollout across supported products.

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!

masazambuja@gmail.com

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

  • Limited scalability of the existing palette;
  • Weak semantic naming structure;
  • Lack of cohesion between hues and tonal scales;
  • Accessibility issues across color combinations;
  • Multiple area-specific color themes (Logistics, Supply, etc.), increasing fragmentation and complexity;
  • High maintenance overhead due to decentralized color governance.

Main goals

  • Redesign the color system to support scalability and long-term evolution;
  • Establish a cohesive and unified chromatic foundation across all products;
  • Strengthen semantic structure to improve clarity, flexibility, and reusability;
  • Ensure accessibility compliance across color combinations and use cases;
  • Reduce complexity caused by department-specific themes;
  • Enable easier adoption and governance within the Design System.

Process

Step 1

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:

 

  • Color scales with limited tonal steps
  • Irregular hue progression across tonal scales
  • Color families without structured tonal ramps
  • Low semantic specificity in token naming
  • Lack of clearly defined accessibility guidelines
  • Absence of secondary/supporting color families within the palette

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

  • Expanded and restructured color palette, introducing two new base colors to increase expressive range;
  • Improved accessibility standards across key color combinations and UI components;
  • Increased system scalability through clearer tonal hierarchies and reusable structures;
  • Established a unified chromatic framework adopted across multiple product areas;
  • Enhanced semantic clarity, enabling more flexible and predictable application;
  • Reduced fragmentation by consolidating previously department-specific themes.

Deliverables

  • Re-architected color system with rebuilt tonal ramps, improved hue consistency, and expanded tonal range;
  • Accessibility framework integrated into the token structure, including validated contrast pairs and documented compliance criteria;
  • Structured token architecture with clear primitive–semantic separation and scalable naming logic;
  • Light and Dark mode implementation;
  • Handoff specification covering raw values, token hierarchy, and usage definitions;
  • Figma variable system aligned with engineering token architecture;
  • Refactored components and templates to ensure full system adoption;
  • Comprehensive documentation supporting usage, hierarchy, and long-term governance;
  • Coordinated rollout across supported products.

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!

masazambuja@gmail.com

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

  • Limited scalability of the existing palette;
  • Weak semantic naming structure;
  • Lack of cohesion between hues and tonal scales;
  • Accessibility issues across color combinations;
  • Multiple area-specific color themes (Logistics, Supply, etc.), increasing fragmentation and complexity;
  • High maintenance overhead due to decentralized color governance.

Main goals

  • Redesign the color system to support scalability and long-term evolution;
  • Establish a cohesive and unified chromatic foundation across all products;
  • Strengthen semantic structure to improve clarity, flexibility, and reusability;
  • Ensure accessibility compliance across color combinations and use cases;
  • Reduce complexity caused by department-specific themes;
  • Enable easier adoption and governance within the Design System.

Process

Step 1

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:

 

  • Color scales with limited tonal steps
  • Irregular hue progression across tonal scales
  • Color families without structured tonal ramps
  • Low semantic specificity in token naming
  • Lack of clearly defined accessibility guidelines
  • Absence of secondary/supporting color families within the palette

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

  • Expanded and restructured color palette, introducing two new base colors to increase expressive range;
  • Improved accessibility standards across key color combinations and UI components;
  • Increased system scalability through clearer tonal hierarchies and reusable structures;
  • Established a unified chromatic framework adopted across multiple product areas;
  • Enhanced semantic clarity, enabling more flexible and predictable application;
  • Reduced fragmentation by consolidating previously department-specific themes.

Deliverables

  • Re-architected color system with rebuilt tonal ramps, improved hue consistency, and expanded tonal range;
  • Accessibility framework integrated into the token structure, including validated contrast pairs and documented compliance criteria;
  • Structured token architecture with clear primitive–semantic separation and scalable naming logic;
  • Light and Dark mode implementation;
  • Handoff specification covering raw values, token hierarchy, and usage definitions;
  • Figma variable system aligned with engineering token architecture;
  • Refactored components and templates to ensure full system adoption;
  • Comprehensive documentation supporting usage, hierarchy, and long-term governance;
  • Coordinated rollout across supported products.

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!

masazambuja@gmail.com

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

  • Limited scalability of the existing palette;
  • Weak semantic naming structure;
  • Lack of cohesion between hues and tonal scales;
  • Accessibility issues across color combinations;
  • Multiple area-specific color themes (Logistics, Supply, etc.), increasing fragmentation and complexity;
  • High maintenance overhead due to decentralized color governance.

Main goals

  • Redesign the color system to support scalability and long-term evolution;
  • Establish a cohesive and unified chromatic foundation across all products;
  • Strengthen semantic structure to improve clarity, flexibility, and reusability;
  • Ensure accessibility compliance across color combinations and use cases;
  • Reduce complexity caused by department-specific themes;
  • Enable easier adoption and governance within the Design System.

Process

Step 1

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:

 

  • Color scales with limited tonal steps
  • Irregular hue progression across tonal scales
  • Color families without structured tonal ramps
  • Low semantic specificity in token naming
  • Lack of clearly defined accessibility guidelines
  • Absence of secondary/supporting color families within the palette

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

  • Expanded and restructured color palette, introducing two new base colors to increase expressive range;
  • Improved accessibility standards across key color combinations and UI components;
  • Increased system scalability through clearer tonal hierarchies and reusable structures;
  • Established a unified chromatic framework adopted across multiple product areas;
  • Enhanced semantic clarity, enabling more flexible and predictable application;
  • Reduced fragmentation by consolidating previously department-specific themes.

Deliverables

  • Re-architected color system with rebuilt tonal ramps, improved hue consistency, and expanded tonal range;
  • Accessibility framework integrated into the token structure, including validated contrast pairs and documented compliance criteria;
  • Structured token architecture with clear primitive–semantic separation and scalable naming logic;
  • Light and Dark mode implementation;
  • Handoff specification covering raw values, token hierarchy, and usage definitions;
  • Figma variable system aligned with engineering token architecture;
  • Refactored components and templates to ensure full system adoption;
  • Comprehensive documentation supporting usage, hierarchy, and long-term governance;
  • Coordinated rollout across supported products.

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