UNFOLD MEDIA
Inciteful Stories. Driven By Design.
UI Kit, Color & Typography

O'Reilly XD, Design System

 

Our design system is a framework comprised of React components that give us the building materials (design, copy, and motion) enabling us to quickly architect product solutions for our customers.

Why Design Systems? 

Design systems create many benefits. Not least of all is the freedom it gives to our cross-functional teams. Freedom for XD to focus more on interactions and flow through low-to-high fidelity MVPs by spending less time pushing pixels. Freedom for our engineer friends to focus on developing the application logic vs. interpreting designs.

What's the backbone of our design system?

We start with visual Brand/UI and Research, perform a component audit (define core materials needed) hold an analysis workshop (build consensus around best-of-breed design patterns), define design principles (guide the work), and then prioritize the materials to be designed by the acute problems our customers (proto-personas) have expressed. 

What’s in our design system?

Glad you asked, let's pop the hood and look inside...

Go back to main menu

UI Kit, Color & Typography

UI Kit, Color & Typography

Typography-Primary.png
UI Kit, Atoms

UI Kit, Atoms

Atoms.png
UI Kit, Photography Treatments

UI Kit, Photography Treatments

UI Kit, Semiotics

UI Kit, Semiotics

icon_sketches0.png
icon_sketches3.png
icon_sketches4.png
icon_sketches5.png
UI Kit, Video Pre Roll

UI Kit, Video Pre Roll

Design System Site

Design System Site

Easy to access, easy to recall and even easier to use company wide.

styleguide0.png
styleguide1.png
The Workflow

The Workflow

We work hand in hand with product and engineering teams to rollout pilot apps that incorporate the new design patterns.

VSG_Rollout_Process.png