Design Systems

Hyatt Web Design System

My Contributions

As lead designer for Hyatt’s Bellhop Design System, I guide the evolution of themes, elements, and typography that power digital experiences for over 40 brands worldwide. I’ve established processes for component exploration, built the design libraries used daily by internal design teams, and introduced scalable systems for typography and background patterns. My work ensures Bellhop continues to deliver accessible, brand-authentic designs across Hyatt’s portfolio.

Role

Lead Product Designer, Hyatt Hotels

2023 – Present

Remote

Services

Component Library, Icon Library, Documentation, Sketch & Figma UI Kits

The Challenge

About Hyatt

Hyatt Hotels Corporation is a global leader in hospitality with more than 2,200 hotels, resorts, and properties across 40+ brands in 79 countries. Guided by its purpose of caring for customers and their wellbeing within unique and memorable destinations, Hyatt places care at the center of every guest experience, every brand, and every innovation.

Bellhop Design System

Hyatt has long recognized the importance of creating consistent, scalable, and accessible digital experiences across its global portfolio of hospitality brands. Over ten years ago, the company invested in a design system to serve its websites, but as the brand portfolio expanded, and guest expectations evolved, the system needed a more structured and scalable approach.

 

Bellhop, Hyatt’s design system, is the foundation for all brand and property websites under the Hyatt umbrella. With 68 unique themes (spanning 43 brands and their variations) and a growing library of reusable components, Bellhop enables designers and developers to deliver cohesive digital experiences that reflect each brand’s identity while maintaining technical and accessibility standards.

The Solution

Using a foundation informed by industry-leading systems like Material, Spectrum, Carbon, and Lightning, Hyatt tailors its designs system to meet global needs, guest diversity, and an extensive brand portfolio.

 

Bellhop brings together themes, elements, and typography in a tightly integrated framework.

Themes

Themes translate brand style guides into digital design language. Each theme includes a unique palette of primitive colors, responsive typography scales, customizable assets, and a grayscale spectrum (cool, neutral, or warm) that aligns with brand aesthetics. Semantic tokens, derived from primitive colors, are used to style elements for distinct brand character regardless of theme.

Elements

Elements are reusable, React-based components built with accessibility in mind. They are critically examined, researched, designed, and documented, and then implemented with considerations for scalable standards or tiered overrides. Each element supports functional states, keyboard interactions, and both light and dark background variations. Before adding elements to the design system, an audit is completed validating a minimum of three unique use cases across experiences.

Typography

Typography supports 25 languages and six character sets, balancing licensed Monotype and Google Fonts with the global Noto family for utility text styles. Each theme includes branded display and heading fonts, ensuring consistency while reflecting each brand’s personality and international reach.

My Impact

When I joined Hyatt’s design systems team, I was a senior product designer contributing to theme creation and element design. Over the past 2.5 years, I’ve grown into the role of lead designer, where I now oversee the design strategy and execution of Bellhop. My impact has centered on introducing structure, elevating standards, and ensuring adoption across the broader design team.

Element Exploration Process

I developed a comprehensive process to guide the creation of new components. This includes:

  • research of use cases across Hyatt’s digital ecosystem
  • exploration of design patterns from other systems
  • design variations to support brand themes
  • accessibility requirements and redlines
  • detailed usage documentation and adoption guidelines
  • preparing elements for development and QA before launch

 

Since joining the team, I’ve helped launch 20 new components, including a complete form suite, all designed and documented through this process. This framework ensures that each element is thoroughly vetted, accessible, and valuable across multiple brands.

Theme Development

I translate brand style guides into digital themes, ensuring compliance with WCAG AA contrast requirements and designing complete typography suites. Each theme package is delivered as a Figma kit for the design team and a CSS package for engineering.

Figma Migration & Training

When our team transitioned from Sketch, I researched best practices and restructured our libraries for scale. I migrated more than 15 UI kits from Sketch into Figma, then leveraged Figma’s variables, modes, and library features to create 23 entirely new UI kits. Today I manage our growing collection of design libraries, maintaining accuracy and alignment for the 26 designers who use them daily.

