Tiny
320-349
px
A living style guide and component library intended to be a resource for designing and developing consistent, branded digital interfaces.
StorybookProof of concept for integrating CMS data with Siesta
Hero PosterBuy Bar SimpleAssetsThe Casper wordmark and icon mark can be displayed in two colors, depending on the background. The icon mark is used sparingly, as a secondary mark that is only used to support the full wordmark.
This color palette comprises primary, secondary and accent colors used within Casper’s digital ecosystem. They’ve been designed to work harmoniously with each other. The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette.
As configs are added to CMS Modules please use the Siesta Colors constants from `packages/utils/lib/configOptions.js` for PropType declarations and Styled Components. Any color configuration for CMS Module should have the option of being able to select any of the Siesta colors.
Blue 1
#1e306e
color(`blue`)
Blue 2
#526699
color(`blue-2`)
Blue 3
#6d80b4
color(`blue-3`)
Blue 4
#899ac7
color(`blue-4`)
Light Blue 1
#8fc0e4
color(`light-blue`)
Light Blue 2
#a5cde9
color(`light-blue-2`)
Light Blue 3
#d7ecf7
color(`light-blue-3`)
Light Blue 4
#ebf5fb
color(`light-blue-4`)
Yellow 1
#f3d26a
color(`yellow`)
Yellow 2
#f6db86
color(`yellow-2`)
Yellow 3
#faeec2
color(`yellow-3`)
Yellow 4
#fcf9ed
color(`yellow-4`)
Peach 1
#ea9d7f
color(`peach`)
Peach 2
#ffbb9f
color(`peach-2`)
Peach 3
#fceae0
color(`peach-3`)
Peach 4
#fcf6f2
color(`peach-4`)
Gray 1
#151515
color(`gray`)
Gray 2
#525252
color(`gray-2`)
Gray 3
#a3a3a3
color(`gray-3`)
Gray 4
#cccccc
color(`gray-4`)
Gray 5
#e6e6e6
color(`gray-5`)
Gray 6
#f6f6f6
color(`gray-6`)
Dark Blue
#0e153f
color(`dark-blue`)
Green
#2e8459
color(`green`)
Green 2
#7bd0a7
color(`green-2`)
A11Y Red
#cb372a
color(`a11y-red`)
Red
#ed5a4d
color(`red`)
Red 2
#f28b82
color(`red-2`)
A11Y Sale Green
#00706e
color(`a11y-sale-green`)
Sale Green Medium
#4ca9a7
color(`sale-green-medium`)
Sale Green Light
#f5fbfa
color(`sale-green-light`)
Gold
#bca890
color(`gold`)
Strikethrough Gray
#747474
color(`strikethrough-gray`)
Glow Blue
#0b0f21
color(`glow-blue`)
Element Peach (Medium)
#f9e9e2
color(`element-peach-medium`)
Element Peach (Light)
#f8f1ec
color(`element-peach-light`)
Original Blue (Medium)
#e4ecf3
color(`original-blue-medium`)
Original Blue (Light)
#f5f7fd
color(`original-blue-light`)
Nova Lavender (Medium)
#f2e9ea
color(`nova-lavender-medium`)
Nova Lavender (Light)
#f9f5f5
color(`nova-lavender-light`)
Wave Mint (Medium)
#e5ebe9
color(`wave-mint-medium`)
Wave Mint (Light)
#f2f4f3
color(`wave-mint-light`)
Olive
#7a6332
color(`olive`)
Spice
#804839
color(`spice`)
Snow 1
linear-gradient(270deg, #ff9999 0%, #66a9ff 100%)
gradient(`snow-1`)
Snow 2
linear-gradient(270deg, #fadCdC 0%, #bed8fa 100%)
gradient(`snow-2`)
Snow 3
linear-gradient(270deg, #ffebeb 0%, #d6e8ff 100%)
gradient(`snow-3`)
Snow 4
linear-gradient(270deg, #ffffff 0%, #ffebeb 50%, #d6e8ff 100%)
gradient(`snow-4`)
Snow 5
linear-gradient(0deg, #fff5f5 0%, #f0f6ff 100%)
gradient(`snow-5`)
Snow 6
linear-gradient(270deg, #ffffff, #ffffff, #e0eeff)
gradient(`snow-6`)
Snow 7
linear-gradient(270deg, #d6e8ff 0%, #ffffff 54.09%, #ffebeb 100%)
gradient(`snow-7`)
Snow 8
linear-gradient(270deg, #ffebeb 0%, #ffffff 50%, #d6e8ff 100%)
gradient(`snow-8`)
Typography
Calibre, in both Regular and Light, is used as the primary digital font. The primary font is displayed for module headers and CTA buttons and should always be presented in sentence-case.
bed design sheets zing
hero
owner engineer analyst foundation
heading-1
zing velociraptor bed tireless
heading-1
collaborate mission driver simple sleep
heading-2
pancakes pillows owner pancakes
heading-3
pancakes bedpost igor engineer
heading-4
foundation tech pillows operations
heading-5
owner analyst coffee storefront
heading-6
tech bedpost bedpost duvet
heading-7
bed bedpost finance duvet
eyebrow
dog zing operations
default
sleep bed finance
body-small / body-1
igor finance CX
body-medium / body-2
pioneer tech joyful
body-large
storefront tireless dream
legal-copy
link-underline
link-underline-gray
Grid
CSS variables and mixins used to fit components to the grid. This section gets its margins from:
pageSection
See also:
pageSectionInset
twoOrThreeCols
twoOrThreeCols
twoColsOnly
card-max
content-max
container-max
site-max