The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Core

v3.0.2

Core includes a range of styles, variables and code that form the foundation of how the Design System works, including colour, typography and spacing.

Released

History
View changes
Install
npm i @gov.au/core
Tags
Required
Contributors
  • Trevor Brennan avatar picture
  • Dominik Wilkowski avatar picture
  • Petra Gulicher avatar picture
  • Simon Pascal Klein avatar picture
  • Julian Fleetwood avatar picture
  • Gary Broadbent avatar picture
  • Alex Page avatar picture
  • Hannah J. Nicdao avatar picture
  • Alexander Sadleir avatar picture
  • Patrick De Young avatar picture
#

Color

The colour palette is designed and tested to provide colour pairings that pass accessibility contrast ratios while still being easy to implement. This means that designers and developers using the system do not need to be concerned about if a colour will pass WCAG requirements in a particular circumstance.

Colour names imply their use

We use use semantic naming so that all colours labeled as foreground colours in a theme, are automatically tested to pass accessibility contrast ratios when used with all background colours within a theme and vice versa.

Tips

  • Do pair foreground and background colours.
  • Don't Mix light and dark variables.
  • Don't pair foreground with foreground or background with background.
// Light palette
// ==============

// Default values - can be overridden with your own colours
$AU-color-foreground-action:     #00698f !default;
$AU-color-foreground-focus:      #9263DE !default;
$AU-color-foreground-text:       #313131 !default;
$AU-color-background:            #ffffff !default;

// Generated values - automatically created from default values
// $AU-color-foreground-muted     (#626262)
// $AU-color-foreground-border    (#808080)
// $AU-color-background-shade     (#f5f5f5)
// $AU-color-background-alt       (#ebebeb)
// $AU-color-background-alt-shade (#e0e0e0)


// Dark palette
// ==============

// Default values - can be overridden with your own colours
$AU-colordark-foreground-action: #61daff !default;
$AU-colordark-foreground-focus:  #C390F9 !default;
$AU-colordark-foreground-text:   #ffffff !default;
$AU-colordark-background:        #135E70 !default;

// Generated values - automatically created from default values
// $AU-colordark-foreground-muted     (#bdd2d7)
// $AU-colordark-foreground-border    (#95b7bf)
// $AU-colordark-background-shade     (#104f5f)
// $AU-colordark-background-alt       (#0d414d)
// $AU-colordark-background-alt-shade (#0a323c)
#

Typography

A typographic scale was used to create a set of font-sizes and line-heights which have been designed for legibility and can be easily be implemented by designers or developers with a predictable output.

Using the design system's typography values means any object containing text is more likely to align with another element. This appearance of a baseline grid is created by automatically rounding the line-heights to the nearest grid value 4px, then converting them back to a unit-less value.

To ensure consistency with other components in the system:

  • Designers can use font-size and line-height values from the typographic scale.
  • Developers can use the AU-fontgrid function in SCSS.

Why does the design system use system fonts?

@include AU-fontgrid( xxxl );          // font-size: 3rem    | 48px; line-height: 1.5  | 72px;
@include AU-fontgrid( xxl );           // font-size: 2.5rem  | 40px; line-height: 1.5  | 60px;
@include AU-fontgrid( xl );            // font-size: 2rem    | 32px; line-height: 1.5  | 48px;
@include AU-fontgrid( lg );            // font-size: 1.5rem  | 24px; line-height: 1.5  | 36px;
@include AU-fontgrid( md );            // font-size: 1.25rem | 20px; line-height: 1.6  | 32px;
@include AU-fontgrid( sm );            // font-size: 1rem    | 16px; line-height: 1.5  | 24px;
@include AU-fontgrid( xs );            // font-size: 0.87rem | 14px; line-height: 1.4  | 20px;

@include AU-fontgrid( xxxl, heading ); // font-size: 3rem    | 48px; line-height: 1.25 | 60px;
@include AU-fontgrid( xxl, heading );  // font-size: 2.5rem  | 40px; line-height: 1.3  | 52px;
@include AU-fontgrid( xl, heading );   // font-size: 2rem    | 32px; line-height: 1.25 | 40px;
@include AU-fontgrid( lg, heading );   // font-size: 1.5rem  | 24px; line-height: 1.33 | 32px;
@include AU-fontgrid( md, heading );   // font-size: 1.25rem | 20px; line-height: 1.2  | 24px;
@include AU-fontgrid( sm, heading );   // font-size: 1rem    | 16px; line-height: 1.25 | 20px;
@include AU-fontgrid( xs, heading );   // font-size: 0.87rem | 14px; line-height: 1.14 | 16px;

@include AU-fontgrid( xxxl, nospace ); // font-size: 3rem    | 48px; line-height: 1    | 48px;
@include AU-fontgrid( xxl, nospace );  // font-size: 2.5rem  | 40px; line-height: 1    | 40px;
@include AU-fontgrid( xl, nospace );   // font-size: 2rem    | 32px; line-height: 1    | 32px;
@include AU-fontgrid( lg, nospace );   // font-size: 1.5rem  | 24px; line-height: 1    | 24px;
@include AU-fontgrid( md, nospace );   // font-size: 1.25rem | 20px; line-height: 1    | 20px;
@include AU-fontgrid( sm, nospace );   // font-size: 1rem    | 16px; line-height: 1    | 16px;
@include AU-fontgrid( xs, nospace );   // font-size: 0.87rem | 14px; line-height: 1.14 | 16px;
#

Spacing

The consistent alignment of elements is paramount for good UI design. The design system provides functions in SCSS so that designers and developers can work together with predictable outcomes.

The base-unit 1unit of spacing in the design system is derived from 1rem which in most browsers equates to 16px.

Design software

For doing mockups in software like Sketch or Photoshop, use pixel values which are divisible by 4.

Development

Developers should use AU-fontgrid and AU-space SCSS functions.

The AU-space accepts a default unnamed unit 1unit and outputs a scalable / accessible value 1rem as well as a fallback for older browsers 16px.

// SCSS Example:

@include AU-space( padding, 1unit );

// CSS Output:

// padding: 16px;
// padding: 1rem;