10.12.0

Our Visual Language

This page outlines the guiding principles that inform Playbook Design System's past, present, and future development. These core concepts are the basis upon which every higher order design element is built. Some of these principles have been abstracted into sass variables listed below.

Colors


Text Colors


Backgrounds


Cards


Status


Data


Actions


Active


Border


Shadow


Product Colors


Category Colors

Max Width



Max Width Options


max_width_sm

max_width_md

max_width_lg

max_width_xl

Number Spacing



Number Spacing Options


default

$1,231,123,123.00

$7,444,112,512.00

tabular

$1,231,123,123.00

$7,444,112,512.00

Positioning



Positioning Options


z_index: "10"



z_index: "9"



z_index: "8"



z_index: "7"



z_index: "6"



z_index: "5"



z_index: "4"



z_index: "3"



z_index: "2"



z_index: "1"





Spacing



Spacing Options


Spacing Props in Kits