Creating a Scalable Foundation for AMD Software
3 Team Members
May - October 2025
Design System Guy
Overview
During my internship with AMD’s User Experience team, I helped shape the design system that unifies the look, feel, and behavior of AMD’s digital products. From designing interactive prototypes to refining component behaviors and documenting patterns, I worked to create a system that empowers designers and developers to build cohesive experiences with clarity and efficiency.
HIGHLIGHT
I Built a scalable design system foundation to support AMD Software’s next-generation redesign and ensure long-term consistency across products.
Context
Laying the groundwork for change.
When I first joined, the team didn’t have a proper design system in place. Everyone had their own way of organizing files, assets were scattered, and the products often felt like they were stitched together without a common thread. At the same time, the team was transitioning its design assets from Adobe XD to Figma, which created the perfect moment to rethink how everything was organized.
Context 1.1 - problem overview
GOAL
This transition became an opportunity to reset rather than simply migrate files. Instead of recreating what existed, we moved everything to Figma to align on shared standards, clean up inconsistencies, and build a stronger foundation for collaboration and scale.
Establish a clear and consistent design foundation.
Create a unified design system that organizes assets, standardizes components, and brings consistency to the current AMD Software experience.
Improve design-to-development handover efficiency.
Create a scalable system that streamlines collaboration and ensures faster, more consistent design-to-development handover for the current AMD Software.
audit
Collect existing design assets.
To begin, I gathered all existing design assets, including screens, components, icons, and older explorations from multiple teams and past projects. I then organized them into clear pages, grouping related elements to understand the current ecosystem.
Audit 1.1 - grouping design assets
lAYING THE fOUNDATION
Color, spacing & text-styles.
With the foundation set, I moved on to defining the three core pillars of the visual language: color, spacing, and typography. These elements appear in every component, so getting them right was essential!
Foundation 1.1 - color, spacing & text-styles
BUILDING THE COMPONENTS
Defining component properties.
To make components more consistent and easier to use, I defined clear properties such as size, state, type, and icon options, grounded in a stronger foundation of design tokens and standardized patterns. This made components more predictable, scalable, and easier to use across teams.
Building 1.1 - component properties
Applying design tokens.
I applied color and typography tokens across all components to ensure they worked seamlessly in both light and dark mode.
Building 1.2 - applying design tokens
Slot method.
Instead of creating endless variants that would complicate the system, I chose to use the slot method. By treating slots as flexible placeholders, I gave the components room to adapt their content.
Building 1.3 - slot method
NEW PROJCECT DIRECTION
Turning a transition into opportunity.
As the team redirected efforts toward the next generation of AMD Software, I didn’t get the chance to fully test the design system built for the current product :(
However, this shift created a new opportunity to build a fresh design system from the ground up with stronger foundations, updated visuals, and patterns that better supported the future direction of the software.
New direction 1.1 - a new fresh start
NEW GOALS
Establish a clear and consistent design foundation.
Create a unified design system that organizes assets, standardizes components, and brings consistency to the current AMD Software experience.
Improve design-to-development handover efficiency.
Create a scalable system that streamlines collaboration and ensures faster, more consistent design-to-development handover for the current AMD Software.
+
Support future initiative with a scalable system.
Build a future-focused design system that serves as the foundation for the upcoming rework of AMD Software, ensuring designers and developers can collaborate efficiently as the product evolves.
Lessons From Earlier Attempts
Before diving into creating new assets, I wanted to make sure we were solving the right problem at the foundation level. And the problems were…
Color mismatch.
I discovered major inconsistencies in how colors were used across the product. Without clear guidelines, teams applied colors differently depending on their interpretation, leading to unclear states, mismatched styles, and a lack of visual hierarchy
Lessons 1.1 - color mismatch
Styling gaps.
I also found significant inconsistencies in component styling, one example is with buttons. Different screens used different sizes, corner radiuses, spacings, and even interaction states.
Lessons 1.2 - styling gaps
tAKING IT TO THE NEXT LEVEL
Instead of patching these inconsistencies one by one, I stepped back to understand the deeper pattern behind them. This shift in perspective allowed me to move beyond surface-level fixes and focus on building a more intentional, system-driven solution.
The push for a better color foundation.
To keep the design system flexible, I defined primitive tokens as the base color palette and used semantic tokens to apply those colors throughout the components. This allowed components to rely on intent-driven values rather than fixed hex codes.
Updates 1.1 - primitive tokens
Once the primitives were set, I mapped them to semantic tokens named by purpose or state. This ensured components always referenced meaningful, role-based tokens, which made updates much smoother and more consistent.
Update 1.2 - semantic tokens
A proper spacing & radius tokens.
To bring consistency to layouts, I introduced numeric tokens for spacing and radius based on a structured 4-point scale. By defining a predictable set of spacing and radius tokens, layout decisions became clearer, adjustments were safer to make.
Update 1.3 - structured spacing & radius tokens,
Streamlined text styling.
Text styles were inconsistent across different parts of the product, with each feature using its own font sizes and line heights. I simplified this by consolidating everything into a single, structured typography scale with clear header and body levels.
Update 1.4 - streamlined text-style
BUILDING THE COMPONENTS
Dissecting the designs.
After the designs were approved by stakeholders, I began breaking the UI into smaller, reusable components to establish a maintainable foundation. This process also revealed common UI patterns that could be reused across other screens and future designs
Building 2.1 - dissecting the designs
Applying proper color structure.
With the help of pre-defined color tokens, I could easily assign colors to components according to their semantic role. This not only sped up the design process but also ensured consistency across the system.
Building 2.2 - proper color structure
Applying foundational design tokens.
With predefined foundational tokens, all design assets can be categorized by token type, allowing designers to simply apply the appropriate tokens based on the asset type.
Building 2.3 - applying design tokens
Supporting multiple variants.
Instead of creating endless variants that would complicate the system, I chose to use the slot method. By treating slots as flexible placeholders, I gave the components room to adapt their content while still maintaining a consistent and polished appearance.
Building 2.4 - slot method
dOCUMENTATION
Reducing communication gaps between designers and developers.
Reducing communication gaps between designers and developers.
To solve back-and forth communication between design and development, I created guidelines that outline each component’s behavior and variants so designers and developers know exactly how things should work without the guesswork.
Guideline 1.1 - UI components behavior guideline
Guideline 1.2 - usage guideline
IMPACT
Consistent & maintainable mockups.
Once we started using system assets, things just felt more consistent. For example, colors were unified and the number of random hex codes floating around dropped way down. It also made our mockups so much easier to maintain, since updates could be applied quickly and carried across all designs without extra work.
Impact 1.1 - consistent color usage
Impact 1.2 - same vibess across assets
No more guess works.
Additionally, with pre-defined values, designers no longer have to guess values like spacing & radius. It is as easy as picking from a set menu! This not only sped up decision-making but also gave every screen a cohesive rhythm and flow.
Impact 1.3 - consistent radius & spacing
THE NEXT STEP
Proposing documentation using Supernova.
The next step is to create the documentation in Supernova, as it transforms the design system from static Figma files into a living, developer-ready source of truth. Supernova automatically syncs design tokens, components, and guidelines while generating platform-specific code and versioned documentation.
It also includes an AI assistant that allows internal team members to ask questions about components or usage, making it easier to discover, and understand the design system.
RETROSPECTIVE
What I learned.
Take Initiative!
Being initiative means taking action without waiting, spotting opportunities, proposing solutions, and new ideas forward to help the team succeed.
Extra Work Pays Off
Putting more efforts in the beginning of the development will benefit the team in the long run - stronger design quality, fewer downstream issues, and a far more efficient workflow for the entire team.
Overview
During my internship with AMD’s User Experience team, I helped shape the design system that unifies the look, feel, and behavior of AMD’s digital products. From designing interactive prototypes to refining component behaviors and documenting patterns, I worked to create a system that empowers designers and developers to build cohesive experiences with clarity and efficiency.
HIGHLIGHT
Built a scalable design system foundation to support AMD Software’s next-generation redesign and ensure long-term consistency across products.
Context
Laying the groundwork for change.
When I first joined, the team didn’t have a proper design system in place. Everyone had their own way of organizing files, assets were scattered, and the products often felt like they were stitched together without a common thread. At the same time, the team was transitioning its design assets from Adobe XD to Figma, which created the perfect moment to rethink how everything was organized.
When I first joined, the team didn’t have a proper design system in place. Everyone had their own way of organizing files, assets were scattered, and the products often felt like they were stitched together without a common thread. At the same time, the team was transitioning its design assets from Adobe XD to Figma, which created the perfect moment to rethink how everything was organized.
Context 1.1 - problem overview
Context 1.1 - problem overview
GOAL
Establish a clear and consistent design foundation.
Create a unified design system that organizes assets, standardizes components, and brings consistency to the current AMD Software experience.
Improve design-to-development handover efficiency.
Create a scalable system that streamlines collaboration and ensures faster, more consistent design-to-development handover for the current AMD Software.
audit
Collect existing design assets.
I gathered all existing design assets, including screens, components, icons, and older explorations from multiple teams and past projects. I then organized them into clear pages, grouping related elements to understand the current ecosystem.
Audit 1.1 - grouping design assets
Audit 1.1 - grouping design assets
lAYING THE fOUNDATION
Color, spacing & text-styles.
With the foundation set, I moved on to defining the three core pillars of the visual language: color, spacing, and typography. These elements appear in every component, so getting them right was essential!
Foundation 1.1 - color, spacing & text-styles
Foundation 1.1 - color, spacing & text-styles
Documentation template.
To ensure the design system was easy to understand and adopt, I created a clear documentation template that standardized how every component and pattern should be presented.
Foundation 1.2 - documentation template
Foundation 1.2 - documentation template
BUILDING THE COMPONENTS
Defining component properties.
To make components more consistent and easier to use, I defined clear properties for each one, such as size, state, type, and icon options.
Building 1.1 - component properties
Building 1.1 - component properties
Applying design tokens.
I applied color and typography tokens across all components to ensure they worked seamlessly in both light and dark mode.
Building 1.2 - applying design tokens
Building 1.2 - applying design tokens
Slot method.
Instead of creating endless variants that would complicate the system, I chose to use the slot method. By treating slots as flexible placeholders, I gave the components room to adapt their content.
Building 1.3 - slot method
Building 1.3 - slot method
NEW PROJCECT DIRECTION
Shifted focus to improving experience for future software.
As the team redirected efforts toward the next generation of AMD Software, I didn’t get the chance to fully test the design system built for the current product :(
However, this shift created a new opportunity to build a fresh design system from the ground up with stronger foundations, updated visuals, and patterns that better supported the future direction of the software.
New direction 1.1 - a new fresh start
New direction 1.1 - a new fresh start
NEW GOALS
Support future initiative with a scalable system.
Build a future-focused design system that serves as the foundation for the upcoming rework of AMD Software, ensuring designers and developers can collaborate efficiently as the product evolves.
Lessons From Earlier Attempts
Color mismatch.
I discovered major inconsistencies in how colors were used across the product. Without clear guidelines, teams applied colors differently depending on their interpretation, leading to unclear states, mismatched styles, and a lack of visual hierarchy
Lessons 1.1 - color mismatch
Lessons 1.1 - color mismatch
Styling gaps.
I also found significant inconsistencies in component styling, one example is with buttons. Different screens used different sizes, corner radiuses, spacings, and even interaction states.
Lessons 1.2 - styling gaps
Lessons 1.2 - styling gaps
tAKING IT TO THE NEXT LEVEL
The push for a better color foundation.
To keep the design system flexible, I defined primitive tokens as the base color palette and used semantic tokens to apply those colors throughout the components. This allowed components to rely on intent-driven values rather than fixed hex codes.
Updates 1.1 - primitive tokens
Updates 1.1 - primitive tokens
Once the primitives were set, I mapped them to semantic tokens named by purpose or state. This ensured components always referenced meaningful, role-based tokens, which made updates much smoother and more consistent.
Update 1.2 - semantic tokens
Update 1.2 - semantic tokens
A proper spacing & radius tokens.
To bring consistency to layouts, I introduced numeric tokens for spacing and radius based on a structured 4-point scale. By defining a predictable set of spacing and radius tokens, layout decisions became clearer, adjustments were safer to make.
Update 1.3 - structured spacing & radius tokens,
Update 1.3 - structured spacing & radius tokens,
Streamlined text styling.
Text styles were inconsistent across different parts of the product, with each feature using its own font sizes and line heights. I simplified this by consolidating everything into a single, structured typography scale with clear header and body levels.
Update 1.4 - streamlined text-style
Update 1.4 - streamlined text-style
BUILDING THE COMPONENTS
Dissecting the designs.
After the designs were approved by stakeholders, I began breaking the UI into smaller, reusable components to establish a maintainable foundation. This process also revealed common UI patterns that could be reused across other screens and future designs
Building 2.1 - dissecting the designs
Building 2.1 - dissecting the designs
Applying proper color structure.
With the help of pre-defined color tokens, I could easily assign colors to components according to their semantic role. This not only sped up the design process but also ensured consistency across the system.
Building 2.2 - proper color structure
Building 2.2 - proper color structure
Applying foundational design tokens.
With predefined foundational tokens, all design assets can be categorized by token type, allowing designers to simply apply the appropriate tokens based on the asset type.
Building 2.3 - applying design tokens
Building 2.3 - applying design tokens
Supporting multiple variants.
Instead of creating endless variants that would complicate the system, I chose to use the slot method. By treating slots as flexible placeholders, I gave the components room to adapt their content while still maintaining a consistent and polished appearance.
Building 2.4 - slot method
Building 2.4 - slot method
dOCUMENTATION
Reducing communication gaps between designers and developers.
Reducing communication gaps between designers and developers.
To solve back-and forth communication between design and development, I created guidelines that outline each component’s behavior and variants so designers and developers know exactly how things should work without the guesswork.
Guideline 1.1 - UI components behavior guideline
Guideline 1.1 - UI components behavior guideline
Guideline 1.2 - usage guideline
Guideline 1.2 - usage guideline
IMPACT
Consistent & maintainable mockups.
Consistent & maintainable mockups.
Once we started using system assets, things just felt more consistent. For example, colors were unified and the number of random hex codes floating around dropped way down. It also made our mockups so much easier to maintain, since updates could be applied quickly and carried across all designs without extra work.
Impact 1.1 - consistent color usage
Impact 1.1 - consistent color usage
No more guess works.
No more guess works.
Additionally, with pre-defined values, designers no longer have to guess values like spacing & radius. It is as easy as picking from a set menu! This not only sped up decision-making but also gave every screen a cohesive rhythm and flow.
Impact 1.2 - consistent radius & spacing
Impact 1.2 - consistent radius & spacing
THE NEXT STEP
Proposing documentation using Supernova.
Proposing documentation using Supernova.
The next step is to create the documentation in Supernova, as it transforms the design system from static Figma files into a living, developer-ready source of truth. Supernova automatically syncs design tokens, components, and guidelines while generating platform-specific code and versioned documentation.
It also includes an AI assistant that allows internal team members to ask questions about components or usage, making it easier to discover, and understand the design system.
RETROSPECTIVE
What I learned.
Take Initiative!
Being initiative means taking action without waiting, spotting opportunities, proposing solutions, and new ideas forward to help the team succeed.
Extra Work Pays Off
Putting more efforts in the beginning of the development will benefit the team in the long run - stronger design quality, fewer downstream issues, and a far more efficient workflow for the entire team.