My Framer Site

Home

Teamgantt

UX case studies

UI redesigns

About

Contact

1940 individual components

1940 individual components

1940 individual components

480 design tokens

480 design tokens

480 design tokens

My role consists of creating, managing, and implementing our new design system with design tokens, drafting & prototyping creative solutions to new features, working with the engineering team to optimize workflows and design handoffs, and more.

My role consists of creating, managing, and implementing our new design system with design tokens, drafting & prototyping creative solutions to new features, working with the engineering team to optimize workflows and design handoffs, and more.

My role consists of creating, managing, and implementing our new design system with design tokens, drafting & prototyping creative solutions to new features, working with the engineering team to optimize workflows and design handoffs, and more.

Foundation category

The first element of the token represents the Foundational category. Examples are color, type, elevation, spacing, iconography, etc…

Type

The token's second element represents the design element where the token is being applied to. In this case, it is the background. This stage can also be known as "Property" or "Item".

Modifier

The last element in the token represents the state of the object that is being effected. This can also represent the scale or role of an object as well. Examples include default, hover, pressed, s, m, l, xl, etc…

Semantic colors

Neutral colors

Semantic colors

Neutral colors

Accent colors

Accent colors

Light vs dark mode conversion diagram

There is always a user.

Just like our company product, the design system also has a user. The engineering team. Creating the design system in such a way that benefits and optimizes the engineering team's workflow, is essential for high-velocity handoffs.

There is always an edge case.

Consistency amongst components and tokens in the design system is a given. Accounting for edge cases is much harder. Taking the time to gather all of the information and edge cases up front, save a lot of time for both designers and engineers.