Colors

The digital brand color palette is shared across all products, including the Plasma design system. View the Digital Foundations ↗ document and see the section on Colors ↗ for more information on the use of color in our products.

General guidelines

  • $black50 is the default color for most text content.
  • $yellow50 for actions and active states.
  • $blue50 for links that navigate us to a new page.
  • $red50 for errors and warnings.
  • #FAF9F8 is the background color for all screens.
  • $white is the main foreground color for all containing elements (e.g. tables, cards, modals).

Color spectrum & Sass variables

In an effort to bridge the gap between design and engineering, we use Sass variable naming conventions for our digital colors. Each color has a base value of 50 (e.g. $blue50). Then a range of 7 colors is created from that base color. Using the darken and lighten CSS functions, we generate three darker, and three lighter variations of the base color, in increments of 10% (e.g. lightest $blue20 to darkest $blue80). You can see this in action in all color examples above.

Download our digital brand colors for Sketch

Primary colors

WeWork's primary brand colors used in all digital products.

$black80 ($black)
#000000
color: darken($black50, 30%);

$black ($black70)
#000000
color: darken($black50, 20%);

$black60
#0d0e0e
color: darken($black50, 10%);

$black50 (Base)
#252729
color: $black50;

$black40
#3d4144
color: lighten($black50, 10%);

$black30
#555a5f
color: lighten($black50, 20%);

$black20
#6e7479
color: lighten($black50, 30%);

$gray80
#747476
color: darken($gray50, 30%);

$gray70
#8e8e8f
color: darken($gray50, 20%);

$gray60
#a7a7a9
color: darken($gray50, 10%);

$gray50 (Base)
#c1c1c2
color: $gray50;

$gray40
#dbdbdb
color: lighten($gray50, 10%);

$gray30
#f4f4f5
color: lighten($gray50, 20%);

$white ($gray20)
#ffffff
color: lighten($gray50, 30%);

$yellow80
#d39100
color: darken($yellow50, 30%);

$yellow70
#ffb107
color: darken($yellow50, 20%);

$yellow60
#ffc13a
color: darken($yellow50, 10%);

$yellow50 (Base)
#ffd16d
color: $yellow50;

$yellow40
#ffe1a0
color: lighten($yellow50, 10%);

$yellow30
#fff1d3
color: lighten($yellow50, 20%);

$yellow20 ($white)
#ffffff
color: lighten($yellow50, 30%);

Secondary colors

These colors convey meaning. Blue conveys navigation, or a link. Red conveys a warning or error. Green conveys success.

$blue80
#21465d
color: darken($blue50, 30%);

$blue70
#2e6383
color: darken($blue50, 20%);

$blue60
#3b7fa9
color: darken($blue50, 10%);

$blue50 (Base)
#5499c3
color: $blue50;

$blue40
#7ab0d0
color: lighten($blue50, 10%);

$blue30
#a0c6dd
color: lighten($blue50, 20%);

$blue20
#c5ddeb
color: lighten($blue50, 30%);

$red80
#812020
color: darken($red50, 30%);

$red70
#aa2a2a
color: darken($red50, 20%);

$red60
#ce3939
color: darken($red50, 10%);

$red50 (Base)
#d86262
color: $gray50;

$red40
#e28b8b
color: lighten($red50, 10%);

$red30
#ecb4b4
color: lighten($red50, 20%);

$red20
#f6dddd
color: lighten($red50, 30%);

$green80
#223d3e
color: darken($green50, 30%);

$green70
#355e5e
color: darken($green50, 20%);

$green60
#477e7f
color: darken($green50, 10%);

$green50 (Base)
#599FA0
color: $green50;

$green40
#78b3b4
color: lighten($green50, 10%);

$green30
#99c6c6
color: lighten($green50, 20%);

$green20
#bad8d8
color: lighten($green50, 30%);

Tertiary colors

Additional colors are introduced based on the needs of products across digital teams. The colors $purple50 and $purple20 are exclusive to the Plasma design system. They are a ‘legacy’ brand color for our internal business tools (most notably ‘Spacestation’). The Plasma design system retains these colors in ode to the history of our internal products, and in the interest of familiarity in our products.

$purple80 ($black)
#000000
color: darken($purple50, 30%);

$purple70
#2e6383
color: darken($purple50, 20%);

$purple60
#3b7fa9
color: darken($purple50, 10%);

$purple50 (Base)
#5499c3
color: $purple50;

$purple40
#7ab0d0
color: lighten($purple50, 10%);

$purple30
#a0c6dd
color: lighten($purple50, 20%);

$purple20
#c5ddeb
color: lighten($purple50, 30%);

$beige80
#ac9985
color: darken($beige50, 30%);

$beige70
#c1b2a3
color: darken($beige50, 20%);

$beige60
#d5ccc2
color: darken($beige50, 10%);

$beige50 (Base)
#eae5e0
color: $beige50;

$beige40
#fffffe
color: lighten($beige50, 10%);

$beige30 ($white)
#ffffff
color: lighten($beige50, 20%);

$beige20 ($white)
#ffffff
color: lighten($beige50, 30%);

Background colors

An additional color palette exists only for background colors. Designed for subtlety.

$bg5
#f4f4f1
background-color: rgba($black50, .05);

$bg3
#f8f8f5
background-color: rgba($black50, .03);

$bg1
#fcfcf9
background-color: rgba($black50, .01);

results matching ""

    No results matching ""