Ted Low

Ted Low

I craft design systems that scale and brands that shine.

Ted Low

Ted Low

I craft design systems that scale and brands that shine.

Ted Low

Ted Low

I craft design systems that scale and brands that shine.

About

About

Hey-o, I’m Ted Low, a senior designer with over a decade of experience in design systems and branding.

I’m currently working on PENN Entertainment / theScore’s core design system, Alley-oop, which covers industry leading brands such as ESPN BET, theScore, Hollywood Casino, and Penn on mobile and web. Additionally, I work with a broad range of stakeholders on exploratory initiatives that deepen brand equity and connect our apps and services with new partners.

Work

Work

Work

Alley-oop

Branding a design system

Explore

Alley-oop

Branding a design system

Explore

Alley-oop

Branding a design system

Explore

Icons

Stylizing and tokenizing

Our icon tokens were inconsistently organized and stylized.
The library was scattered across multiple files, making it hard to navigate. The automated pipeline (a script to parse Figma .json through GitHub) lacked flexibility for iconography. Icons were styled and sized inconsistently. Designers and developers often struggled to find the correct icons in the repositories.

We established guidelines for designing icons and centralized the library.
The guidelines provided icon sizing, style, and padding, ensuring consistency across the library. The library was held in one Figma file, where both designers and developers can find the tokens easily (we improved search by adding keywords to components) and the design system team can more easily manage them.

This resulted in fewer inquiries about where icons could be found in the repo, and greater consistency between design and development.
Inquiries about icon locations dropped by 64%. The guidelines on the documentation site have streamlined the design process and removed significant ambiguity when making decisions. It has also provided (non-systems) designers with the ability to create their own icons.

Icons

Stylizing and tokenizing

Our icon tokens were inconsistently organized and stylized.
The library was scattered across multiple files, making it hard to navigate. The automated pipeline (a script to parse Figma .json through GitHub) lacked flexibility for iconography. Icons were styled and sized inconsistently. Designers and developers often struggled to find the correct icons in the repositories.

We established guidelines for designing icons and centralized the library.
The guidelines provided icon sizing, style, and padding, ensuring consistency across the library. The library was held in one Figma file, where both designers and developers can find the tokens easily (we improved search by adding keywords to components) and the design system team can more easily manage them.

This resulted in fewer inquiries about where icons could be found in the repo, and greater consistency between design and development.
Inquiries about icon locations dropped by 64%. The guidelines on the documentation site have streamlined the design process and removed significant ambiguity when making decisions. It has also provided (non-systems) designers with the ability to create their own icons.

Icons

Stylizing and tokenizing

Our icon tokens were inconsistently stylized and organized.
The library was scattered across multiple files, making it hard to navigate. The automated pipeline (a script to parse figma .json through github) lacked flexibility for iconography. Icons were styled and sized inconsistently. Designers and developers often struggled to find the correct icons in the repositories.

Guidelines for designing icons were established and the library was centralized.
I established clear guidelines for icon sizing, style, and padding ensuring consistency across the library. The icon token library was centralized in to one file in Figma, where both designers and developers, can find the tokens easily (we improved search by attaching keywords to components) and the design system team can manage them easily.

This resulted in less inquiries of where icons could be found in the repo and greater consistency between design and development.
Inquiries about icon locations dropped by 64%. The guidelines on the documentation site now provides clear guidelines for designers when creating new icon, which has streamlined the design process and removed a ton of ambiguity when making decisions. It has also provided (non-systems) designers with the ability to create their own icons.

Request portfolio deck ↗

Hollywood Casino

Color scales and recoloring

The team was asked to color a product with no color scales attached to the brand.
The newly rebranded Hollywood Casino had great brand guidelines but no color scales. The brand guidelines provided only primary brand colors, with no UI-friendly scales for accessibility and consistency.

I developed a method for creating color scales.
I created a full set of color scales—for background, action, danger, success, and warning colors. I started with an online color scale generator, then carefully tweaked the scales by hand. The scales maintained perceptual uniformity in brightness, which ensured usability while staying true to the brand.

It was a hugely successful launch with a beautiful product.
The new colors made the app cohesive and reflect the brand's visual direction. This work contributed to the app climbing seven spots in the rankings, securing the #2 position among North American casino apps compared to the previous year.

Hollywood Casino

Color scales and recoloring

The team was asked to color a product with no color scales attached to the brand.
The newly rebranded Hollywood Casino had great brand guidelines but no color scales. The brand guidelines provided only primary brand colors, with no UI-friendly scales for accessibility and consistency.

I developed a method for creating color scales.
I created a full set of color scales—for background, action, danger, success, and warning colors. I started with an online color scale generator, then carefully tweaked the scales by hand. The scales maintained perceptual uniformity in brightness, which ensured usability while staying true to the brand.

It was a hugely successful launch with a beautiful product.
The new colors made the app cohesive and reflect the brand's visual direction. This work contributed to the app climbing seven spots in the rankings, securing the #2 position among North American casino apps compared to the previous year.

Hollywood Casino

Color scales and recoloring

The team was asked to color a product with no color scales attached to the brand.
The newly rebranded Hollywood Casino had great brand guidelines but no color scales. The brand guidelines provided only primary brand colors, with no UI-friendly scales for accessibility and consistency.

I developed a method for creating color scales.
I created a full set of color scales—for background, action, danger, success, and warning colors. I started with an online color scale generator, then carefully tweaked the scales by hand. The scales maintained perceptual uniformity in brightness, which ensured usability while staying true to the brand.

It was a hugely successful launch with a beautiful product.
The new colors made the app cohesive and reflect the brand's visual direction. This work contributed to the app climbing seven spots in the rankings, securing the #2 position among North American casino apps compared to the previous year.

Request portfolio deck ↗