AI-Native Cloud
digitalocean.com · 1 day ago
SaveUnofficial A style guide made by SiteStyleGuide from australia.com’s public web pages. Not affiliated with or endorsed by australia.com. The real site is australia.com ↗
Unofficial style guide
australia.comstyle guide
australia.com’s website (australia.com) sets its headings in P22Mackinac-Medium and its body text in Haffer-Regular. Its palette is led by Dark Slate Grey (#00535E), Gold (#FFC20E) and Red (#EA2321), with #555555 text on #FFFFFF. Captured from the live site on 22 October 2026.
- Website
- australia.com
- Typefaces
- P22Mackinac-Medium, haffer-bold, Haffer-Regular
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 22 Oct 2026 · added by @milesb
https://www.australia.com/en
Screenshot
australia.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
- Travel to Australia - Australian Tourism Information - Tourism Australia
- ▲ 72 / 60 characters
- Meta description
- Looking for travel inspiration? Discover Australia's sparkling beaches, friendly wildlife and natural wonders. There's never been a better time to travel to Australia, so come and say g'day!
- ▲ 190 / 160 characters
- Site name
- australia.com
- og:title
- Travel to Australia - Australian Tourism Information - Tourism Australia
- og:description
- Looking for travel inspiration? Discover Australia's sparkling beaches, friendly wildlife and natural wonders. There's never been a better time to travel to Australia, so come and say g'day!
- Language
- en
In search results
australia.comhttps://www.australia.com/en
Travel to Australia - Australian Tourism Information - Touris…
Looking for travel inspiration? Discover Australia's sparkling beaches, friendly wildlife and natural wonders. There's never been a better time to travel to Aust…
When shared
australia.com
Travel to Australia - Australian Tourism Information - Tourism Australia
Looking for travel inspiration? Discover Australia's sparkling beaches, friendly wildlife and natural wonders…
Logo & favicons
Found as: image in the header. SVG, 1025 × 417.
Logo
On white
On black
On Dark Slate Grey
Favicons
5 found-
180 px · JPG
apple-touch-icon
-
167 px · JPG
apple-touch-icon
-
152 px · JPG
apple-touch-icon
-
48 px · PNG
icon
-
48 px · PNG
favicon.ico
Travel to Australia - Australian Tourism Information - Tourism Australia
Light browser tab
Travel to Australia - Australian Tourism Information - Tourism Australia
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 (#555555) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 37.8%
- Black 29.2%
- Cool Dark Grey 12.3%
- Off White 4.1%
- Dark Slate Grey 3.3%
- Gold 3%
- Red 2.7%
- Sienna 2%
- Steel Blue 1.7%
- Light Blue 0.8%
- Dark Green 0.7%
- Medium Sea Green 0.7%
- Deep Sky Blue 0.5%
- Peach Puff 0.5%
- Pale Golden Rod 0.4%
- Golden Rod 0.4%
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
- 7.46:1 AAA
- On white
- —
Background, text, border · .brightcove-video .brightcove-video-container .brightcove-video-cuepoint.cta-sty, .brightcove-video .brightcove-video-container .brightcove-video-title div
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 2.82:1 Fail
- On white
- 21.00:1 AAA
Text, background, border · .brightcove-video .brightcove-video-container .brightcove-video-title, .brightcove-video.portrait .brightcove-video-container .brightcove-video-title
-
Cool Dark Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 20 10 0 52
- On text
- 1.43:1 Fail
- On white
- 5.22:1 AA
Text, border, background · .input-group label input[type=number], .input-group input[type=radio]+label
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 2 1 0 11
- On text
- 5.73:1 AA
- On white
- 1.30:1 Fail
Background, border, text · .video-carousel-modal-content .close-button:hover, .nav-tabs .nav-item.show .nav-link
Colours
Brand colours and accents, most used first-
Dark Slate Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 12 0 63
- On text
- 1.17:1 Fail
- On white
- 8.75:1 AAA
Text, background, border · .combinedSiteSearch .nav-pills .show>.nav-link, .moreFilters-form-buttons .btn-apply
-
Gold
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 24 95 0
- On text
- 4.61:1 AA
- On white
- 1.62:1 Fail
Background, border, text · #dynamic-video-app .dynamic-video-container-end .content-section .button-section, .btn-primary
-
Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 85 86 8
- On text
- 1.69:1 Fail
- On white
- 4.41:1 AA large
Text, border, background · .input-group input[type=radio].error, .input-group input[type=radio].error+label
-
Sienna
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 64 100 31
- On text
- 1.27:1 Fail
- On white
- 5.87:1 AA
Background, text, border · #dynamic-video-app .dynamic-video-container-end .content-section .button-section, .textCommon .call-out-box--orange .block-with-text
-
Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 92 29 0 39
- On text
- 1.32:1 Fail
- On white
- 5.63:1 AA
Text, background, border · .featured-content ol li::marker, .embeddedRichText .call-out-box--blue .block-with-text
-
Light Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 29 9 0 0
- On text
- 5.69:1 AA
- On white
- 1.31:1 Fail
Background, border, text · .no-scroll-bar.color-blue, .textCommon .call-out-box--blue .block-with-text
-
Dark Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 93 0 45 71
- On text
- 1.40:1 Fail
- On white
- 10.41:1 AAA
Text, background · .darkGreen nav[aria-label=breadcrumb], .videoAtomic.section .color-green .ta-inner-container h2.ta-section-header
-
Medium Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 68 0 58 35
- On text
- 2.38:1 Fail
- On white
- 3.14:1 AA large
Background, graphic · .input-group input[type=checkbox]:checked:before, .input-group input[type=checkbox]:checked
-
Deep Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 73 15 0 22
- On text
- 2.72:1 Fail
- On white
- 2.74:1 Fail
Background · .blue .breadcrumb, .color-turquoise
-
Peach Puff
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 17 33 1
- On text
- 5.23:1 AA
- On white
- 1.43:1 Fail
Text, background, border · .textCommon .call-out-box--orange .block-with-text, .parentItineraryContainer .ta-blue .call-out-box--orange
-
Pale Golden Rod
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 6 0 32 8
- On text
- 5.78:1 AA
- On white
- 1.29:1 Fail
Background, border, text · .no-scroll-bar.color-green, .videoAtomic.section .color-green
-
Golden Rod
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 26 100 9
- On text
- 3.66:1 AA large
- On white
- 2.04:1 Fail
Background, border · .btn-primary:hover, .btn-primary.focus
Gradients
-
linear-gradient(180deg,#0000 80%,#000)
-
linear-gradient(0deg,#0000,#000)
-
linear-gradient(-180deg,#0000,#000)
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.
P22Mackinac-Medium
Aa
100
Aa
700
P22Mackinac-Medium
Self-hosted · weights 100, 400, 500, 700 · headings, buttons · shown in a stand-in if you don’t have it
Aa
400
Aa
700
haffer-bold
Self-hosted · weights 400, 700 · headings, buttons · shown in a stand-in if you don’t have it
Aa
400
Aa
700
Haffer-Regular
Self-hosted · weights 400, 700 · headings, body, buttons · shown in a stand-in if you don’t have it
Aa
100
Aa
500
Haffer-Medium
Self-hosted · weights 100, 500 · headings · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
5rem · 80 px / 1.15
weight 400 · none · P22Mackinac-Medium
australia.com
Heading 2
2.5rem · 40 px / 2.5rem
weight 400 · none · P22Mackinac-Medium
Travel to Australia - Australian Tourism Inform…
Heading 3
1.75rem · 28 px / 1.15
weight 100 · none · P22Mackinac-Medium
Travel to Australia - Australian Tourism Inform…
Heading 4
1.75rem · 28 px / 1.75rem
weight 100 · none · P22Mackinac-Medium
Travel to Australia - Australian Tourism Inform…
Heading 5
1.25rem · 20 px / 1.15
weight 100 · P22Mackinac-Medium
Travel to Australia - Australian Tourism Inform…
Heading 6
1rem · 16 px / 1.15
weight 100 · P22Mackinac-Medium
Travel to Australia - Australian Tourism Inform…
Body
1rem · 16 px / 1.5
weight 400 · Haffer-Regular
Looking for travel inspiration? Discover Australia's sparkling beaches, friendly wildlife and natural wonders. There's never been a better …
Paragraph
16px / 24px
weight 700 · Haffer-Bold
Looking for travel inspiration? Discover Australia's sparkling beaches, friendly wildlife and natural wonders. There's never been a better …
Small
.875em · 14 px
weight 400
Looking for travel inspiration? Discover Australia's sparkling beaches, friendly wildlife and natural wonders. There's never been a better …
Link
1rem · 16 px / 140%
weight 400 · Haffer-Bold
Read more about australia.com
Sizes in use
Most common across the site- 40pxline 2.5rem · 33 rules
- 28pxline 1.75rem · 18 rules
- 24pxline 1.5rem · 17 rules
- 20pxline 1.5 · 20 rules
- 18pxline 140% · 63 rules
- 16pxline 140% · 89 rules
- 14pxline 100% · 48 rules
- 12pxline 100% · 39 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
#dynamic-video-app .dynamic-video-container-end .content-section .button-section · #FFC20E · radius .3125rem
Link
Read our latest news today.
a · #00535E
Corner radius
- .75rem · 65×
- 50% · 57×
- .25rem · 36×
- 4px · 32×
- .5rem · 22×
- 6.1875rem · 19×
Shadows
- 0 2px 0#36a9c7
- 0 0 0 .125rem #fff,0 0 0 .25rem #111
- 0 0 0 4px rgba(0,0,0,.2)
- 0 0 0 .125rem #fff,0 0 0 .25rem #000
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
576
579
580
768
992
1024
1200
1440
On a scale of 0 to 1440 px.
Content widths (max-width)
1440 px
1200 px
1170 px
570 px
370 px
354 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 72 characters. Google usually cuts titles near 60, so the end may not show in results.
- ▲ CheckThe description is 190 characters. Search results usually show about 160.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does australia.com use?
- australia.com’s website uses four typefaces: P22Mackinac-Medium (headings), self-hosted; haffer-bold, self-hosted; Haffer-Regular (body text), self-hosted; Haffer-Medium, self-hosted.
- What are australia.com’s brand colours?
- The main colours on australia.com are Dark Slate Grey (#00535E), Gold (#FFC20E), Red (#EA2321), Sienna (#B04000), Steel Blue (#0D6E9C) and Light Blue (#B4E9FF).
- What colour is australia.com’s text and background?
- Body text is #555555 on a #FFFFFF background.
- Where is australia.com’s logo from?
- The logo shown in this guide was found on australia.com’s homepage. For official logo files and usage rules, check australia.com’s own brand or press page.
- Is this australia.com’s official style guide?
- No. SiteStyleGuide made it from australia.com’s public web pages on 22 October 2026, and isn’t affiliated with australia.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
australia-com-tokens.css
/* australia.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/australia.com) */
:root {
/* Colours */
--text: #555555;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-black: #000000;
--colour-cool-dark-grey: #616E7A;
--colour-off-white: #DFE2E4;
--colour-dark-slate-grey: #00535E;
--colour-gold: #FFC20E;
--colour-red: #EA2321;
--colour-sienna: #B04000;
--colour-steel-blue: #0D6E9C;
--colour-light-blue: #B4E9FF;
--colour-dark-green: #054A29;
--colour-medium-sea-green: #35A645;
--colour-deep-sky-blue: #36A9C7;
--colour-peach-puff: #FCD0A9;
--colour-pale-golden-rod: #DBEA9F;
--colour-golden-rod: #E7AC00;
--gradient-1: linear-gradient(180deg,#0000 80%,#000);
--gradient-2: linear-gradient(0deg,#0000,#000);
--gradient-3: linear-gradient(-180deg,#0000,#000);
/* Typefaces */
--font-headings: 'P22Mackinac-Medium', 'Georgia', serif;
--font-buttons: 'P22Mackinac-Medium', 'Georgia', serif;
--font-body: 'Haffer-Regular', 'Helvetica', 'Arial', sans-serif;
/* Type scale */
--text-h1: 5rem;
--leading-h1: 1.15;
--text-h2: 2.5rem;
--leading-h2: 2.5rem;
--text-h3: 1.75rem;
--leading-h3: 1.15;
--text-h4: 1.75rem;
--leading-h4: 1.75rem;
--text-h5: 1.25rem;
--leading-h5: 1.15;
--text-h6: 1rem;
--leading-h6: 1.15;
--text-body: 1rem;
--leading-body: 1.5;
--text-p: 16px;
--leading-p: 24px;
--text-small: .875em;
--text-a: 1rem;
--leading-a: 140%;
/* Shape */
--radius-1: .75rem;
--radius-2: 50%;
--radius-3: .25rem;
--radius-4: 4px;
--radius-5: .5rem;
--radius-6: 6.1875rem;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 576px;
--breakpoint-2: 579px;
--breakpoint-3: 580px;
--breakpoint-4: 768px;
--breakpoint-5: 992px;
--breakpoint-6: 1024px;
--breakpoint-7: 1200px;
--breakpoint-8: 1440px;
--max-width-1: 1440px;
--max-width-2: 1200px;
--max-width-3: 1170px;
--max-width-4: 570px;
--max-width-5: 370px;
--max-width-6: 354px;
}
{
"site": "australia.com",
"source": "https://sitestyleguide.com/australia.com",
"text": "#555555",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Cool Dark Grey",
"hex": "#616E7A",
"rgb": [
97,
110,
122
]
},
{
"name": "Off White",
"hex": "#DFE2E4",
"rgb": [
223,
226,
228
]
},
{
"name": "Dark Slate Grey",
"hex": "#00535E",
"rgb": [
0,
83,
94
]
},
{
"name": "Gold",
"hex": "#FFC20E",
"rgb": [
255,
194,
14
]
},
{
"name": "Red",
"hex": "#EA2321",
"rgb": [
234,
35,
33
]
},
{
"name": "Sienna",
"hex": "#B04000",
"rgb": [
176,
64,
0
]
},
{
"name": "Steel Blue",
"hex": "#0D6E9C",
"rgb": [
13,
110,
156
]
},
{
"name": "Light Blue",
"hex": "#B4E9FF",
"rgb": [
180,
233,
255
]
},
{
"name": "Dark Green",
"hex": "#054A29",
"rgb": [
5,
74,
41
]
},
{
"name": "Medium Sea Green",
"hex": "#35A645",
"rgb": [
53,
166,
69
]
},
{
"name": "Deep Sky Blue",
"hex": "#36A9C7",
"rgb": [
54,
169,
199
]
},
{
"name": "Peach Puff",
"hex": "#FCD0A9",
"rgb": [
252,
208,
169
]
},
{
"name": "Pale Golden Rod",
"hex": "#DBEA9F",
"rgb": [
219,
234,
159
]
},
{
"name": "Golden Rod",
"hex": "#E7AC00",
"rgb": [
231,
172,
0
]
}
],
"fonts": [
{
"name": "P22Mackinac-Medium",
"stack": "P22Mackinac-Medium, Georgia, serif",
"weights": [
100,
400,
500,
700
],
"source": "Self-hosted"
},
{
"name": "haffer-bold",
"stack": "Haffer-Bold, Helvetica, Arial, sans-serif",
"weights": [
400,
700
],
"source": "Self-hosted"
},
{
"name": "Haffer-Regular",
"stack": "Haffer-Regular, Helvetica, Arial, sans-serif",
"weights": [
400,
700
],
"source": "Self-hosted"
},
{
"name": "Haffer-Medium",
"stack": "Haffer-Medium, Helvetica, Arial, sans-serif",
"weights": [
100,
500
],
"source": "Self-hosted"
},
{
"name": "StayDreaming",
"stack": "StayDreaming, Helvetica, Arial, sans-serif",
"weights": [
400
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run australia.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/australia.com" title="australia.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>
Similar colours
Websites whose lead colour is closest to australia.com’s
Blackboard
blackboard.com · 3 days ago
Save
The Denver Post
denverpost.com · 4 days ago
Save
National Archives
archives.gov · 6 days ago
Save
Captured from australia.com on 22 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by australia.com; this guide describes the public website for reference.