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)
color: darken($black50, 30%);

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

color: darken($black50, 10%);

$black50 (Base)
color: $black50;

color: lighten($black50, 10%);

color: lighten($black50, 20%);

color: lighten($black50, 30%);

color: darken($gray50, 30%);

color: darken($gray50, 20%);

color: darken($gray50, 10%);

$gray50 (Base)
color: $gray50;

color: lighten($gray50, 10%);

color: lighten($gray50, 20%);

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

color: darken($yellow50, 30%);

color: darken($yellow50, 20%);

color: darken($yellow50, 10%);

$yellow50 (Base)
color: $yellow50;

color: lighten($yellow50, 10%);

color: lighten($yellow50, 20%);

$yellow20 ($white)
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.

color: darken($blue50, 30%);

color: darken($blue50, 20%);

color: darken($blue50, 10%);

$blue50 (Base)
color: $blue50;

color: lighten($blue50, 10%);

color: lighten($blue50, 20%);

color: lighten($blue50, 30%);

color: darken($red50, 30%);

color: darken($red50, 20%);

color: darken($red50, 10%);

$red50 (Base)
color: $gray50;

color: lighten($red50, 10%);

color: lighten($red50, 20%);

color: lighten($red50, 30%);

color: darken($green50, 30%);

color: darken($green50, 20%);

color: darken($green50, 10%);

$green50 (Base)
color: $green50;

color: lighten($green50, 10%);

color: lighten($green50, 20%);

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)
color: darken($purple50, 30%);

color: darken($purple50, 20%);

color: darken($purple50, 10%);

$purple50 (Base)
color: $purple50;

color: lighten($purple50, 10%);

color: lighten($purple50, 20%);

color: lighten($purple50, 30%);

color: darken($beige50, 30%);

color: darken($beige50, 20%);

color: darken($beige50, 10%);

$beige50 (Base)
color: $beige50;

color: lighten($beige50, 10%);

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

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

Background colors

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

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

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

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

results matching ""

    No results matching ""