SiteStyleGuide

Unofficial A style guide made by SiteStyleGuide from hunterstore.com.au’s public web pages. Not affiliated with or endorsed by Hunter Store. The real site is hunterstore.com.au ↗

Hunter Store logo

Unofficial style guide

Hunter Storestyle guide

Hunter Store’s website (hunterstore.com.au) uses Source Sans Pro for its headings and body text. Its palette is led by Light Red (#DA4833), Fire Brick (#D60000) and Light Coral (#FF7070), with #262626 text on #FFFFFF. Captured from the live site on 22 October 2026.

Typefaces
Source Sans Pro
Palette
4 neutrals, 10 colours, 2 gradients
Captured
22 Oct 2026 · added by @milesb
https://hunterstore.com.au/ Screenshot
Screenshot of the hunterstore.com.au homepage on a desktop screen
Screenshot of hunterstore.com.au on a 1440 px desktop screen, 22 Oct 2026.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title
Hunter Store: Shoes, Bags, Jewellery & Accessories Perth
● 56 / 60 characters
Meta description
Hunter Store is Perth's choice for women's unique shoes, bags, jewellery and accessories based in Leederville and Nedlands, Western Australia.
● 142 / 160 characters
Site name
Hunter Store
og:title
Hunter Store: Shoes, Bags, Jewellery & Accessories Perth
og:description
Hunter Store is Perth's choice for women's unique shoes, bags, jewellery and accessories based in Leederville and Nedlands, Western Australia.
Language
en

In search results

Hunter Storehttps://hunterstore.com.au/

Hunter Store: Shoes, Bags, Jewellery & Accessories Perth

Hunter Store is Perth's choice for women's unique shoes, bags, jewellery and accessories based in Leederville and Nedlands, Western Australia.

When shared

No og:image, so no picture

hunterstore.com.au

Hunter Store: Shoes, Bags, Jewellery & Accessories Perth

Hunter Store is Perth's choice for women's unique shoes, bags, jewellery and accessories based in Leederville…

Back to top ↑

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 (#262626) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used
  • White 31.5%
  • Charcoal 28%
  • Off White 15%
  • Black 15%
  • Light Red 5.2%
  • Fire Brick 1.2%
  • Light Coral 1%
  • Medium Blue 0.9%
  • Lime Green 0.4%
  • Brown 0.4%
  • Sea Green 0.4%
  • Deep Red 0.4%
  • Orange 0.4%
  • Orange Red 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
    15.13:1 AAA
    On white
    —

    Background, text, graphic · body, .has-featured-image .post-title

  • Charcoal

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 85
    On text
    —
    On white
    15.13:1 AAA

    Text, background, border · body, .quick-shop-modal-trigger

  • Off White

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 11
    On text
    11.90:1 AAA
    On white
    1.27:1 Fail

    Border, background, text · --surface-pick-up-item-theme-border-color, .search-results-products~.search-results-other .section-title

  • Black

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 97
    On text
    1.32:1 Fail
    On white
    20.03:1 AAA

    Text, background, graphic · .age-gate__confirm_btn, .color-black .home-masonry-feature-subtitle

Colours

Brand colours and accents, most used first
  • Light Red

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 67 77 15
    On text
    3.57:1 AA large
    On white
    4.24:1 AA large

    Text, background · .order-totals .order-discount-title, .order-totals .order-discount-title svg

  • Fire Brick

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 100 100 16
    On text
    2.78:1 Fail
    On white
    5.44:1 AA

    Text, border · input[type=text].input.error, .error-message

  • Light Coral

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 56 56 0
    On text
    5.62:1 AA
    On white
    2.69:1 Fail

    Text · input[type=text].input.error::-webkit-input-placeholder, input[type=text].input.error::-moz-placeholder

  • Medium Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    89 75 0 26
    On text
    1.56:1 Fail
    On white
    9.67:1 AAA

    Background · inline style on <path>

  • Lime Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    76 0 76 20
    On text
    7.14:1 AAA
    On white
    2.12:1 Fail

    Used · --surface-pick-up-embed-theme-success-color, --surface-pick-up-item-theme-success-color

  • Brown

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 68 68 30
    On text
    2.58:1 Fail
    On white
    5.86:1 AA

    Used · --surface-pick-up-embed-theme-error-color, --surface-pick-up-item-theme-error-color

  • Sea Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    88 0 47 49
    On text
    3.06:1 AA large
    On white
    4.95:1 AA

    Used · --surface-pick-up-embed-theme-success-color, --surface-pick-up-item-theme-success-color

  • Deep Red

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 100 89 8
    On text
    3.28:1 AA large
    On white
    4.62:1 AA

    Background · inline style on <path>

  • Orange

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 36 89 3
    On text
    7.11:1 AAA
    On white
    2.13:1 Fail

    Background · inline style on <path>

  • Orange Red

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 63 100 0
    On text
    4.96:1 AA
    On white
    3.05:1 AA large

    Background · inline style on <path>

Gradients

  • linear-gradient(to right,#262626 0%,rgba(38,38,38,.06) 0%)

  • linear-gradient(to right,#ffffff 0%,rgba(255,255,255,.6) 0%)

Back to top ↑

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.

Source Sans Pro

Aa 200 Aa 700

Source Sans Pro

Self-hosted · weights 200, 400, 700 · headings, buttons, body · 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 2.5714285714rem · 36 px / 1.25 weight 400 · uppercase · Source Sans Pro

Hunter Store

Heading 2 1.7142857143rem · 24 px / 1.25 weight 400 · uppercase · Source Sans Pro

Hunter Store: Shoes, Bags, Jewellery & Accessor…

Heading 3 1.1428571429rem · 16 px / 1.25 weight 400 · uppercase · Source Sans Pro

Hunter Store: Shoes, Bags, Jewellery & Accessor…

Heading 4 1rem · 14 px / 1.25 weight 400 · uppercase · Source Sans Pro

Hunter Store: Shoes, Bags, Jewellery & Accessor…

Heading 5 1rem · 14 px / 1.25 weight 400 · uppercase · Source Sans Pro

Hunter Store: Shoes, Bags, Jewellery & Accessor…

Heading 6 .8571428571rem · 12 px / 1.25 weight 400 · uppercase · Source Sans Pro

Hunter Store: Shoes, Bags, Jewellery & Accessor…

Body 14px / 1.625 weight 400 · Source Sans Pro

Hunter Store is Perth's choice for women's unique shoes, bags, jewellery and accessories based in Leederville and Nedlands, Western Austral…

Small 80%

Hunter Store is Perth's choice for women's unique shoes, bags, jewellery and accessories based in Leederville and Nedlands, Western Austral…

Link 1rem · 14 px / 38px weight 400 · uppercase · Source Sans Pro

Read more about Hunter Store

Sizes in use

Most common across the site
  • 24px3 rules
  • 18px4 rules
  • 16pxline 1.4 · 20 rules
  • 15px3 rules
  • 14pxline 1.625 · 80 rules
  • 13pxline 39px · 15 rules
  • 12px8 rules
  • 11px3 rules

Back to top ↑

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

.age-gate__confirm_btn · #080808 · radius 2px

Link

Read our latest news today.

a · #080808

Corner radius

  • 2px · 14×
  • 50% · 11×
  • 3px · 4×
  • 4px · 4×
  • 10px · 3×
  • 100% · 2×

Shadows

  • 0 0 0 1px #2626260d
  • 0 0 0 4px #26262640
  • 2px 0 #fff
  • 0 0 0 3px #26262640

Back to top ↑

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

539
540
720
768
769
770
1079
1080

On a scale of 0 to 1440 px.

Content widths (max-width)

1260 px
960 px
705 px
600 px
560 px
340 px

Back to top ↑

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

  • ● FineThe title is 56 characters, short enough to show in full in search results.
  • ▲ CheckThere is no og:image, so links shared on social media show no picture.

Back to top ↑

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Hunter Store use?
Hunter Store’s website uses one typeface: Source Sans Pro (headings and body text), self-hosted.
What are Hunter Store’s brand colours?
The main colours on hunterstore.com.au are Light Red (#DA4833), Fire Brick (#D60000), Light Coral (#FF7070), Medium Blue (#142FBD), Lime Green (#32CD32) and Brown (#B33A3A).
What colour is Hunter Store’s text and background?
Body text is #262626 on a #FFFFFF background.
Where is Hunter Store’s logo from?
The logo shown in this guide was found on hunterstore.com.au’s homepage. For official logo files and usage rules, check Hunter Store’s own brand or press page.
Is this Hunter Store’s official style guide?
No. SiteStyleGuide made it from hunterstore.com.au’s public web pages on 22 October 2026, and isn’t affiliated with Hunter Store. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

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

hunterstore-com-au-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* hunterstore.com.au design tokens, from SiteStyleGuide (https://sitestyleguide.com/hunterstore.com.au) */
:root {
  /* Colours */
  --text: #262626;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-charcoal: #262626;
  --colour-off-white: #E4E4E4;
  --colour-black: #080808;
  --colour-light-red: #DA4833;
  --colour-fire-brick: #D60000;
  --colour-light-coral: #FF7070;
  --colour-medium-blue: #142FBD;
  --colour-lime-green: #32CD32;
  --colour-brown: #B33A3A;
  --colour-sea-green: #108144;
  --colour-deep-red: #EB001B;
  --colour-orange: #F79E1B;
  --colour-orange-red: #FF5F00;
  --gradient-1: linear-gradient(to right,#262626 0%,rgba(38,38,38,.06) 0%);
  --gradient-2: linear-gradient(to right,#ffffff 0%,rgba(255,255,255,.6) 0%);

  /* Typefaces */
  --font-headings: 'Source Sans Pro', sans-serif;
  --font-buttons: 'Source Sans Pro', sans-serif;
  --font-body: 'Source Sans Pro', sans-serif;

  /* Type scale */
  --text-h1: 2.5714285714rem;
  --leading-h1: 1.25;
  --text-h2: 1.7142857143rem;
  --leading-h2: 1.25;
  --text-h3: 1.1428571429rem;
  --leading-h3: 1.25;
  --text-h4: 1rem;
  --leading-h4: 1.25;
  --text-h5: 1rem;
  --leading-h5: 1.25;
  --text-h6: .8571428571rem;
  --leading-h6: 1.25;
  --text-body: 14px;
  --leading-body: 1.625;
  --text-small: 80%;
  --text-a: 1rem;
  --leading-a: 38px;

  /* Shape */
  --radius-1: 2px;
  --radius-2: 50%;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-5: 10px;
  --radius-6: 100%;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 539px;
  --breakpoint-2: 540px;
  --breakpoint-3: 720px;
  --breakpoint-4: 768px;
  --breakpoint-5: 769px;
  --breakpoint-6: 770px;
  --breakpoint-7: 1079px;
  --breakpoint-8: 1080px;
  --max-width-1: 1260px;
  --max-width-2: 960px;
  --max-width-3: 705px;
  --max-width-4: 600px;
  --max-width-5: 560px;
  --max-width-6: 340px;
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

Run hunterstore.com.au?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

View our style guide on SiteStyleGuide
<a href="https://sitestyleguide.com/hunterstore.com.au" title="Hunter Store style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

Other websites using Source Sans Pro as their main typeface
Websites whose lead colour is closest to Hunter Store’s

Captured from hunterstore.com.au on 22 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Hunter Store; this guide describes the public website for reference.