I worked with my team to create a design system toolkit in Sketch for all OneNote designers. Our goal was to provide a collection of reusable elements, and clear explanations of design standards so our designers wouldn’t need to hunt down details and could spend more time designing. We worked with our product designers to include helpful components, but also make sure that there wasn’t too much included in the file to make it hard to find what they needed. We captured colors, typography, dialogs, basic inputs, and other essential elements of OneNote to facilitate easy reference. We also strived to make the toolkit scalable so we could add or remove elements as designers provided us with feedback.

I also worked with designers from other Microsoft Office applications to try and align elements like basic inputs, dialogs, and colors across all Microsoft Office applications.

 

 

Design Language

 

Grids and Margins

 

Color Usage

 

Color

 

Basic Inputs

 

Buttons

 

Left Navigation

 

Notebook Pane

Notebook Pane Pieces

 

Panels and Dialogs

 

Settings Panel

Share Panel