11.0.1

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

When building your interface it is common to add max width to specific kits so the interface looks good at all sizes. We've made it easy to add max with ANY kit through our global props. See below:

Global Props

Available in every kit. These are added globally as they are most flexible when developing.

Visual Guide

XL

LG

MD

SM

XS
Props
maxWidth
Values
xs
sm
md
lg
xl
EXAMPLE IN USE 
<Card maxWidth="xl">{'Card content'}</Card>

Number Spacing

When dealing with numbers it can be helpful to controll the way the font handles number spacing. A font like proxima nova is an open type face that enables us to use tabular spacing for example. This alligns the numbers equally to make those numbers in a table easier to compare. This is avaliable in EVERY kit as a global prop. See example:

Global Props

Available in every kit. These are added globally as they are most flexible when developing.

Visual Guide
normal
tabular
$1,231,123,123.00
$1,231,123,123.00
$7,444,112,512.00
$7,444,112,512.00
Props
numberSpacing
Values
tabular
EXAMPLE IN USE 
<Currency amount="2,000" numberSpacing="tabular" />

Positioning

If you're going to be using 'absolute' position, you might find it handy to use some of the index properties. We have multiple ways to use z-index, take a look at the examples below.

Global Props

Available in every kit. These are added globally as they are most flexible when developing.

Props
zIndex
Values
1
2
3
4
5
6
7
8
9
10
EXAMPLE IN USE 
<Pill text="example" zIndex="5" />

Tokens

Make your own styles using Playbook tokens to keep your site consistent

$z_1
value: 100
$z_2
value: 200
$z_3
value: 300
$z_4
value: 400
$z_5
value: 500
$z_6
value: 600
$z_7
value: 700
$z_8
value: 800
$z_9
value: 900
$z_10
value: 1000

EXAMPLE IN USE 
@import "tokens/positioning

.selector {
    z-index: $z_10;
}

Line Height

Odds are you might want to build or expand upon the text patterns we have provided. If so below is a good reference of the tokens that are available for you and your typography needs.

Tokens

Make up your own styles using Playbook tokens to keep your site consistent.

Global Props

Available in every kit. These are added globally as they are most flexible when developing.

Props
lineHeight
Values
tightest
tighter
tight
normal
loose
looser
loosest
EXAMPLE IN USE 
React:

<Body lineHeight="looser">
  Body content
<Body/>


Rails: 

<%= pb_rails("body", props: { line_height:"looser" }) do %>
  Body content
<% end %>

The quick brown fox jumps over the lazy dog

$lh_tightest

The quick brown fox jumps over the lazy dog

$lh_tighter

The quick brown fox jumps over the lazy dog

$lh_tight

The quick brown fox jumps over the lazy dog

$lh_normal

The quick brown fox jumps over the lazy dog

$lh_loose

The quick brown fox jumps over the lazy dog

$lh_looser

The quick brown fox jumps over the lazy dog

$lh_loosest
EXAMPLE IN USE 
@import "tokens/line_height";

.selector {
  line-height: $lh_tight;
}

Spacing

Used for building Kits: Spacing is sized by 8px which serves as the starting point and base that all spacing options follow.

Global Props

Available in every kit. These are added globally as they are most flexible when developing.

Props
margin
marginLeft
marginBottom
marginRight
marginTop
marginX
marginY
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
paddingX
paddingY
Values
none
xs
sm
md
lg
xl
EXAMPLE IN USE 
<Badge paddingTop="sm"/>

Tokens

Make your own sytles using Playbook tokens to keep your site consistent.

Extra Small
$space_xs
Small
$space_sm
Medium
$space_md
Large
$space_lg
Extra Large
$space_xl
EXAMPLE IN USE 
@import "tokens/spacing"

.selector {
  margin-top: $space_lg;
}

Border Radius

We have very specific settings for border radius to keep the interface looking consistent and clean. If you ever need to access these to build new things here are examples for how to do that.

Tokens

Make up your own styles using Playbook tokens to keep your site consistent.

Rounded

$border_radius_rounded

Extra Large

$border_radius_xl

Large

$border_radius_lg

Medium

$border_radius_md

Small

$border_radius_sm

Extra Small

$border_radius_xs

None

$border_radius_none
EXAMPLE IN USE 
@import "tokens/border_radius"

.selector {
    border-radius: $border_radius_xl;
}

Typography

Odds are, you might want to build or expand upon the text patterns we have provided. Below are the tokens that are available for you and your typography needs.

Tokens

Make up your own styles using Playbook tokens to keep your site consistent.

Headings

Heading 1

48px
$heading_1

Heading 2

34px
$heading_2

Heading 3

28px
$heading_3

