messenger.com · set in Calibre
SaveUnofficial A style guide made by SiteStyleGuide from casper.com’s public web pages. Not affiliated with or endorsed by Casper Sleep. The real site is casper.com ↗
Unofficial style guide
Casper Sleepstyle guide
Casper Sleep’s website (casper.com) uses Calibre for its headings and body text. Its palette is led by Light Midnight Blue (#1E306E), Light Royal Blue (#526699) and Teal (#00706E), with #1E306E text on #FFFFFF. Captured from the live site on 26 October 2026.
- Website
- casper.com
- Typefaces
- Calibre, NewKansas-Medium, NewKansas-SemiBold
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 26 Oct 2026 · added by @sitestyleguide
https://casper.com/
Screenshot
casper.com
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- The Best Bed for Better Sleep | Casper Online Mattress Store
- ● 60 / 60 characters
- Meta description
- Discover award-winning mattresses built for cooler, deeper sleep and lasting support. Shop Casper with free shipping & returns.
- ● 127 / 160 characters
- Site name
- Casper Sleep
- og:title
- The Best Bed for Better Sleep | Casper Online Mattress Store
- og:description
- Discover award-winning mattresses built for cooler, deeper sleep and lasting support. Shop Casper with free shipping & returns.
- Language
- en
- Theme colour
- #ffffff
In search results
Casper Sleephttps://casper.com/
The Best Bed for Better Sleep | Casper Online Mattress Store
Discover award-winning mattresses built for cooler, deeper sleep and lasting support. Shop Casper with free shipping & returns.
When shared
casper.com
The Best Bed for Better Sleep | Casper Online Mattress Store
Discover award-winning mattresses built for cooler, deeper sleep and lasting support. Shop Casper with free s…
Logo & favicons
Found as: schema.org logo. PNG, 5760 × 1956.
Logo
On white
On black
On Light Midnight Blue
Favicons
2 found-
180 px · PNG
apple-touch-icon
-
96 px · PNG
shortcut icon
The Best Bed for Better Sleep | Casper Online Mattress Store
Light browser tab
The Best Bed for Better Sleep | Casper Online Mattress Store
Dark browser tab
Colour
Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.
Contrast is against the site’s text colour (#1E306E) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- Light Midnight Blue 36.3%
- White 30.8%
- Cool Off White 7.1%
- Light Royal Blue 6.6%
- Near Black 5.7%
- Black 2.6%
- Teal 2.5%
- Deep Midnight Blue 2.2%
- Fire Brick 1.6%
- Slate Blue 1.4%
- Light Sky Blue 1%
- Steel Blue 0.5%
- Khaki 0.5%
- Deep Royal Blue 0.4%
- Brown 0.3%
- Honey Dew 0.3%
By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.
Neutrals
Text, backgrounds and structure-
White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 0
- On text
- 12.33:1 AAA
- On white
- —
Background, text, border · #shopify-section-template--29702674940270__instant_4hw_weg_qsfx6rxa_qc_FTTtCa .i, body
-
Cool Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 3 2 0 1
- On text
- 11.51:1 AAA
- On white
- 1.07:1 Fail
Background, border · .cart-upsell-container .upsell-item, .product-info-accordion__content
-
Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 92
- On text
- 1.48:1 Fail
- On white
- 18.26:1 AAA
Text, graphic · p.article-title, .blog-title-container .prose
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 1.70:1 Fail
- On white
- 21.00:1 AAA
Text, background · .ugc-modal__shop-subtitle, .ugc-modal__shop-product-subtitle *
Colours
Brand colours and accents, most used first-
Light Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 73 56 0 57
- On text
- —
- On white
- 12.33:1 AAA
Text, background, border · inline style on <span>, #shopify-section-template--29702674940270__hero_promo_banner_JFpUJJ [data-block-
-
Light Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 46 33 0 40
- On text
- 2.18:1 Fail
- On white
- 5.65:1 AA
Text, background, border · button.add-accident-protection-btn, inline style on <span>
-
Teal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 2 56
- On text
- 2.08:1 Fail
- On white
- 5.93:1 AA
Text, background · .banner--custom-success, .cart-upsell-container .upsell-badge
-
Deep Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 99 69 0 59
- On text
- 1.20:1 Fail
- On white
- 14.76:1 AAA
Background, text · .mobile-nav-action-buttons .button--primary, .progress-bar:before
-
Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 73 79 20
- On text
- 2.42:1 Fail
- On white
- 5.10:1 AA
Text, background · .free-gift-purchase__badge, .on-sale-facet-label
-
Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 34 27 0 43
- On text
- 2.32:1 Fail
- On white
- 5.31:1 AA
Text, border · .what-is-comp-value, .product-info__block-item[data-block-type=associated-products] scroll-carousel p
-
Light Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 37 16 0 11
- On text
- 6.36:1 AA
- On white
- 1.94:1 Fail
Background · inline style on <span>, .cart-upsell-container .upsell-item
-
Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 61 36 0 27
- On text
- 2.72:1 Fail
- On white
- 4.53:1 AA
Background · .cart-complement-header, .free-gift-promo__card
-
Khaki
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 14 56 5
- On text
- 8.36:1 AAA
- On white
- 1.47:1 Fail
Background · inline style on <span>
-
Deep Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 62 39 0 38
- On text
- 1.99:1 Fail
- On white
- 6.18:1 AA
Background · .mobile-nav-action-buttons .button--secondary
-
Brown
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 76 78 33
- On text
- 1.79:1 Fail
- On white
- 6.91:1 AA
Text · .text-error, .text-danger
-
Honey Dew
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 12 0 9 7
- On text
- 9.77:1 AAA
- On white
- 1.26:1 Fail
Background · inline style on <span>
Gradients
-
linear-gradient(to right,currentColor,currentColor) 0 min(100%,1.35em)
-
linear-gradient(to right,currentColor,currentColor) 0 min(100%,1.2lh)
-
linear-gradient(#fff, #fff)
Typography
Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.
Calibre
Aa
300
Aa
700
Calibre
Served from cdn.shopify.com · weights 300, 400, 500, 600, 700 · headings, buttons · shown in a stand-in if you don’t have it
Aa
400
Aa
500
NewKansas-Medium
Served from cdn.shopify.com · weights 400, 500 · headings · shown in a stand-in if you don’t have it
Aa
600
NewKansas-SemiBold
Served from cdn.shopify.com · weights 600 · headings · shown in a stand-in if you don’t have it
Aa
500
New Kansas TRIAL
Served from cdn.shopify.com · weights 500 · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
1.5rem · 24 px / 1.5rem
weight 500 · normal · NewKansas-Medium
Casper Sleep
Heading 2
32px / 28px
weight 500 · normal · Calibre
The Best Bed for Better Sleep | Casper Online M…
Heading 3
18px / 48.4px
weight 500 · normal · NewKansas-Medium
The Best Bed for Better Sleep | Casper Online M…
Heading 4
22px / 30.8px
weight 500 · normal · Calibre
The Best Bed for Better Sleep | Casper Online M…
Heading 5
—
weight 500 · normal · Calibre
The Best Bed for Better Sleep | Casper Online M…
Heading 6
—
weight 500 · normal · Calibre
The Best Bed for Better Sleep | Casper Online M…
Body
1.0rem · 16 px / 1.6
Discover award-winning mattresses built for cooler, deeper sleep and lasting support. Shop Casper with free shipping & returns.
Paragraph
1.0rem · 16 px / 26px
weight 400 · Calibre
Discover award-winning mattresses built for cooler, deeper sleep and lasting support. Shop Casper with free shipping & returns.
Button
100%
none
Get started
Link
1.125rem · 18 px / 1.75rem
weight 700 · Calibre
Read more about Casper Sleep
Sizes in use
Most common across the site- 32pxline 2rem · 14 rules
- 28pxline 32px · 10 rules
- 24pxline 28px · 16 rules
- 20pxline 24px · 27 rules
- 18pxline 28.8px · 41 rules
- 16pxline 22px · 89 rules
- 14pxline 16px · 41 rules
- 12pxline 20px · 27 rules
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Elements
Corner radius
- 9999px · 25×
- 4px · 23×
- inherit · 23×
- 8px · 23×
- 12px · 20×
- 2.0rem · 14×
Shadows
- 0 -4px 15px #00000026
- unset
- 0 4px 8px #00000026
- 0px 18px 50px rgb(30 48 110 / 0.1)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
700
767
768
1000
1023
1024
1150
1400
On a scale of 0 to 1440 px.
Content widths (max-width)
1350 px
1024 px
500 px
340 px
337 px
300 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 60 characters, short enough to show in full in search results.
- ▲ CheckThe favicon is dark on a see-through background, so it nearly disappears on dark browser tabs.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Casper Sleep use?
- Casper Sleep’s website uses four typefaces: Calibre (headings and body text), served from cdn.shopify.com; NewKansas-Medium, served from cdn.shopify.com; NewKansas-SemiBold, served from cdn.shopify.com; New Kansas TRIAL, served from cdn.shopify.com.
- What are Casper Sleep’s brand colours?
- The main colours on casper.com are Light Midnight Blue (#1E306E), Light Royal Blue (#526699), Teal (#00706E), Deep Midnight Blue (#012169), Fire Brick (#CB372A) and Slate Blue (#5F6A91).
- What colour is Casper Sleep’s text and background?
- Body text is #1E306E on a #FFFFFF background.
- Where is Casper Sleep’s logo from?
- The logo shown in this guide was found on casper.com’s homepage. For official logo files and usage rules, check Casper Sleep’s own brand or press page.
- Is this Casper Sleep’s official style guide?
- No. SiteStyleGuide made it from casper.com’s public web pages on 26 October 2026, and isn’t affiliated with Casper Sleep. Members can refresh a guide after 90 days to pick up changes.
Design tokens
Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.
Tokens
casper-com-tokens.css
/* casper.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/casper.com) */
:root {
/* Colours */
--text: #1E306E;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-cool-off-white: #F5F7FD;
--colour-near-black: #151515;
--colour-black: #000000;
--colour-light-midnight-blue: #1E306E;
--colour-light-royal-blue: #526699;
--colour-teal: #00706E;
--colour-deep-midnight-blue: #012169;
--colour-fire-brick: #CB372A;
--colour-slate-blue: #5F6A91;
--colour-light-sky-blue: #8FC0E4;
--colour-steel-blue: #4977BB;
--colour-khaki: #F3D26A;
--colour-deep-royal-blue: #3C619E;
--colour-brown: #AA2826;
--colour-honey-dew: #CFECD7;
--gradient-1: linear-gradient(to right,currentColor,currentColor) 0 min(100%,1.35em);
--gradient-2: linear-gradient(to right,currentColor,currentColor) 0 min(100%,1.2lh);
--gradient-3: linear-gradient(#fff, #fff);
/* Typefaces */
--font-headings: 'Calibre';
--font-buttons: 'Calibre';
--font-other: 'New Kansas TRIAL';
/* Type scale */
--text-h1: 1.5rem;
--leading-h1: 1.5rem;
--text-h2: 32px;
--leading-h2: 28px;
--text-h3: 18px;
--leading-h3: 48.4px;
--text-h4: 22px;
--leading-h4: 30.8px;
--text-body: 1.0rem;
--leading-body: 1.6;
--text-p: 1.0rem;
--leading-p: 26px;
--text-button: 100%;
--text-a: 1.125rem;
--leading-a: 1.75rem;
/* Shape */
--radius-1: 9999px;
--radius-2: 4px;
--radius-3: inherit;
--radius-4: 8px;
--radius-5: 12px;
--radius-6: 2.0rem;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 700px;
--breakpoint-2: 767px;
--breakpoint-3: 768px;
--breakpoint-4: 1000px;
--breakpoint-5: 1023px;
--breakpoint-6: 1024px;
--breakpoint-7: 1150px;
--breakpoint-8: 1400px;
--max-width-1: 1350px;
--max-width-2: 1024px;
--max-width-3: 500px;
--max-width-4: 340px;
--max-width-5: 337px;
--max-width-6: 300px;
}
{
"site": "casper.com",
"source": "https://sitestyleguide.com/casper.com",
"text": "#1E306E",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Cool Off White",
"hex": "#F5F7FD",
"rgb": [
245,
247,
253
]
},
{
"name": "Near Black",
"hex": "#151515",
"rgb": [
21,
21,
21
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Light Midnight Blue",
"hex": "#1E306E",
"rgb": [
30,
48,
110
]
},
{
"name": "Light Royal Blue",
"hex": "#526699",
"rgb": [
82,
102,
153
]
},
{
"name": "Teal",
"hex": "#00706E",
"rgb": [
0,
112,
110
]
},
{
"name": "Deep Midnight Blue",
"hex": "#012169",
"rgb": [
1,
33,
105
]
},
{
"name": "Fire Brick",
"hex": "#CB372A",
"rgb": [
203,
55,
42
]
},
{
"name": "Slate Blue",
"hex": "#5F6A91",
"rgb": [
95,
106,
145
]
},
{
"name": "Light Sky Blue",
"hex": "#8FC0E4",
"rgb": [
143,
192,
228
]
},
{
"name": "Steel Blue",
"hex": "#4977BB",
"rgb": [
73,
119,
187
]
},
{
"name": "Khaki",
"hex": "#F3D26A",
"rgb": [
243,
210,
106
]
},
{
"name": "Deep Royal Blue",
"hex": "#3C619E",
"rgb": [
60,
97,
158
]
},
{
"name": "Brown",
"hex": "#AA2826",
"rgb": [
170,
40,
38
]
},
{
"name": "Honey Dew",
"hex": "#CFECD7",
"rgb": [
207,
236,
215
]
}
],
"fonts": [
{
"name": "Calibre",
"stack": "Calibre",
"weights": [
300,
400,
500,
600,
700
],
"source": "Served from cdn.shopify.com"
},
{
"name": "NewKansas-Medium",
"stack": "NewKansas-Medium, sans-serif",
"weights": [
400,
500
],
"source": "Served from cdn.shopify.com"
},
{
"name": "NewKansas-SemiBold",
"stack": "NewKansas-SemiBold, sans-serif",
"weights": [
600
],
"source": "Served from cdn.shopify.com"
},
{
"name": "New Kansas TRIAL",
"stack": "\"New Kansas TRIAL\"",
"weights": [
500
],
"source": "Served from cdn.shopify.com"
},
{
"name": "Copyright Klim Type Foundry-Not Licensed for Desktop Use",
"stack": "\"Copyright Klim Type Foundry-Not Licensed for Desktop Use\"",
"weights": [
400
],
"source": "Served from cdn.shopify.com"
},
{
"name": "New Kansas Swash TRIAL",
"stack": "\"New Kansas Swash TRIAL\"",
"weights": [
500
],
"source": "Served from cdn.shopify.com"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run casper.com?
Add the badge to your siteLink to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.
<a href="https://sitestyleguide.com/casper.com" title="Casper Sleep style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Also set in Calibre
Other websites using Calibre as their main typeface
Similar colours
Websites whose lead colour is closest to Casper Sleep’s
Node.js
nodejs.org · 2 days ago
Save
Salesforce
salesforce.com · 5 days ago
Save
Lightshot
prnt.sc · 5 days ago
Save
gameforge.com
gameforge.com · 15 hours ago
Save
Captured from casper.com on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Casper Sleep; this guide describes the public website for reference.