Design Tokens

I designed and contributed Design Tokens, including layout, typography, color palette, buttons, and icon library. Design tokens are accessible for different users and are customizable for content and branding needs from an atom level.

Challenges

  • Provide theming options for all learning content, such as Literature, Social Science, Math, etc.
  • Offer UI options for three student age groups (Grade K-2, 3-5, and 6-12).
  • Meet WCAG 2.1 standard.

Responsibility

I was a lead UI designer who designed and maintained the Design Tokens.

Accomplishment

I creating shared sketch libraries with product designers: container template, typography, color palette, icon library, and 18 UI elements with full-state design.

Tools: Sketch, Axure, and Principle. HTML, CSS, and SASS.

1. Layout

I created a shareable responsive layout with five content containers that fit in six screen sizes, along with the 12 columns design guidelines via Sketch.

2. Typography

I adapted the original typography from the Design System, applied it to one of the learning products, customized it with product font choice, line spacing, and font use for each level.

Applied 11 levels with white, dark gray, and medium gray that met the content creation needs met WCAG 2.1 compliance.

3. Color Palette

For meeting variety of the product content needs, and varying students ages, three color palettes were created: Core, Mute, and Saturate. I designed the Saturate color palette mainly used for grade k-2, 3-5 users.

How did I design it


4. Icons

The examples below are the UI patterns' icons I created. I have also contributed icons to the icon library for Patterns and platforms use.

5. Buttons

I provided full-state design for buttons and the size, responsiveness, and primary color choices.


6. UI Kit

I created a shareable UI kit with all product teams.