top of page

What This Project is About

Genie Design System was developed to address the inconsistencies and lack of cohesion in the website. This design system aims to establish a consistent and efficient design and development process for all future products and services. By implementing the Genie Design System, aims to enhance user experience, ensure inclusivity, and improve the credibility and loyalty of the brand.

My Team 

Krystal Eborn

Lilian Yang

& Me



Zero height


Product Designer - Design Systems


I contributed to the development of the design system in various ways. I audited the site for elements and inconsistencies, brainstormed and documented design principles, and defined spacing & grid and shadows guidelines. I also designed text inputs and lists as components and documented their guidelines on Zeroheight


A little about Genie

The Genie Design System was created based off of a lack of a design system for the site. Some aspects of the site were inconsistent and needed a more simple way of bringing the site together in a cohesive manner.

Group 22.png

Why do we need a design system?

Group 23.png
Group 24.png


To address the challenges faced, the Genie Design System was created with a focus on four primary design values and principles:



Ensure diversity with inclusive design


Arouse curiosity with compelling experiences


Welcome everyone with a sense of connectivity


Build trust with excellent UX



Demonstrate respect for diversity by designing with accessibility standards and through a culture-friendly lens.


Use stimulating language and interesting visuals to engage and motivate people.


Establish an inviting atmosphere by promoting a sense of community and togetherness in design, language, and media


Ensure the content is factual and the sources used are trusted. Design with consistency and cohesiveness to deliver familiarity to people.


Group 1.png
Group 3.png

Atomic Design 

The design system was created using the atomic design approach, which involves breaking down components into smaller, reusable building blocks.

atomic-design-stages 1.png

Using the Atomic Design approach allowed us to create a consistent and scalable design system that can easily be updated and adapted to different contexts and needs.




It was critical for us to start having alignment within the team on the foundations of our system.

For typography, in our deconstruction, we identified many inconsistencies in size, weight, line height, and font style. We condensed the same style (Helvetica Neue) to be more consistent across the site.

Group 25.png



Primary Color: We kept the same blue color currently used on as our primary color. This maintains familiarity for users.

Color Scale: We introduced a color scale to provide flexibility for light and dark variations of the primary color. This allows us to create a visual hierarchy and add depth to the design.

Accessibility: We prioritized maximum accessibility when picking the colors for the design system. We followed WCAG 2.1 guidelines to ensure color combinations meet the max contrast requirements. This makes the design more inclusive for users with visual impairments or color blindness.

Group 26.png



We use shadows to show depth, dimension and visual hierarchy. We use this on buttons, cards, and modals to create consistency and a visually appealing user interface.

Shadows are an important part of our design system and can be used to add depth, dimension and visual hierarchy to UI elements. Our shadow property includes color, blur, and offset.

Usage guidelines include using small, subtle shadows for buttons, larger shadows for cards, and shadows with larger offsets for modals.

Group 27.png


Grid & Spacing 

We defined grids for four screen sizes, large desktop and medium, Ipad, and phone. And our spacing is based on multiples of 8 

Group 28.png


Our system was built with the smallest component, which is what we call atoms. This includes icons, buttons, text inputs, tags, selectable and dropdown chips, accordions, navigation items, and individual list items.

Group 29.png

As well as media components for photos, videos, and news. And most importantly, since we are designing for a broadway musical website, we have the Cards for Broadway shows. You might think these cards are more high-level than atoms, since they look like a combination of several different components. But, these components actually cannot be independent when not used exactly in this form. 

Group 30.png


When these atoms are combined together, then they belong to Molecules. A molecule is a combination of 1 or 2 different atoms. And unlike atoms, they can still work by themselves even if one atom is removed,

Group 31.png
Group 32.png


In our system, an organism is a combination of more than 2 different atoms and molecules. If you break down this ‘Search-Musicals’ organism you can see that they are made of 5 different atoms: A logo, a text input, Dropdown Chips, and a button!

Group 4.png

Templates & Pages 

Then, when they are composed together to become a layout that provides the structure for displaying content, it is called a template. And then you combine these templates, it becomes A Page.

How is our system built?

Create variants: Variants are variations of the core components that have different styles or functionalities based on the context or user needs. For example, a button might have a disabled state or a hover state. By creating variants, you can add flexibility to your design system without sacrificing consistency

Group 33.png

Define properties: Properties are the specific attributes of each component or variant. These attributes define how they look and behave, such as font size, color, padding, or margin. By defining properties, you can ensure that each component or variant has a consistent appearance and behavior.

Auto Layout: can be used in a design system to create flexible and responsive components. Designers can set constraints and rules for how the components should behave when the screen size changes, making it easier to design for different device types and screen sizes.

Using and maintaining the system

Genie Design system library is published through figma community!

Our guideline for using the system is online and published through zero heights, and it follows the same groupings as the Figma file for easy access and find-ability, we’re hoping the guidelines help with onboarding to understand the system better. 

Screenshot 2023-05-04 at 1.03 1.png
Group 21.png

Who Can use it?

Group 17.png


Can use our design system to create consistent, visually appealing designs that are optimized for all screen sizes. Be efficient and quickly create layouts and visual designs that are visually balanced and aesthetically pleasing.

Group 16.png

Product Managers

Can use our design system to ensure that all design elements are consistent across all products and platforms. This can help to create a unified brand identity and improve the user experience.

Group 15.png


Even though our design system does not include code, developers can still refer to it to understand the visual design and layout of the product. This can help them to create more efficient and effective code that aligns with the design system.

How to contribute?

Contributions to Genie Design System are welcomed! Whether for questions, concerns, or suggestions for improving Genie Design System!

Screenshot 2023-05-03 at 3.20 1.png
bottom of page