About Hard Rock BET
Hard Rock BET is the web and mobile online sportsbook experience from Hard Rock entertainment.
Problem
As Hard Rock BET experienced rapid growth, their design team faced challenges in maintaining visual consistency and component cohesion across the application. To address this, they needed a robust design system that would allow their designers to iterate efficiently and confidently.
I was assigned the task of creating an atomic design system that utilized variables and supported both light and dark modes across web, tablet, and mobile responsive breakpoints.
Primitive Variables
Variables were setup for the neutral and primary base colors using the Hard Rock color palette. Spacing and corner radius variables were set up on a 4 pixel scale.
Semantic Variables and Light/Dark Modes
Primitive variables were mapped to a semantic layer so they could be utilized across design components in consistent hierarchy. Modes were set up for light and dark versions of the UI.
Breakpoint Variables
Variables were setup for 4 breakpoint ranges for components to be rendered at different sizes.
Base Components
Atomic elements were created for isolated design elements.
Component Assemblies
Components are combined to create larger, more complex components.
App View
The app is fully built as a series of nested components to showcase how the UI looks at different device sizes and in light and dark modes.
