What font does GAP Australia use?

GAP Australia’s website uses three typefaces: Apple Color Emoji (body text), a system font; Gap Sans (headings), self-hosted; JudgemeStar, self-hosted.

What are GAP Australia’s brand colours?

The main colours on gap.com are Red (#E10000), Dark Blue (#001EA0), Black (#111827), Light Steel Blue (#007AFF), Dark Slate Blue (#374151) and Teal (#108474).

What colour is GAP Australia’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is GAP Australia’s logo from?

The logo shown in this guide was found on gap.com’s homepage. For official logo files and usage rules, check GAP Australia’s own brand or press page.

Is this GAP Australia’s official style guide?

No. SiteStyleGuide made it from gap.com’s public web pages on 21 October 2026, and isn’t affiliated with GAP Australia. Members can refresh a guide after 90 days to pick up changes.

GAP Australia Style Guide: Colours, Fonts & Logo

Identity & metadata

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

Title &
description

Page title: Gap Australia | Individual style for Women's & Men's Clothing – GAP Australia; ▲ 77 / 60 characters
Meta description: Shop Gap Australia — denim, khakis and logo essentials for women and men. Free shipping on orders over $99. GAP is officially in Australia: classic styles, modern fits and new drops all year. From the brand that made khakis famous — shop the full collection in universal sizing, with express delivery and 30-day returns.; ▲ 320 / 160 characters
Site name: GAP Australia
og:title: Gap Australia | Individual style for Women's & Men's Clothing
og:description: Shop Gap Australia — denim, khakis and logo essentials for women and men. Free shipping on orders over $99. GAP is officially in Australia: classic styles, modern fits and new drops all year. From the brand that made khakis famous — shop the full collection in universal sizing, with express delivery and 30-day returns.
Language: en
Theme colour: #FFFFFF

In search results

GAP Australiahttps://gapaustralia.com/

Gap Australia | Individual style for Women's & Men's Clothing…

Shop Gap Australia — denim, khakis and logo essentials for women and men. Free shipping on orders over $99. GAP is officially in Australia: classic styles, moder…

When shared

The image GAP Australia shares with links

gap.com

Gap Australia | Individual style for Women's & Men's Clothing

Shop Gap Australia — denim, khakis and logo essentials for women and men. Free shipping on orders over $99. G…

Back to top ↑

Logo & favicons

Found as: schema.org logo. SVG, 53 × 40.

Logo

On white

On black

On Red

Favicons

1 found

32 px · JPG icon

Gap Australia | Individual style for Women's & Men's Clothing – GAP Australia

Light browser tab

Gap Australia | Individual style for Women's & Men's Clothing – GAP Australia

Dark browser tab

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

Colour

Balance

How much each colour is used

White 42.5%
Black 36.1%
Off White 6.1%
Red 5.2%
Dark Blue 3.1%
Charcoal 2.1%
Black 1%
Light Steel Blue 1%
Dark Slate Blue 0.7%
Teal 0.6%
Gold 0.5%
Fire Brick 0.5%
Yellow 0.5%
Deep Steel Blue 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
21.00:1 AAA

On white
—

Background, text, graphic · #HeroStacked-template--27969635516720__vb2hero .hero-stacked__content .button, body
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background, border · body, #HeroStacked-template--27969635516720__vb2hero .hero-stacked__content .button
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 7

On text
18.10:1 AAA

On white
1.16:1 Fail

Border, background, text · .hoodie-day-teaser, .jdgm-rev__icon.jdgm--loading:after
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 80

On text
1.66:1 Fail

On white
12.63:1 AAA

Text, background, border · .field__choice input:checked, .jdgm-close-ico:before

Colours

Brand colours and accents, most used first

Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 12

On text
4.20:1 AA large

On white
5.00:1 AA

Text, background · .header-utilities__cart-count, .header-megamenu__heading.sale
Dark Blue

HEX

RGB

HSL

OKLCH

CMYK
100 81 0 37

On text
1.69:1 Fail

On white
12.40:1 AAA

Text, background, border · .cart-drawer__checkout, .header-megamenu__card-link:hover
Black

HEX

RGB

HSL

OKLCH

CMYK
56 38 0 85

On text
1.18:1 Fail

On white
17.74:1 AAA

Used · --tw-prose-headings, --tw-prose-links
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 52 0 0

On text
5.23:1 AA

On white
4.02:1 AA large

Background, text, border · .swiper-pagination-bullet-active, .swiper-pagination-progressbar .swiper-pagination-progressbar-fill
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
32 20 0 68

On text
2.04:1 Fail

On white
10.31:1 AAA

Used · --tw-prose-body, --tw-prose-invert-hr
Teal

HEX

RGB

HSL

OKLCH

CMYK
88 0 12 48

On text
4.57:1 AA

On white
4.59:1 AA

Text · .jdgm-widget.jdgm-medals-wrapper, .jdgm-rating__stars .jdgm-star
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 18 96 2

On text
13.84:1 AAA

On white
1.52:1 Fail

Background · .jdgm-histogram__bar:after, .jdgm-histogram__bar-content
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 18

On text
3.68:1 AA large

On white
5.70:1 AA

Text, border · .field__text-wrap:has(.field__text.error) .field__text-label, --color-border-error
Yellow

HEX

RGB

HSL

OKLCH

CMYK
0 0 100 0

On text
19.56:1 AAA

On white
1.07:1 Fail

Background, text · .jdgm-widget div.jdgm-input-error, .jdgm-verified-badge--style-vintage .jdgm-verified-badge__stars .jdgm-star
Deep Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
81 44 0 18

On text
4.50:1 AA

On white
4.67:1 AA

Border · #VB2Homepage .hero-stacked .button:focus-visible, #HeroStacked-template--27969635516720__vb2hero .button:focus-visible

Gradients

linear-gradient(#00000080 -.56%,#00000026 53.77%,#0000 86.11%)
linear-gradient(to bottom right, transparent calc(50% - 1px), calc(50% - 1px), calc(50% + 1px), transparent calc(50% + 1px))
linear-gradient(transparent,#00000094)

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.

Gap Sans

Aa 400

Apple Color Emoji

System font, or not loaded on this page · body · shown in a stand-in if you don’t have it

Aa 400

Gap Sans

Self-hosted · weights 400 · headings · shown in a stand-in if you don’t have it

Aa 300

Arial

System font, or not loaded on this page · weights 300 · shown in a stand-in if you don’t have it

Aa 400 Aa 700

JudgemeStar

Self-hosted · weights 400, 700 · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Heading 1 14px / 20px

GAP Australia

Heading 2 32px / 40px weight 400

Gap Australia | Individual style for Women's & …

Body 16px / 140%

Shop Gap Australia — denim, khakis and logo essentials for women and men. Free shipping on orders over $99. GAP is officially in Australia:…

Paragraph 16px / 140%

Shop Gap Australia — denim, khakis and logo essentials for women and men. Free shipping on orders over $99. GAP is officially in Australia:…

Small 14px

Shop Gap Australia — denim, khakis and logo essentials for women and men. Free shipping on orders over $99. GAP is officially in Australia:…

Button 100% none

Get started

Link 14px

Sizes in use

Most common across the site

32pxline 40px · 7 rules
28pxline 1 · 6 rules
24pxline 1.33333 · 5 rules
20pxline 1.6 · 7 rules
16pxline 22px · 19 rules
14pxline 1.4 · 33 rules
12pxline 1.5 · 11 rules
11pxline 145% · 6 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

#HeroStacked-template--27969635516720__vb2hero .hero-stacked__content .button · #000000

Corner radius

50% · 20×
4px · 6×
8px · 6×
6px · 4×
999px · 2×
12px · 2×

Shadows

0 0 #0000,0 0 #0000,0 0 #0000
4px 0px 20px rgba(0,0,0,0.15)
0 0 0 1px rgb( / 10%),0 3px rgb( / 10%)
0 0 0 2px #000000

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

480

749

767

768

992

1024

1279

1280

On a scale of 0 to 1440 px.

Content widths (max-width)

1280 px

1024 px

800 px

768 px

640 px

350 px

Back to top ↑

Notes

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

Notes

▲ CheckThe title is 77 characters. Google usually cuts titles near 60, so the end may not show in results.
▲ CheckThe description is 320 characters. Search results usually show about 160.

Back to top ↑

Questions

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

Questions

What font does GAP Australia use?: GAP Australia’s website uses three typefaces: Apple Color Emoji (body text), a system font; Gap Sans (headings), self-hosted; JudgemeStar, self-hosted.
What are GAP Australia’s brand colours?: The main colours on gap.com are Red (#E10000), Dark Blue (#001EA0), Black (#111827), Light Steel Blue (#007AFF), Dark Slate Blue (#374151) and Teal (#108474).
What colour is GAP Australia’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is GAP Australia’s logo from?: The logo shown in this guide was found on gap.com’s homepage. For official logo files and usage rules, check GAP Australia’s own brand or press page.
Is this GAP Australia’s official style guide?: No. SiteStyleGuide made it from gap.com’s public web pages on 21 October 2026, and isn’t affiliated with GAP Australia. 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

gap-com-tokens.css

Download

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

/* gap.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/gap.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-off-white: #EEEEEE;
  --colour-charcoal: #333333;
  --colour-red: #E10000;
  --colour-dark-blue: #001EA0;
  --colour-black-2: #111827;
  --colour-light-steel-blue: #007AFF;
  --colour-dark-slate-blue: #374151;
  --colour-teal: #108474;
  --colour-gold: #FBCD0A;
  --colour-fire-brick: #D00000;
  --colour-yellow: #FFFF00;
  --colour-deep-steel-blue: #2874D0;
  --gradient-1: linear-gradient(#00000080 -.56%,#00000026 53.77%,#0000 86.11%);
  --gradient-2: linear-gradient(to bottom right, transparent calc(50% - 1px), calc(50% - 1px), calc(50% + 1px), transparent calc(50% + 1px));
  --gradient-3: linear-gradient(transparent,#00000094);

  /* Typefaces */
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-headings: 'Gap Sans', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Helvetica';
  --font-other: 'Arial', 'Baskerville', monospace;

  /* Type scale */
  --text-h1: 14px;
  --leading-h1: 20px;
  --text-h2: 32px;
  --leading-h2: 40px;
  --text-body: 16px;
  --leading-body: 140%;
  --text-p: 16px;
  --leading-p: 140%;
  --text-small: 14px;
  --text-button: 100%;
  --text-a: 14px;

  /* Shape */
  --radius-1: 50%;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 6px;
  --radius-5: 999px;
  --radius-6: 12px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 480px;
  --breakpoint-2: 749px;
  --breakpoint-3: 767px;
  --breakpoint-4: 768px;
  --breakpoint-5: 992px;
  --breakpoint-6: 1024px;
  --breakpoint-7: 1279px;
  --breakpoint-8: 1280px;
  --max-width-1: 1280px;
  --max-width-2: 1024px;
  --max-width-3: 800px;
  --max-width-4: 768px;
  --max-width-5: 640px;
  --max-width-6: 350px;
}

{
    "site": "gap.com",
    "source": "https://sitestyleguide.com/gap.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Off White",
            "hex": "#EEEEEE",
            "rgb": [
                238,
                238,
                238
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#333333",
            "rgb": [
                51,
                51,
                51
            ]
        },
        {
            "name": "Red",
            "hex": "#E10000",
            "rgb": [
                225,
                0,
                0
            ]
        },
        {
            "name": "Dark Blue",
            "hex": "#001EA0",
            "rgb": [
                0,
                30,
                160
            ]
        },
        {
            "name": "Black",
            "hex": "#111827",
            "rgb": [
                17,
                24,
                39
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#007AFF",
            "rgb": [
                0,
                122,
                255
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#374151",
            "rgb": [
                55,
                65,
                81
            ]
        },
        {
            "name": "Teal",
            "hex": "#108474",
            "rgb": [
                16,
                132,
                116
            ]
        },
        {
            "name": "Gold",
            "hex": "#FBCD0A",
            "rgb": [
                251,
                205,
                10
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#D00000",
            "rgb": [
                208,
                0,
                0
            ]
        },
        {
            "name": "Yellow",
            "hex": "#FFFF00",
            "rgb": [
                255,
                255,
                0
            ]
        },
        {
            "name": "Deep Steel Blue",
            "hex": "#2874D0",
            "rgb": [
                40,
                116,
                208
            ]
        }
    ],
    "fonts": [
        {
            "name": "Apple Color Emoji",
            "stack": "ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Gap Sans",
            "stack": "'Gap Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Arial",
            "stack": "Arial, Baskerville, monospace",
            "weights": [
                300
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "JudgemeStar",
            "stack": "'JudgemeStar'",
            "weights": [
                400,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Nunito Sans",
            "stack": "\"Nunito Sans\", \"Helvetica\", Arial, sans-serif",
            "weights": [
                700
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "SFMono-Regular",
            "stack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Back to top ↑

Share

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

Share

X LinkedIn Facebook Pinterest Reddit Email

Run gap.com?

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.

<a href="https://sitestyleguide.com/gap.com" title="GAP Australia 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 ↑

GAP Australiastyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Off White

Charcoal

Colours

Red

Dark Blue

Black

Light Steel Blue

Dark Slate Blue

Teal

Gold

Fire Brick

Yellow

Deep Steel Blue

Gradients

Gap Sans

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

SeatSheet

エキサイトブログ

Node.js

Ubie

163.com

BILD

BBC Home

GSMArena.com

GAP Australiastyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Off White

Charcoal

Colours

Red

Dark Blue

Black

Light Steel Blue

Dark Slate Blue

Teal

Gold

Fire Brick

Yellow

Deep Steel Blue

Gradients

Gap Sans

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run gap.com?

Also set in Apple Color Emoji

SeatSheet

エキサイトブログ

Node.js

Ubie

Similar colours

163.com

BILD

BBC Home

GSMArena.com

Title &
description