Color Palette

It's like a double rainbow. Only better.

Gradients

Below is a list of gradient classes built in to Suit to easily convey the Sonos brand. You can also add a class of .move to provide a small animation that will subtly move the gradient.

.gradient--sunset


.gradient--sunset.reverse


.gradient--ocean


.gradient--ocean.reverse


.gradient--lisbon


.gradient--lisbon.reverse


.gradient--coral


.gradient--coral.reverse


.gradient--seafoam


.gradient--seafoam.reverse


.gradient--austin


.gradient--austin.reverse


.gradient--phoenix


.gradient--phoenix.reverse


.gradient--ynez


.gradient--ynez.reverse

Colors

Below is a list of color classes built in to Suit to easily convey the Sonos brand.

Default color (#FF0043)

.alt (#A91321)

.play1 (#AC1D8F)

.play3 (#EFB22B)

.play5 (#00ADC6)

.playbar (#009F4D)

.sub (#7D55C7)

.connect-amp (#B50938)

.connect (#C66005)

.light (#868686)

.dark (#1A1919)

.amber (#E5B53B)

.white (#FFFFFF)