Heading 4

16px
$heading_4
Text Size
Text Jumbo
36px
$text_jumbo
Text Largest
32px
$text_largest
Text Larger
28px
$text_larger
Text Large
20px
$text_large
Text Base
16px
$text_base
Text Small
14px
$text_small
Text Smaller
12px
$text_smaller
Text Smallest
11px
$text_smallest
Letter Spacing
Tightest
-0.1em
$lspace_tightest
Tighter
-0.07em
$lspace_tighter
Tight
-0.03em
$lspace_tight
Normal
0
$lspace_normal
Loose
0.03em
$lspace_loose
Looser
0.07em
$lspace_looser
Loosest
0.1em
$lspace_loosest
Super
Loosest
0.2em
$lspace_super_loosest
EXAMPLE IN USE 
@import "tokens/typography";

.selector {
    font-size: $heading_1;
    letter-spacing: $lspace_tight;
}

Shadows

Shadows are a night way of showing depth. Modals, buttons, & popovers are examples of items that need to have a shadow to indicate their position relative to others. Our global props and tokens help you expand those to the other custom elements you build using playbook.

Global Props

Available in every kit. These are added globally as they are most flexible when developing.

Props
shadow
Values
none
deep
deeper
deepest
EXAMPLE IN USE 
<Button shadow="deeper">Button Text</Button>

Tokens

Make your own styles using Playbook tokens to keep your site consistent.

$shadow_deep
value: 0 4px 10px 0 rgb(60 106 172 / 16%)

$shadow_deeper
value: 0 12px 28px 0 rgb(60 106 172 / 18%)

$shadow_deepest
value: 0 30px 38px 4px rgb(60 106 172 / 20%), 0 2px 14px 4px rgb(60 106 172 / 10%)

EXAMPLE IN USE 
@import "tokens/shadows";

.selector { 
    box-shadow: $shadow_deep;
}

Display

Global Props

Available in every kit. These are added globally as they are most flexible when developing. *Screen sizes are optional.
Props
Display
Screen Sizes
xs
sm
md
lg
xl
Values
inline
flex
inline_flex
inline_block
block
none
EXAMPLE IN USE 
<Card display="flex">
  Card content
<Card/>

<Card
  display={
    xs: "hidden",
    sm: "flex",
    md: "inline",
    lg: "inline_block",
    xl: "block"
  }
>
  Card content
<Card/>

Utility Classes

Just want the raw classes? We got you. All of our global props are simple CSS utilities available through classes.
Visual Guide
Screen Size @media screen Class Properties
xs @media screen and (max-width: 575px) .display_xs_hidden display: hidden !important
sm @media screen and (max-width: 576px) .display_sm_block display: block !important
md @media screen and (max-width: 768px) .display_md_inline_block display: inline-block !important
lg @media screen and (max-width: 992px) .display_lg_inline display: inline !important
xl @media screen and (max-width: 1200px) .display_xl_flex display: flex !important

Cursor

Global Props

Available in every kit. These are added globally as they are most flexible when developing.

Props
cursor
Values
pointer
EXAMPLE IN USE 
<Body cursor="pointer">
  Body content
<Body/>

Flex Box

Global Props

Available in every kit. These are added globally as they are most flexible when developing. *Screen sizes are optional.

Props Screen Sizes Values
flexDirection
xs
sm
md
lg
xl
row
column
rowReverse
columnReverse
flexWrap
xs
sm
md
lg
xl
wrap
nowrap
wrapReverse
justifyContent
xs
sm
md
lg
xl
start
end
center
spaceBetween
spaceAround
spaceEvenly
justifySelf
xs
sm
md
lg
xl
start
end
center
auto
stretch
alignItems
xs
sm
md
lg
xl
flexStart
flexEnd
start
end
center
stretch
baseline
alignContent
xs
sm
md
lg
xl
start
end
center
spaceBetween
spaceAround
spaceEvenly
alignSelf
xs
sm
md
lg
xl
start
end
center
auto
stretch
baseline
flex
xs
sm
md
lg
xl
none
initial
auto
1
flexGrow
xs
sm
md
lg
xl
0
1
flexShrink
xs
sm
md
lg
xl
0
1
order
xs
sm
md
lg
xl
1
2
3
4
5
6
7
8
9
10
11
12
none
EXAMPLE IN USE 
<Body justifySelf="start">
  Body content
<Body/>

<Body justifySelf={{xs: "start", md: "center", xl: "baseline"}}>
  Body content
<Body/>
Made with love
Playbook
Introduction
Getting Started
Browse Kits
View Changelog
Additional Links
Playbook Github
Open Positions
Tech at Power
Power Website
© Power Home Remodeling