Typography Scale

I established a responsive type scale for branded heading styles, eliminating inconsistencies and providing clear hierarchy across breakpoints.

Icon Library Redesign

I led a full overhaul of Hyatt’s iconography. Updating the library from 180 icons to a modern, international set with consistent stroke weight and improved legibility, I also designed 35 new icons and introduced usability testing to validate recognition. I continue to maintain and expand the library.

Documentation & Technical Writing

To improve clarity and adoption, I earned a technical writing certification and now write usage documentation for all Bellhop components. My writing balances clarity for designers and precision for developers, supporting smooth implementation across teams and platforms.

Collaboration & QA

I prepare design deliverables for development, including spreadsheets of token values, typography specifications, and image assets. I also conduct QA for both themes and components, ensuring accuracy, accessibility, and responsiveness at launch.

Outcomes

Since my time on the team, Bellhop has matured into a more structured, scalable system that supports Hyatt’s growing digital ecosystem. Designers have access to robust, easy-to-use libraries in Figma, developers rely on clear documentation, and brands benefit from consistent, accessible representation online.

 

The system continues to evolve with new themes, components, and global requirements — and I’ve played a key role in shaping Bellhop into a modern, enterprise-grade design system that enables both creativity and consistency.

Natasha Martindale © Copyright 2025 Design by Nat

Design Systems

Hyatt Web Design System

My Contributions

As lead designer for Hyatt’s Bellhop Design System, I guide the evolution of themes, elements, and typography that power digital experiences for over 40 brands worldwide. I’ve established processes for component exploration, built the design libraries used daily by internal design teams, and introduced scalable systems for typography and background patterns. My work ensures Bellhop continues to deliver accessible, brand-authentic designs across Hyatt’s portfolio.

Role

Lead Product Designer, Hyatt Hotels

2023 – Present

Remote

Services

Component Library, Icon Library, Documentation, Sketch & Figma UI Kits

The Challenge

About Hyatt

Hyatt Hotels Corporation is a global leader in hospitality with more than 2,200 hotels, resorts, and properties across 40+ brands in 79 countries. Guided by its purpose of caring for customers and their wellbeing within unique and memorable destinations, Hyatt places care at the center of every guest experience, every brand, and every innovation.

Bellhop Design System

Hyatt has long recognized the importance of creating consistent, scalable, and accessible digital experiences across its global portfolio of hospitality brands. Over ten years ago, the company invested in a design system to serve its websites, but as the brand portfolio expanded, and guest expectations evolved, the system needed a more structured and scalable approach.

 

Bellhop, Hyatt’s design system, is the foundation for all brand and property websites under the Hyatt umbrella. With 68 unique themes (spanning 43 brands and their variations) and a growing library of reusable components, Bellhop enables designers and developers to deliver cohesive digital experiences that reflect each brand’s identity while maintaining technical and accessibility standards.

The Solution

Using a foundation informed by industry-leading systems like Material, Spectrum, Carbon, and Lightning, Hyatt tailors its designs system to meet global needs, guest diversity, and an extensive brand portfolio.

 

Bellhop brings together themes, elements, and typography in a tightly integrated framework.

Themes

Themes translate brand style guides into digital design language. Each theme includes a unique palette of primitive colors, responsive typography scales, customizable assets, and a grayscale spectrum (cool, neutral, or warm) that aligns with brand aesthetics. Semantic tokens, derived from primitive colors, are used to style elements for distinct brand character regardless of theme.

Elements

Elements are reusable, React-based components built with accessibility in mind. They are critically examined, researched, designed, and documented, and then implemented with considerations for scalable standards or tiered overrides. Each element supports functional states, keyboard interactions, and both light and dark background variations. Before adding elements to the design system, an audit is completed validating a minimum of three unique use cases across experiences.

Typography

Typography supports 25 languages and six character sets, balancing licensed Monotype and Google Fonts with the global Noto family for utility text styles. Each theme includes branded display and heading fonts, ensuring consistency while reflecting each brand’s personality and international reach.

