overcast.fm
overcast.fm · 2 days ago
SaveUnofficial A style guide made by SiteStyleGuide from acehotel.com’s public web pages. Not affiliated with or endorsed by Ace Hotel. The real site is acehotel.com ↗
Unofficial style guide
Ace Hotelstyle guide
Ace Hotel’s website (acehotel.com) sets its headings in Toronto Gothic and its body text in Bianco Sans. Its palette is led by Sandy Brown (#FF944C), Fire Brick (#C5341B) and Golden Rod (#EEB114), with #231F20 text on #FFFFFF. Captured from the live site on 27 October 2026.
- Website
- acehotel.com
- Typefaces
- Toronto Gothic, Bianco Sans, Mabry Pro
- Palette
- 4 neutrals, 5 colours, 3 gradients
- Captured
- 27 Oct 2026 · added by @sitestyleguide
https://acehotel.com/
Screenshot
acehotel.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
- Ace Hotel | Hotels in North America, Japan, Australia & Greece
- ▲ 62 / 60 characters
- Meta description
- Stylish & unique lifestyle hotels in Sydney, New York, Brooklyn, Palm Springs, Seattle, Kyoto, Toronto, and Athens. Book online today.
- ● 134 / 160 characters
- Site name
- Ace Hotel
- og:title
- Ace Hotel | Hotels in North America, Japan, Australia & Greece
- og:description
- Stylish & unique lifestyle hotels in Sydney, New York, Brooklyn, Palm Springs, Seattle, Kyoto, Toronto, and Athens. Book online today.
- Language
- en-US
- Theme colour
- #ffffff
In search results
Ace Hotelhttps://acehotel.com/
Ace Hotel | Hotels in North America, Japan, Australia & Greece
Stylish & unique lifestyle hotels in Sydney, New York, Brooklyn, Palm Springs, Seattle, Kyoto, Toronto, and Athens. Book online today.
When shared
acehotel.com
Ace Hotel | Hotels in North America, Japan, Australia & Greece
Stylish & unique lifestyle hotels in Sydney, New York, Brooklyn, Palm Springs, Seattle, Kyoto, Toronto, and A…
Logo & favicons
Found as: SVG in the header. SVG.
Logo
On white
On black
On Sandy Brown
Favicons
8 found-
192 px · PNG
icon
-
144 px · PNG
icon
-
96 px · PNG
icon
-
72 px · PNG
icon
-
60 px · PNG
apple-touch-icon
-
57 px · PNG
apple-touch-icon
-
48 px · PNG
icon
-
36 px · PNG
icon
Ace Hotel | Hotels in North America, Japan, Australia & Greece
Light browser tab
Ace Hotel | Hotels in North America, Japan, Australia & Greece
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 (#231F20) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 48.2%
- Near Black 39.9%
- Black 3.4%
- Off White 3.1%
- Sandy Brown 2.8%
- Fire Brick 1.2%
- Golden Rod 0.7%
- Blue 0.4%
- Dark Olive Green 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
- 16.30:1 AAA
- On white
- —
Background, text, border · #alert-bar .alert-bar-content .alert-message, .single-event-page .event-tickets body.seibu .m-text-intro.section-container .te
-
Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 11 9 86
- On text
- —
- On white
- 16.30:1 AAA
Text, background, border · .single-event-page .event-tickets body.seibu .m-text-intro.section-container .te, .button.hollow
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 1.29:1 Fail
- On white
- 21.00:1 AAA
Border, text, background · .single-event-page .event-grid .info .event-passed-notice, .button:active
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 8
- On text
- 13.55:1 AAA
- On white
- 1.20:1 Fail
Background, border · .site-header .top-nav-group .booking-nav-group .booking-nav .booking-form .booki, .m-image-carousel.gallery-slider.has-light-bg .caption-container::before
Colours
Brand colours and accents, most used first-
Sandy Brown
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 42 70 0
- On text
- 7.45:1 AAA
- On white
- 2.19:1 Fail
Background, text, border · .site-header .top-nav-group .booking-nav-group .booking-nav .booking-form .booki, .locations-overlay-open .main-nav-bar.is-inverted[data-scrolled] .main-nav-butto
-
Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 74 86 23
- On text
- 3.01:1 AA large
- On white
- 5.41:1 AA
Background, border, text · .nav-booking-form .msg-error, #booking-card .msg-error
-
Golden Rod
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 26 92 7
- On text
- 8.49:1 AAA
- On white
- 1.92:1 Fail
Text, background, border · .m-pdf-slider .flickity-page-dots .dot.is-selected, .m-pdf-slider .pdf-background-loading .pdf-loading-text
-
Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 100 0 0
- On text
- 1.90:1 Fail
- On white
- 8.59:1 AAA
Background · .m-pdf-slider .pdf-text-layer ::-moz-selection, .m-pdf-slider .pdf-text-layer ::selection
-
Dark Olive Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 4 42 55
- On text
- 3.09:1 AA large
- On white
- 5.27:1 AA
Background · #alert-bar, #expanded-window
Gradients
-
linear-gradient(to bottom,rgba(0,0,0,0) 65%,rgba(0,0,0,.45) 81%)
-
linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.85) 150%)
-
linear-gradient(180deg,rgba(0,0,0,.9) 0,rgba(0,0,0,0) 100%)
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.
Toronto Gothic
Aa
400
Aa
500
Toronto Gothic
Self-hosted · weights 400, 500 · headings, buttons · shown in a stand-in if you don’t have it
Aa
400
Aa
700
Bianco Sans
Self-hosted · weights 400, 500, 700 · headings, body · shown in a stand-in if you don’t have it
Aa
400
Aa
700
Mabry Pro
Self-hosted · weights 400, 700 · headings · shown in a stand-in if you don’t have it
Aa
400
Aa
700
Interstate
Self-hosted · weights 400, 700 · headings, buttons · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS · root 14 px
Heading 1
4.2857142857rem · 60 px / 4.4285714286rem
weight 300 · Toronto Gothic
Ace Hotel
Heading 2
3.5714285714rem · 50 px / 4.2857142857rem
weight 400 · Toronto Gothic
Ace Hotel | Hotels in North America, Japan, Aus…
Heading 3
2.5714285714rem · 36 px / 3.0714285714rem
weight 400 · Toronto Gothic
Ace Hotel | Hotels in North America, Japan, Aus…
Heading 4
1.7142857143rem · 24 px / 2.5714285714rem
weight 500 · Tiempos Headline
Ace Hotel | Hotels in North America, Japan, Aus…
Heading 5
1.4285714286rem · 20 px / 1.7142857143rem
weight 500 · Tiempos Headline
Ace Hotel | Hotels in North America, Japan, Aus…
Heading 6
1.2857142857rem · 18 px / 1.7142857143rem
weight 500 · Tiempos Headline
Ace Hotel | Hotels in North America, Japan, Aus…
Body
—
weight 400 · Bianco Sans
Stylish & unique lifestyle hotels in Sydney, New York, Brooklyn, Palm Springs, Seattle, Kyoto, Toronto, and Athens. Book online today.
Paragraph
1rem · 14 px / 1.5rem
Stylish & unique lifestyle hotels in Sydney, New York, Brooklyn, Palm Springs, Seattle, Kyoto, Toronto, and Athens. Book online today.
Small
60%
Stylish & unique lifestyle hotels in Sydney, New York, Brooklyn, Palm Springs, Seattle, Kyoto, Toronto, and Athens. Book online today.
Button
100% / 1.15
none
Get started
Link
1rem · 14 px / 1.2
weight 400 · uppercase · Bianco Sans Fallback
Read more about Ace Hotel
Sizes in use
Most common across the site- 70pxline 5.9285714286rem · 8 rules
- 32pxline 2.7142857143rem · 18 rules
- 28pxline 2.3571428571rem · 9 rules
- 24pxline 2.2857142857rem · 13 rules
- 18pxline 1.5 · 11 rules
- 16pxline 2.1428571429rem · 58 rules
- 14pxline 1.8571428571rem · 60 rules
- 12pxline 1.5rem · 20 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
.single-event-page .event-tickets body.seibu .m-text-intro.section-container .te · #231F20
Corner radius
- 50% · 22×
- .1428571429rem · 10×
- .2857142857rem · 10×
- 2px · 7×
- 9999rem · 4×
- 1.5714285714rem · 2×
Shadows
- 0 2px 21px 0 rgba(0,0,0,.17)
- 1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,.08)
- -2px 0 0 #e6e6e6,5px 0 0 #e6e6e6
- -1px 0 0 #e6e6e6
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
640
767
768
1023
1024
1280
1360
1440
On a scale of 0 to 1440 px.
Content widths (max-width)
1440 px
1360 px
1200 px
557 px
457 px
314 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 62 characters. Google usually cuts titles near 60, so the end may not show in results.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Ace Hotel use?
- Ace Hotel’s website uses four typefaces: Toronto Gothic (headings), self-hosted; Bianco Sans (body text), self-hosted; Mabry Pro, self-hosted; Interstate, self-hosted.
- What are Ace Hotel’s brand colours?
- The main colours on acehotel.com are Sandy Brown (#FF944C), Fire Brick (#C5341B), Golden Rod (#EEB114), Blue (#0000FF), Dark Olive Green (#726D42) and White (#FFFFFF).
- What colour is Ace Hotel’s text and background?
- Body text is #231F20 on a #FFFFFF background.
- Where is Ace Hotel’s logo from?
- The logo shown in this guide was found on acehotel.com’s homepage. For official logo files and usage rules, check Ace Hotel’s own brand or press page.
- Is this Ace Hotel’s official style guide?
- No. SiteStyleGuide made it from acehotel.com’s public web pages on 27 October 2026, and isn’t affiliated with Ace Hotel. 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
acehotel-com-tokens.css
/* acehotel.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/acehotel.com) */
:root {
/* Colours */
--text: #231F20;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-near-black: #231F20;
--colour-black: #000000;
--colour-off-white: #EAEAEA;
--colour-sandy-brown: #FF944C;
--colour-fire-brick: #C5341B;
--colour-golden-rod: #EEB114;
--colour-blue: #0000FF;
--colour-dark-olive-green: #726D42;
--gradient-1: linear-gradient(to bottom,rgba(0,0,0,0) 65%,rgba(0,0,0,.45) 81%);
--gradient-2: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.85) 150%);
--gradient-3: linear-gradient(180deg,rgba(0,0,0,.9) 0,rgba(0,0,0,0) 100%);
/* Typefaces */
--font-headings: 'Toronto Gothic', 'Toronto Gothic Fallback';
--font-buttons: 'Toronto Gothic', 'Toronto Gothic Fallback';
--font-body: 'Bianco Sans', 'Bianco Sans Fallback';
/* Type scale */
--text-h1: 4.2857142857rem;
--leading-h1: 4.4285714286rem;
--text-h2: 3.5714285714rem;
--leading-h2: 4.2857142857rem;
--text-h3: 2.5714285714rem;
--leading-h3: 3.0714285714rem;
--text-h4: 1.7142857143rem;
--leading-h4: 2.5714285714rem;
--text-h5: 1.4285714286rem;
--leading-h5: 1.7142857143rem;
--text-h6: 1.2857142857rem;
--leading-h6: 1.7142857143rem;
--text-p: 1rem;
--leading-p: 1.5rem;
--text-small: 60%;
--text-button: 100%;
--leading-button: 1.15;
--text-a: 1rem;
--leading-a: 1.2;
/* Shape */
--radius-1: 50%;
--radius-2: .1428571429rem;
--radius-3: .2857142857rem;
--radius-4: 2px;
--radius-5: 9999rem;
--radius-6: 1.5714285714rem;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 640px;
--breakpoint-2: 767px;
--breakpoint-3: 768px;
--breakpoint-4: 1023px;
--breakpoint-5: 1024px;
--breakpoint-6: 1280px;
--breakpoint-7: 1360px;
--breakpoint-8: 1440px;
--max-width-1: 1440px;
--max-width-2: 1360px;
--max-width-3: 1200px;
--max-width-4: 557px;
--max-width-5: 457px;
--max-width-6: 314px;
}
{
"site": "acehotel.com",
"source": "https://sitestyleguide.com/acehotel.com",
"text": "#231F20",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Near Black",
"hex": "#231F20",
"rgb": [
35,
31,
32
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Off White",
"hex": "#EAEAEA",
"rgb": [
234,
234,
234
]
},
{
"name": "Sandy Brown",
"hex": "#FF944C",
"rgb": [
255,
148,
76
]
},
{
"name": "Fire Brick",
"hex": "#C5341B",
"rgb": [
197,
52,
27
]
},
{
"name": "Golden Rod",
"hex": "#EEB114",
"rgb": [
238,
177,
20
]
},
{
"name": "Blue",
"hex": "#0000FF",
"rgb": [
0,
0,
255
]
},
{
"name": "Dark Olive Green",
"hex": "#726D42",
"rgb": [
114,
109,
66
]
}
],
"fonts": [
{
"name": "Toronto Gothic",
"stack": "\"Toronto Gothic\", \"Toronto Gothic Fallback\"",
"weights": [
400,
500
],
"source": "Self-hosted"
},
{
"name": "Bianco Sans",
"stack": "\"Bianco Sans\", \"Bianco Sans Fallback\"",
"weights": [
400,
500,
700
],
"source": "Self-hosted"
},
{
"name": "Mabry Pro",
"stack": "\"Mabry Pro\", Helvetica, Arial, sans-serif",
"weights": [
400,
700
],
"source": "Self-hosted"
},
{
"name": "Interstate",
"stack": "Interstate, \"Bianco Sans\", \"Bianco Sans Fallback\"",
"weights": [
400,
700
],
"source": "Self-hosted"
},
{
"name": "Tiempos Headline",
"stack": "\"Tiempos Headline\", \"Tiempos Headline Fallback\"",
"weights": [
500
],
"source": "Self-hosted"
},
{
"name": "Toronto Gothic Fallback",
"stack": "\"Toronto Gothic Fallback\"",
"weights": [
400
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run acehotel.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/acehotel.com" title="Ace Hotel style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Similar colours
Websites whose lead colour is closest to Ace Hotel’s
Captured from acehotel.com on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Ace Hotel; this guide describes the public website for reference.