S
SORT
sort-office.com · set in Segoe UI
SaveUnofficial A style guide made by SiteStyleGuide from cruise.com’s public web pages. Not affiliated with or endorsed by Cruise.com. The real site is cruise.com ↗
Unofficial style guide
Cruise.comstyle guide
Cruise.com’s website (cruise.com) uses Segoe UI for its headings and body text. Its palette is led by Light Royal Blue (#0D6EFD), Dark Slate Blue (#224273) and Light Steel Blue (#0973BA), with #212529 text on #FFFFFF. Captured from the live site on 28 October 2026.
- Website
- cruise.com
- Typefaces
- Segoe UI, Verdana, SFMono-Regular
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 28 Oct 2026 · added by @sitestyleguide
https://www.cruise.com/
Screenshot
cruise.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
- Cruise.com - Compare the best Cruise Deals & Discount Cruises
- ▲ 61 / 60 characters
- Meta description
- Compare cruise rates and save at Cruise.com for over 40 cruise lines and destinations including Royal Caribbean, Carnival, Celebrity, Princess Cruises and many more.
- ▲ 165 / 160 characters
- Site name
- Cruise.com
- Language
- en
In search results
Cruise.comhttps://www.cruise.com/
Cruise.com - Compare the best Cruise Deals & Discount Cruises
Compare cruise rates and save at Cruise.com for over 40 cruise lines and destinations including Royal Caribbean, Carnival, Celebrity, Princess Cruises and many m…
When shared
No og:image, so no picture
cruise.com
Cruise.com - Compare the best Cruise Deals & Discount Cruises
Compare cruise rates and save at Cruise.com for over 40 cruise lines and destinations including Royal Caribbe…
Logo & favicons
Found as: schema.org logo. JPG, 500 × 500.
Logo
On white
On black
On Light Royal Blue
Favicons
4 found-
144 px · PNG
apple-touch-icon
-
72 px · PNG
apple-touch-icon
-
57 px · PNG
apple-touch-icon
-
32 px · PNG
shortcut icon
Cruise.com - Compare the best Cruise Deals & Discount Cruises
Light browser tab
Cruise.com - Compare the best Cruise Deals & Discount Cruises
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 (#212529) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 32.1%
- Black 10.3%
- Cool Near Black 6.5%
- Light Royal Blue 6.5%
- Dark Slate Blue 5.6%
- Light Steel Blue 5.3%
- Off White 5.1%
- Crimson 4.7%
- Sea Green 4.7%
- Chocolate 4.5%
- Gold 3.7%
- Sky Blue 3.7%
- Fire Brick 2.3%
- Royal Blue 2.2%
- Deep Steel Blue 1.5%
- Deep Royal Blue 1.5%
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
- 15.43:1 AAA
- On white
- —
Text, background, border · --bs-btn-hover-color, --bs-btn-active-color
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 1.36:1 Fail
- On white
- 21.00:1 AAA
Text, background, graphic · --bs-table-color, --bs-table-striped-color
-
Cool Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 20 10 0 84
- On text
- —
- On white
- 15.43:1 AAA
Text, background, graphic · body, --bs-btn-border-color
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 3 1 0 6
- On text
- 13.01:1 AAA
- On white
- 1.19:1 Fail
Background, border, text · .form-control:disabled, .form-select:disabled
Colours
Brand colours and accents, most used first-
Light Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 95 57 0 1
- On text
- 3.43:1 AA large
- On white
- 4.50:1 AA
Background, text, graphic · a, .form-check-input:checked
-
Dark Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 70 43 0 55
- On text
- 1.54:1 Fail
- On white
- 10.02:1 AAA
Background, text · .carousel-item .btn-primary, .more-btn-container button
-
Light Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 95 38 0 27
- On text
- 3.07:1 AA large
- On white
- 5.03:1 AA
Background, text · .page-cont a.btn-primary, .dailyCruiseDeals .card-body .btn
-
Crimson
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 76 69 14
- On text
- 3.41:1 AA large
- On white
- 4.53:1 AA
Background, text, border · --bs-btn-border-color, --bs-btn-disabled-border-color
-
Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 81 0 38 47
- On text
- 3.40:1 AA large
- On white
- 4.53:1 AA
Background, text, border · --bs-btn-border-color, --bs-btn-disabled-border-color
-
Chocolate
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 58 100 22
- On text
- 3.43:1 AA large
- On white
- 4.50:1 AA
Text, background · #popOverModal .modal-header h5, h1
-
Gold
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 24 97 0
- On text
- 9.46:1 AAA
- On white
- 1.63:1 Fail
Background, text, graphic · --bs-btn-border-color, --bs-btn-disabled-border-color
-
Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 95 16 0 6
- On text
- 7.88:1 AAA
- On white
- 1.96:1 Fail
Background, text, graphic · --bs-btn-border-color, --bs-btn-disabled-border-color
-
Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 100 100 20
- On text
- 2.62:1 Fail
- On white
- 5.89:1 AA
Text, background · .sale-ribbon-full, .subTitle > p
-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 50 0 20
- On text
- 2.77:1 Fail
- On white
- 5.57:1 AA
Text, background · .btn-primary, h2
-
Deep Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 76 31 0 38
- On text
- 2.73:1 Fail
- On white
- 5.65:1 AA
Background, text · .searchWidgets .nav-tabs .nav-item:first-child .nav-link.active, #signInModal .modal-header h5
-
Deep Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 89 45 0 32
- On text
- 2.40:1 Fail
- On white
- 6.43:1 AA
Background, text · #signInModal .btn:hover, #popOverModal .btn:hover
Gradients
-
linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
-
linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))
-
radial-gradient(.2em 50% at left,#000a,#0000)
Dark mode
Switched on by the site
Aa
Light · #212529 on #FFFFFF
Aa
Dark · #DEE2E6 on #212529 · 11.85:1 AAA
-
Cool Off White
#DEE2E6 · --bs-body-color
-
Cool Charcoal
#343A40 · --bs-secondary-bg
-
Dark Sea Green
#75B798 · --bs-success-text-emphasis
-
Light Coral
#EA868F · --bs-danger-text-emphasis
-
Cornflower Blue
#6EA8FE · --bs-primary-text-emphasis
-
Cool Dark Grey
#495057 · --bs-light-border-subtle
-
Cool Near Black
#212529 · --bs-body-bg
-
White
#FFFFFF · --bs-emphasis-color
-
Cool Charcoal
#2B3035 · --bs-tertiary-bg
-
Cool Light Grey
#A7ACB1 · --bs-secondary-text-emphasis
-
Sky Blue
#6EDFF6 · --bs-info-text-emphasis
-
Gold
#FFDA6A · --bs-warning-text-emphasis
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.
Segoe UI
Aa
400
Segoe UI
System font, or not loaded on this page · weights 400 · body · shown in a stand-in if you don’t have it
Aa
400
Verdana
System font, or not loaded on this page · body, buttons · shown in a stand-in if you don’t have it
Aa
400
SFMono-Regular
System font, or not loaded on this page · shown in a stand-in if you don’t have it
Aa
400
Handlee
System font, or not loaded on this page · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
36px / 1.2
weight 500
Cruise.com
Heading 2
30px / 1.2
weight 500
Cruise.com - Compare the best Cruise Deals & Di…
Heading 3
26px / 1.2
weight 500
Cruise.com - Compare the best Cruise Deals & Di…
Heading 4
24px / 1.2
weight 500
Cruise.com - Compare the best Cruise Deals & Di…
Heading 5
22px / 1.2
weight 500
Cruise.com - Compare the best Cruise Deals & Di…
Heading 6
20px / 1.2
weight 500
Cruise.com - Compare the best Cruise Deals & Di…
Body
1rem · 16 px / 1.5
weight 400 · Verdana
Compare cruise rates and save at Cruise.com for over 40 cruise lines and destinations including Royal Caribbean, Carnival, Celebrity, Princ…
Paragraph
18px / 16px
Compare cruise rates and save at Cruise.com for over 40 cruise lines and destinations including Royal Caribbean, Carnival, Celebrity, Princ…
Small
.875em · 14 px
Compare cruise rates and save at Cruise.com for over 40 cruise lines and destinations including Royal Caribbean, Carnival, Celebrity, Princ…
Link
15px
weight 700
Read more about Cruise.com
Sizes in use
Most common across the site- 28pxline 1.25em · 5 rules
- 26pxline 20px · 3 rules
- 24px4 rules
- 20pxline 20px · 30 rules
- 18pxline 19px · 15 rules
- 16pxline 1.5 · 18 rules
- 14pxline 16px · 27 rules
- 12pxline 0 · 9 rules
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Elements
Button
Get started
.more-btn-container button · #224273
Link
Read our latest news today.
a · #0D6EFD
Corner radius
- 0.375rem · 13×
- 3px · 9×
- 1rem · 5×
- 12px · 5×
- 0.25rem · 4×
Shadows
- 0 0 0 .25rem rgba(13,110,253,.25)
- 5px 5px 12px #999
- 0 0 0 .25rem rgba(25,135,84,.25)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
576
767
768
991
992
1199
1200
1400
On a scale of 0 to 1440 px.
Content widths (max-width)
1320 px
1140 px
960 px
720 px
540 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 61 characters. Google usually cuts titles near 60, so the end may not show in results.
- ▲ CheckThe description is 165 characters. Search results usually show about 160.
- ▲ CheckThere is no og:image, so links shared on social media show no picture.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Cruise.com use?
- Cruise.com’s website uses one typeface: Segoe UI (headings and body text), a system font.
- What are Cruise.com’s brand colours?
- The main colours on cruise.com are Light Royal Blue (#0D6EFD), Dark Slate Blue (#224273), Light Steel Blue (#0973BA), Crimson (#DC3545), Sea Green (#198754) and Chocolate (#C75300).
- What colour is Cruise.com’s text and background?
- Body text is #212529 on a #FFFFFF background.
- Where is Cruise.com’s logo from?
- The logo shown in this guide was found on cruise.com’s homepage. For official logo files and usage rules, check Cruise.com’s own brand or press page.
- Is this Cruise.com’s official style guide?
- No. SiteStyleGuide made it from cruise.com’s public web pages on 28 October 2026, and isn’t affiliated with Cruise.com. 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
cruise-com-tokens.css
/* cruise.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/cruise.com) */
:root {
/* Colours */
--text: #212529;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-black: #000000;
--colour-cool-near-black: #212529;
--colour-off-white: #E9ECEF;
--colour-light-royal-blue: #0D6EFD;
--colour-dark-slate-blue: #224273;
--colour-light-steel-blue: #0973BA;
--colour-crimson: #DC3545;
--colour-sea-green: #198754;
--colour-chocolate: #C75300;
--colour-gold: #FFC107;
--colour-sky-blue: #0DCAF0;
--colour-fire-brick: #CC0000;
--colour-royal-blue: #0066CC;
--colour-deep-steel-blue: #266C9D;
--colour-deep-royal-blue: #135FAD;
--gradient-1: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
--gradient-2: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--gradient-3: radial-gradient(.2em 50% at left,#000a,#0000);
/* Typefaces */
--font-body: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Noto Sans';
--font-buttons: 'Verdana', 'Arial', 'Helvetica', sans-serif;
--font-other: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New';
/* Type scale */
--text-h1: 36px;
--leading-h1: 1.2;
--text-h2: 30px;
--leading-h2: 1.2;
--text-h3: 26px;
--leading-h3: 1.2;
--text-h4: 24px;
--leading-h4: 1.2;
--text-h5: 22px;
--leading-h5: 1.2;
--text-h6: 20px;
--leading-h6: 1.2;
--text-body: 1rem;
--leading-body: 1.5;
--text-p: 18px;
--leading-p: 16px;
--text-small: .875em;
--text-a: 15px;
/* Shape */
--radius-1: 0.375rem;
--radius-2: 3px;
--radius-3: 1rem;
--radius-4: 12px;
--radius-5: 0.25rem;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 576px;
--breakpoint-2: 767px;
--breakpoint-3: 768px;
--breakpoint-4: 991px;
--breakpoint-5: 992px;
--breakpoint-6: 1199px;
--breakpoint-7: 1200px;
--breakpoint-8: 1400px;
--max-width-1: 1320px;
--max-width-2: 1140px;
--max-width-3: 960px;
--max-width-4: 720px;
--max-width-5: 540px;
}
{
"site": "cruise.com",
"source": "https://sitestyleguide.com/cruise.com",
"text": "#212529",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Cool Near Black",
"hex": "#212529",
"rgb": [
33,
37,
41
]
},
{
"name": "Off White",
"hex": "#E9ECEF",
"rgb": [
233,
236,
239
]
},
{
"name": "Light Royal Blue",
"hex": "#0D6EFD",
"rgb": [
13,
110,
253
]
},
{
"name": "Dark Slate Blue",
"hex": "#224273",
"rgb": [
34,
66,
115
]
},
{
"name": "Light Steel Blue",
"hex": "#0973BA",
"rgb": [
9,
115,
186
]
},
{
"name": "Crimson",
"hex": "#DC3545",
"rgb": [
220,
53,
69
]
},
{
"name": "Sea Green",
"hex": "#198754",
"rgb": [
25,
135,
84
]
},
{
"name": "Chocolate",
"hex": "#C75300",
"rgb": [
199,
83,
0
]
},
{
"name": "Gold",
"hex": "#FFC107",
"rgb": [
255,
193,
7
]
},
{
"name": "Sky Blue",
"hex": "#0DCAF0",
"rgb": [
13,
202,
240
]
},
{
"name": "Fire Brick",
"hex": "#CC0000",
"rgb": [
204,
0,
0
]
},
{
"name": "Royal Blue",
"hex": "#0066CC",
"rgb": [
0,
102,
204
]
},
{
"name": "Deep Steel Blue",
"hex": "#266C9D",
"rgb": [
38,
108,
157
]
},
{
"name": "Deep Royal Blue",
"hex": "#135FAD",
"rgb": [
19,
95,
173
]
}
],
"fonts": [
{
"name": "Segoe UI",
"stack": "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
"weights": [
400
],
"source": "System font, or not loaded on this page"
},
{
"name": "Verdana",
"stack": "Verdana, Arial, Helvetica, \"sans-serif\"",
"weights": [],
"source": "System font, or not loaded on this page"
},
{
"name": "SFMono-Regular",
"stack": "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
"weights": [],
"source": "System font, or not loaded on this page"
},
{
"name": "Handlee",
"stack": "Handlee, cursive",
"weights": [],
"source": "System font, or not loaded on this page"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run cruise.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/cruise.com" title="Cruise.com 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 Segoe UI
Other websites using Segoe UI as their main typeface
Similar colours
Websites whose lead colour is closest to Cruise.com’s
Open Broadcaster Software
obsproject.com · 4 days ago
Save
Electronic Arts Home Page
ea.com · 3 days ago
Save
Waze
waze.com · 4 hours ago
Save
Google
thinkwithgoogle.com · 14 hours ago
Save
Captured from cruise.com on 28 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Cruise.com; this guide describes the public website for reference.