My Impact

When I joined Hyatt’s design systems team, I was a senior product designer contributing to theme creation and element design. Over the past 2.5 years, I’ve grown into the role of lead designer, where I now oversee the design strategy and execution of Bellhop. My impact has centered on introducing structure, elevating standards, and ensuring adoption across the broader design team.

Element Exploration Process

I developed a comprehensive process to guide the creation of new components. This includes:

  • research of use cases across Hyatt’s digital ecosystem
  • exploration of design patterns from other systems
  • design variations to support brand themes
  • accessibility requirements and redlines
  • detailed usage documentation and adoption guidelines
  • preparing elements for development and QA before launch

 

Since joining the team, I’ve helped launch 20 new components, including a complete form suite, all designed and documented through this process. This framework ensures that each element is thoroughly vetted, accessible, and valuable across multiple brands.

Theme Development

I translate brand style guides into digital themes, ensuring compliance with WCAG AA contrast requirements and designing complete typography suites. Each theme package is delivered as a Figma kit for the design team and a CSS package for engineering.

Figma Migration & Training

When our team transitioned from Sketch, I researched best practices and restructured our libraries for scale. I migrated more than 15 UI kits from Sketch into Figma, then leveraged Figma’s variables, modes, and library features to create 23 entirely new UI kits. Today I manage our growing collection of design libraries, maintaining accuracy and alignment for the 26 designers who use them daily.

Typography Scale

I established a responsive type scale for branded heading styles, eliminating inconsistencies and providing clear hierarchy across breakpoints.

Icon Library Redesign

I led a full overhaul of Hyatt’s iconography. Updating the library from 180 icons to a modern, international set with consistent stroke weight and improved legibility, I also designed 35 new icons and introduced usability testing to validate recognition. I continue to maintain and expand the library.

Documentation & Technical Writing

To improve clarity and adoption, I earned a technical writing certification and now write usage documentation for all Bellhop components. My writing balances clarity for designers and precision for developers, supporting smooth implementation across teams and platforms.

Collaboration & QA

I prepare design deliverables for development, including spreadsheets of token values, typography specifications, and image assets. I also conduct QA for both themes and components, ensuring accuracy, accessibility, and responsiveness at launch.

Outcomes

Since my time on the team, Bellhop has matured into a more structured, scalable system that supports Hyatt’s growing digital ecosystem. Designers have access to robust, easy-to-use libraries in Figma, developers rely on clear documentation, and brands benefit from consistent, accessible representation online.

 

The system continues to evolve with new themes, components, and global requirements — and I’ve played a key role in shaping Bellhop into a modern, enterprise-grade design system that enables both creativity and consistency.

Natasha Martindale © Copyright 2025 Design by Nat

Design Systems

Hyatt Web Design System

My Contributions

As lead designer for Hyatt’s Bellhop Design System, I guide the evolution of themes, elements, and typography that power digital experiences for over 40 brands worldwide. I’ve established processes for component exploration, built the design libraries used daily by internal design teams, and introduced scalable systems for typography and background patterns. My work ensures Bellhop continues to deliver accessible, brand-authentic designs across Hyatt’s portfolio.

Role

Lead Product Designer, Hyatt Hotels

2023 – Present

Remote

Services

Component Library, Icon Library, Documentation, Sketch & Figma UI Kits

The Challenge

About Hyatt

Hyatt Hotels Corporation is a global leader in hospitality with more than 2,200 hotels, resorts, and properties across 40+ brands in 79 countries. Guided by its purpose of caring for customers and their wellbeing within unique and memorable destinations, Hyatt places care at the center of every guest experience, every brand, and every innovation.

Bellhop Design System

Hyatt has long recognized the importance of creating consistent, scalable, and accessible digital experiences across its global portfolio of hospitality brands. Over ten years ago, the company invested in a design system to serve its websites, but as the brand portfolio expanded, and guest expectations evolved, the system needed a more structured and scalable approach.

 

