Core

v5.0.0

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 @gold.au/core
Tags
Contributors
  • Hannah J. Nicdao avatar picture
  • Ryan Phung avatar picture
  • Simon Pascal Klein avatar picture
  • Alexander Sadleir avatar picture
  • Dominik Wilkowski avatar picture
  • Gary Broadbent avatar picture
  • Petra Gulicher avatar picture
  • Patrick De Young avatar picture
  • Monica Gee avatar picture
  • Alex Page avatar picture
  • Trevor Brennan avatar picture
  • Prasanth Ponnapalli avatar picture
  • Julian Fleetwood avatar picture
  • Ross Mullen 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 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.

Example

// 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-size and line-height values 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?

Example

@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.

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.

Example

// SCSS iframe:

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

// CSS Output:

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

Feedback