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.
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
The examples below are the UI patterns' icons I created. I have also contributed icons to the icon library for Patterns and platforms use.
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.