Bellhop, Hyatt’s design system, is the foundation for all brand and property websites under the Hyatt umbrella. With 68 unique themes (spanning 43 brands and their variations) and a growing library of reusable components, Bellhop enables designers and developers to deliver cohesive digital experiences that reflect each brand’s identity while maintaining technical and accessibility standards.

The Solution

Using a foundation informed by industry-leading systems like Material, Spectrum, Carbon, and Lightning, Hyatt tailors its designs system to meet global needs, guest diversity, and an extensive brand portfolio.

 

Bellhop brings together themes, elements, and typography in a tightly integrated framework.

Themes

Themes translate brand style guides into digital design language. Each theme includes a unique palette of primitive colors, responsive typography scales, customizable assets, and a grayscale spectrum (cool, neutral, or warm) that aligns with brand aesthetics. Semantic tokens, derived from primitive colors, are used to style elements for distinct brand character regardless of theme.

Elements

Elements are reusable, React-based components built with accessibility in mind. They are critically examined, researched, designed, and documented, and then implemented with considerations for scalable standards or tiered overrides. Each element supports functional states, keyboard interactions, and both light and dark background variations. Before adding elements to the design system, an audit is completed validating a minimum of three unique use cases across experiences.

Typography

Typography supports 25 languages and six character sets, balancing licensed Monotype and Google Fonts with the global Noto family for utility text styles. Each theme includes branded display and heading fonts, ensuring consistency while reflecting each brand’s personality and international reach.

My Impact

When I joined Hyatt’s design systems team, I was a senior product designer contributing to theme creation and element design. Over the past 2.5 years, I’ve grown into the role of lead designer, where I now oversee the design strategy and execution of Bellhop. My impact has centered on introducing structure, elevating standards, and ensuring adoption across the broader design team.

Element Exploration Process

I developed a comprehensive process to guide the creation of new components. This includes:

  • research of use cases across Hyatt’s digital ecosystem
  • exploration of design patterns from other systems
  • design variations to support brand themes
  • accessibility requirements and redlines
  • detailed usage documentation and adoption guidelines
  • preparing elements for development and QA before launch

 

Since joining the team, I’ve helped launch 20 new components, including a complete form suite, all designed and documented through this process. This framework ensures that each element is thoroughly vetted, accessible, and valuable across multiple brands.

Theme Development

I translate brand style guides into digital themes, ensuring compliance with WCAG AA contrast requirements and designing complete typography suites. Each theme package is delivered as a Figma kit for the design team and a CSS package for engineering.

Figma Migration & Training

When our team transitioned from Sketch, I researched best practices and restructured our libraries for scale. I migrated more than 15 UI kits from Sketch into Figma, then leveraged Figma’s variables, modes, and library features to create 23 entirely new UI kits. Today I manage our growing collection of design libraries, maintaining accuracy and alignment for the 26 designers who use them daily.

Typography Scale

I established a responsive type scale for branded heading styles, eliminating inconsistencies and providing clear hierarchy across breakpoints.

Icon Library Redesign

I led a full overhaul of Hyatt’s iconography. Updating the library from 180 icons to a modern, international set with consistent stroke weight and improved legibility, I also designed 35 new icons and introduced usability testing to validate recognition. I continue to maintain and expand the library.

Documentation & Technical Writing

To improve clarity and adoption, I earned a technical writing certification and now write usage documentation for all Bellhop components. My writing balances clarity for designers and precision for developers, supporting smooth implementation across teams and platforms.

Collaboration & QA

I prepare design deliverables for development, including spreadsheets of token values, typography specifications, and image assets. I also conduct QA for both themes and components, ensuring accuracy, accessibility, and responsiveness at launch.

Outcomes

Since my time on the team, Bellhop has matured into a more structured, scalable system that supports Hyatt’s growing digital ecosystem. Designers have access to robust, easy-to-use libraries in Figma, developers rely on clear documentation, and brands benefit from consistent, accessible representation online.

 

The system continues to evolve with new themes, components, and global requirements — and I’ve played a key role in shaping Bellhop into a modern, enterprise-grade design system that enables both creativity and consistency.