SiteStyleGuide

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

NAB logo

Unofficial style guide

NABstyle guide

NAB’s website (nab.com.au) uses source-sans-pro for its headings and body text. Its palette is led by Fire Brick (#C20000), Dark Slate Grey (#3A4F59) and Dark Red (#8F0000), with #000000 text on #F5F5F5. Captured from the live site on 26 October 2026.

Website
nab.com.au
Typefaces
source-sans-pro, NAB Digital Script, NAB Impact
Palette
4 neutrals, 11 colours, 1 gradient
Captured
26 Oct 2026 · added by @lauren
Save Add to collection Share Report
https://www.nab.com.au/ Screenshot
Screenshot of the nab.com.au homepage on a desktop screen
Screenshot of nab.com.au on a 1440 px desktop screen, 26 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
Bank with NAB | Bank accounts, home loans and credit cards - NAB
▲ 64 / 60 characters
Meta description
NAB offer personal and business banking solutions, from bank accounts and credit cards to home loans and personal loans. Find out how we can help.
● 146 / 160 characters
Site name
NAB
og:title
NAB Homepage
og:description
NAB offer personal and business banking solutions, from bank accounts and credit cards to home loans and personal loans. Find out how we can help.
Language
en

In search results

NABhttps://www.nab.com.au/

Bank with NAB | Bank accounts, home loans and credit cards - …

NAB offer personal and business banking solutions, from bank accounts and credit cards to home loans and personal loans. Find out how we can help.

When shared

The image NAB shares with links

nab.com.au

NAB Homepage

NAB offer personal and business banking solutions, from bank accounts and credit cards to home loans and pers…

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 38%
  • Fire Brick 19.4%
  • Black 19.2%
  • Dark Slate Grey 4.7%
  • Dark Grey 4.6%
  • Grey 4.1%
  • Dark Red 2.6%
  • Forest Green 2.2%
  • Dim Grey 0.8%
  • Light Green 0.8%
  • Maroon 0.8%
  • Chocolate 0.8%
  • Royal Blue 0.8%
  • Light Slate Grey 0.7%
  • Deep Green 0.6%

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
    —

    Text, background, border · header #menu-logo-container #menu .hamburger-layer, body

  • Black

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 100
    On text
    —
    On white
    21.00:1 AAA

    Text, background, border · #header-container, .auto-text-colour

  • Dark Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 70
    On text
    2.48:1 Fail
    On white
    8.45:1 AAA

    Text, background, border · .mega-menu--container .mega-menu>.mega-menu-li>.nav-container, .bg-nab-grey30

  • Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 50
    On text
    5.32:1 AA
    On white
    3.95:1 AA large

    Border, background, text · #supports.js .nab-footer .nab-accordion--link-list-footer .accordion-link-list ., .nab-accordion__icon svg

Colours

Brand colours and accents, most used first

  • Fire Brick

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 100 100 24
    On text
    3.29:1 AA large
    On white
    6.38:1 AA

    Text, background, border · .kiosk-tutorial .nab-kiosk-tutorial .tutorial-nav button, .video-js .vjs-errors-timeout-button-container button

  • Dark Slate Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    35 11 0 65
    On text
    2.44:1 Fail
    On white
    8.60:1 AAA

    Text, background, border · .nab-button--alternate .nab-button, .nab-supplementary-text-with-icon.nab-supplementary-text-with-icon--nab-slate>:f

  • Dark Red

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 100 100 44
    On text
    2.17:1 Fail
    On white
    9.69:1 AAA

    Background, border · .kiosk-tutorial .nab-kiosk-tutorial .tutorial-nav button:hover, .bg-nab-red-hover

  • Forest Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    67 0 55 48
    On text
    4.53:1 AA
    On white
    4.64:1 AA

    Text, background, graphic · .nab-button--apply .nab-button, .nab-supplementary-text-with-icon.nab-supplementary-text-with-icon--emerald>:fir

  • Dim Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    30 9 0 58
    On text
    3.27:1 AA large
    On white
    6.42:1 AA

    Background · #quick-login.disabled, .login-options-desktop

  • Light Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    67 0 55 63
    On text
    2.73:1 Fail
    On white
    7.69:1 AAA

    Background, border · .bg-nab-emerald-hover, .nab-button--apply .nab-button:hover

  • Maroon

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 100 100 54
    On text
    1.76:1 Fail
    On white
    11.96:1 AAA

    Background, border · .bg-nab-red-selected, .nab-button--primary .nab-button:active

  • Chocolate

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 59 94 9
    On text
    6.14:1 AA
    On white
    3.42:1 AA large

    Text, background · .bg-nab-amber, .service-icon--amber

  • Royal Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    82 45 0 36
    On text
    3.05:1 AA large
    On white
    6.89:1 AA

    Text, background · .bg-nab-sapphire, .nab-button-link--blue .nab-button

  • Light Slate Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    28 16 0 38
    On text
    5.58:1 AA
    On white
    3.76:1 AA large

    Background · .video-js .vjs-load-progress, .video-js .vjs-volume-bar

  • Deep Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    68 0 55 70
    On text
    2.13:1 Fail
    On white
    9.87:1 AAA

    Background, border · .bg-nab-emerald-selected, .nab-button--apply .nab-button:active

Gradients

  • linear-gradient(to bottom right,#6d6f71 60%,#4f5153)

Dark mode

Switched on by the site

  • White

    #FFFFFF

  • Black

    #000000

  • Light Grey

    #B3B3B3

  • Fire Brick

    #C20000

  • Dark Grey

    #4D4D4D

  • Dark Slate Grey

    #3A4F59

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 900

source-sans-pro

Self-hosted · weights 200, 300, 400, 600, 700, 900 · headings, body, buttons · shown in a stand-in if you don’t have it

Aa 700

NAB Digital Script

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

Aa 700

NAB Impact

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

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

Type scale

From the site’s CSS
Heading 1 2rem · 32 px / 1 weight 300 · none · source-sans-pro

NAB

Heading 2 2rem · 32 px / 2.5rem weight 300 · none · source-sans-pro

Bank with NAB | Bank accounts, home loans and c…

Heading 3 1.5rem · 24 px / 2rem weight 700 · none · source-sans-pro

Bank with NAB | Bank accounts, home loans and c…

Heading 4 1.25rem · 20 px / 1.5rem weight 600 · none · source-sans-pro

Bank with NAB | Bank accounts, home loans and c…

Heading 5 1.125rem · 18 px / 1.5rem weight 600 · none · source-sans-pro

Bank with NAB | Bank accounts, home loans and c…

Heading 6 1.125rem · 18 px / 1.5rem weight 600 · none · source-sans-pro

Bank with NAB | Bank accounts, home loans and c…

Body 1rem · 16 px / 1.5rem weight 400 · none · source-sans-pro

NAB offer personal and business banking solutions, from bank accounts and credit cards to home loans and personal loans. Find out how we ca…

Paragraph 1rem · 16 px / 1.5rem weight 400 · none · source-sans-pro

NAB offer personal and business banking solutions, from bank accounts and credit cards to home loans and personal loans. Find out how we ca…

Small 80%

NAB offer personal and business banking solutions, from bank accounts and credit cards to home loans and personal loans. Find out how we ca…

Button 100% / 1.15 none

Get started

Sizes in use

Most common across the site
  • 64px1 rules
  • 40pxline 3rem · 4 rules
  • 32pxline 2.5rem · 5 rules
  • 24pxline 2rem · 7 rules
  • 20pxline 1.5rem · 3 rules
  • 18pxline 1.5rem · 6 rules
  • 16pxline 1.5rem · 35 rules
  • 14pxline 1.25rem · 9 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

.video-js .vjs-errors-timeout-button-container button · #C20000

Link

Read our latest news today.

a · #C20000

Corner radius

  • 4px · 80×
  • 50% · 20×
  • 8px · 7×
  • 1px · 2×
  • 16px · 1×
  • 10px · 1×

Shadows

  • 0 0 0 3px hsla(0,0%,100%,.65)
  • 0 0 0 3px rgba(0,0,0,.65)
  • 0 0 0 3px rgba(194,0,0,.65)
  • 0 1px 3px 0 rgba(0,0,0,.6)

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

320
767
768
991
992
1248
1327
1328

On a scale of 0 to 1440 px.

Content widths (max-width)

1328 px
1280 px
1248 px
430 px
343 px

Back to top ↑

Notes

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

Notes

  • ▲ CheckThe title is 64 characters. Google usually cuts titles near 60, so the end may not show in results.

Back to top ↑

Questions

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

Questions

What font does NAB use?
NAB’s website uses three typefaces: source-sans-pro (headings and body text), self-hosted; NAB Digital Script, self-hosted; NAB Impact, self-hosted.
What are NAB’s brand colours?
The main colours on nab.com.au are Fire Brick (#C20000), Dark Slate Grey (#3A4F59), Dark Red (#8F0000), Forest Green (#2C853C), Dim Grey (#4C626C) and Light Green (#1F5F2B).
What colour is NAB’s text and background?
Body text is #000000 on a #F5F5F5 background.
Where is NAB’s logo from?
The logo shown in this guide was found on nab.com.au’s homepage. For official logo files and usage rules, check NAB’s own brand or press page.
Is this NAB’s official style guide?
No. SiteStyleGuide made it from nab.com.au’s public web pages on 26 October 2026, and isn’t affiliated with NAB. 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

nab-com-au-tokens.css

Download

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

/* nab.com.au design tokens, from SiteStyleGuide (https://sitestyleguide.com/nab.com.au) */
:root {
  /* Colours */
  --text: #000000;
  --background: #F5F5F5;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-dark-grey: #4D4D4D;
  --colour-grey: #808080;
  --colour-fire-brick: #C20000;
  --colour-dark-slate-grey: #3A4F59;
  --colour-dark-red: #8F0000;
  --colour-forest-green: #2C853C;
  --colour-dim-grey: #4C626C;
  --colour-light-green: #1F5F2B;
  --colour-maroon: #750000;
  --colour-chocolate: #E9600E;
  --colour-royal-blue: #1E5AA3;
  --colour-light-slate-grey: #73859F;
  --colour-deep-green: #194D23;
  --gradient-1: linear-gradient(to bottom right,#6d6f71 60%,#4f5153);

  /* Typefaces */
  --font-headings: 'source-sans-pro', 'helvetica', -apple-system, blinkmacsystemfont, 'Segoe UI', 'roboto';
  --font-body: 'source-sans-pro', 'helvetica', -apple-system, blinkmacsystemfont, 'Segoe UI', 'roboto';
  --font-buttons: 'source-sans-pro', 'helvetica', -apple-system, blinkmacsystemfont, 'Segoe UI', 'roboto';
  --font-other: 'NAB Digital Script', -apple-system, blinkmacsystemfont, 'Segoe UI', 'roboto', 'oxygen-sans';

  /* Type scale */
  --text-h1: 2rem;
  --leading-h1: 1;
  --text-h2: 2rem;
  --leading-h2: 2.5rem;
  --text-h3: 1.5rem;
  --leading-h3: 2rem;
  --text-h4: 1.25rem;
  --leading-h4: 1.5rem;
  --text-h5: 1.125rem;
  --leading-h5: 1.5rem;
  --text-h6: 1.125rem;
  --leading-h6: 1.5rem;
  --text-body: 1rem;
  --leading-body: 1.5rem;
  --text-p: 1rem;
  --leading-p: 1.5rem;
  --text-small: 80%;
  --text-button: 100%;
  --leading-button: 1.15;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 320px;
  --breakpoint-2: 767px;
  --breakpoint-3: 768px;
  --breakpoint-4: 991px;
  --breakpoint-5: 992px;
  --breakpoint-6: 1248px;
  --breakpoint-7: 1327px;
  --breakpoint-8: 1328px;
  --max-width-1: 1328px;
  --max-width-2: 1280px;
  --max-width-3: 1248px;
  --max-width-4: 430px;
  --max-width-5: 343px;
}

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 nab.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/nab.com.au" title="NAB 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 ↑

Similar colours

Websites whose lead colour is closest to NAB’s

Captured from nab.com.au on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by NAB; this guide describes the public website for reference.