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

Default
$text_lt_default
Light
$text_lt_light
Lighter
$text_lt_lighter
Default Dk
$text_dk_default
Light Dk
$text_dk_light
Lighter Dk
$text_dk_lighter

Backgrounds

Bg Light
$bg_light
Bg Dark
$bg_dark
Bg Gradient
$bg_gradient

Cards

Card Light
$card_light
Card Dark
$card_dark

Status

Success
$success
Warning
$warning
Error
$error
Info
$info
Neutral
$neutral

Data

Data 1
$data_1
Data 2
$data_2
Data 3
$data_3
Data 4
$data_4
Data 5
$data_5
Data 6
$data_6
Data 7
$data_7
Data 8
$data_8

Actions

Primary
$primary_action

Active

Active Light
$active_light
Active Dark
$active_dark

Border

Border Light
$border_light
Border Dark
$border_dark

Shadow

Shadow
$shadow

Product Colors

Windows
$windows
Siding
$siding
Doors
$doors
Solar
$solar
Roofing
$roofing
Gutters
$gutters
Attic Insulation
$insulation

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

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

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

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

$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 {
    text-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.

Props

display

Values

block

inline_block

inline

flex

inline_flex

hidden

EXAMPLE IN USE

<Button display="flex">
  Button Text
<Button/>

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

React:
<Body cursor="pointer">
  Body content
<Body/>

Rails:
<%= pb_rails("body", props: { cursor: "pointer" }) do %>
  Body content
<% end %>

Our Visual Language

Colors

Text Colors

Backgrounds

Cards

Status

Data

Actions

Active

Border

Shadow

Product Colors

Category Colors

Max Width

Global Props

XL

LG

MD

SM

XS

Number Spacing

Global Props

Positioning

Global Props

Tokens

Line Height

Tokens

Global Props

Spacing

Global Props

Tokens

Border Radius

Tokens

Rounded

Extra Large

Large

Medium

Small

Extra Small

None

Typography

Tokens

Heading 1

Heading 2

Heading 3

Heading 4

Shadows

Global Props

Tokens

Display

Global Props

Cursor

Global Props