GGSA Design System

Colours

Please note -
All colours (except chart colours) are also available in increments of 5% lighter (from 5% to 95%).

Main colours

Primary
Secondary
Success
Error
Warning
Info

Neutral colours

Grey
White
Black

Background colours

Background Primary
Background Secondary
Background Grey
Background White

Chart colours

Chart 1
Chart 1 Dark
Chart 2
Chart 2 Dark
Chart 3
Chart 3 Dark
Chart 4
Chart 4 Dark
Chart 5
Chart 5 Dark
Chart 6
Chart 6 Dark
Chart 7
Chart 7 Dark
Chart 8
Chart 8 Dark

Border radius

Extra small
8px
Small
16px
Medium
24px
Large
32px
Extra large
64px

Shadows

Small
Medium
Large

Typography

Heading 1 - the quick brown
fox jumps over the lazy dog

Heading 2 - the quick brown
fox jumps over the lazy dog

Heading 3 - the quick brown
fox jumps over the lazy dog

Heading 4 - the quick brown
fox jumps over the lazy dog

Text large - the quick brown
fox jumps over the lazy dog
Text medium - the quick brown
fox jumps over the lazy dog
Text small - the quick brown
fox jumps over the lazy dog
Text extra small - the quick brown
fox jumps over the lazy dog

Lists

Unordered list

  • Heading 1
  • Heading 1

  • Heading 2
  • Heading 2

  • Heading 3
  • Heading 3

  • Heading 4
  • Heading 4

  • Text large
  • Text large
  • Text medium
  • Text medium
  • Text small
  • Text small
  • Text extra small
  • Text extra small

Ordered list

  1. Heading 1
  2. Heading 1

  1. Heading 2
  2. Heading 2

  1. Heading 3
  2. Heading 3

  1. Heading 4
  2. Heading 4

  1. Text large
  2. Text large
  1. Text medium
  2. Text medium
  1. Text small
  2. Text small
  1. Text extra small
  2. Text extra small

Expand collapse buttons

Heading 1

Heading 2

Heading 3

Heading 4

Text large

Text medium

Text small

Text extra small

Pills

Large

Pill primary
Pill secondary
Pill info
Pill success
Pill warning
Pill error

Medium

Pill primary
Pill secondary
Pill info
Pill success
Pill warning
Pill error

Small

Pill primary
Pill secondary
Pill info
Pill success
Pill warning
Pill error

Extra small

Pill primary
Pill secondary
Pill info
Pill success
Pill warning
Pill error

Notices

Info notice. Lorem sit amet, consectetur adipiscing elit.
Success notice. Lorem sit amet, consectetur adipiscing elit.
Warning notice. Lorem sit amet, consectetur adipiscing elit.
Error notice. Lorem sit amet, consectetur adipiscing elit.

Icons

Please note -
All icons from the icon pack are available for use.

Extra large

Solid
Stroke

Large

Solid
Stroke

Medium

Solid
Stroke

Small

Solid
Stroke

Extra small

Solid
Stroke

Extra extra small

Solid
Stroke

Grids

Please note -
All of the available options shown below can also be configured to change responsively / at different screen sizes.

Flexible columns

Shrink
Grow

Even columns

Even
Even
Even

12 grid size columns

2
4
3
3
6
6
8
4
12

Nested grids

4
6
6
8
6
4
2

Gap sizes

Column gap XL
Column gap XL
Row gap XL
Column gap L
Column gap L
Row gap L
Column gap M
Column gap M
Row gap M
Column gap S
Column gap S
Row gap S
Column gap XS
Column gap XS
Row gap XS

Column alignment

Center
Center
Left
Left
Right
Right

Forms

Input

Text
Regular
Field label
Error text
Helper text
Success
Field label
Error text
Helper text
Error
Field label
Error text
Helper text
Disabled
Field label
Error text
Helper text

Number (without decimal places)
Regular
Field label
Error text
Helper text
Success
Field label
Error text
Helper text
Error
Field label
Error text
Helper text
Disabled
Field label
Error text
Helper text

Number (with decimal places)
Regular
Field label
Error text
Helper text
Success
Field label
Error text
Helper text
Error
Field label
Error text
Helper text
Disabled
Field label
Error text
Helper text

Phone number
Regular
Field label
Error text
Helper text
Success
Field label
Error text
Helper text
Error
Field label
Error text
Helper text
Disabled
Field label
Error text
Helper text

Email address
Regular
Field label
Error text
Helper text
Success
Field label
Error text
Helper text
Error
Field label
Error text
Helper text
Disabled
Field label
Error text
Helper text

URL
Regular
Field label
Error text
Helper text
Success
Field label
Error text
Helper text
Error
Field label
Error text
Helper text
Disabled
Field label
Error text
Helper text

Prefix
Regular
Field label
$
Error text
Helper text
Success
Field label
$
Error text
Helper text
Error
Field label
$
Error text
Helper text
Disabled
Field label
$
Error text
Helper text

Suffix
Regular
Field label
AUD
Error text
Helper text
Success
Field label
AUD
Error text
Helper text
Error
Field label
AUD
Error text
Helper text
Disabled
Field label
AUD
Error text
Helper text

Date picker

Text
Regular
Field label
Error text
Helper text
Success
Field label
Error text
Helper text
Error
Field label
Error text
Helper text
Disabled
Field label
Error text
Helper text

Time picker

Text
Regular
Field label
Error text
Helper text
Success
Field label
Error text
Helper text
Error
Field label
Error text
Helper text
Disabled
Field label
Error text
Helper text

Textarea


Regular
Field label
Error text
Helper text

Success
Field label
Error text
Helper text

Error
Field label
Error text
Helper text

Disabled
Field label
Error text
Helper text

Select


Regular
Field label
Error text
Helper text

Success
Field label
Error text
Helper text

Error
Field label
Error text
Helper text

Disabled
Field label
Error text
Helper text

Multiselect

Text
Regular
Field label
Error text
Helper text
Success
Field label
Error text
Helper text
Error
Field label
Error text
Helper text
Disabled
Field label
Error text
Helper text
User
Regular
Field label
Error text
Helper text
Success
Field label
Error text
Helper text
Error
Field label
Error text
Helper text
Disabled
Field label
Error text
Helper text

Autocomplete

Text
Regular
Field label
Error text
Helper text
Success
Field label
Error text
Helper text
Error
Field label
Error text
Helper text
Disabled
Field label
Error text
Helper text
User
Regular
Field label
Error text
Helper text
Success
Field label
Error text
Helper text
Error
Field label
Error text
Helper text
Disabled
Field label
Error text
Helper text

Address

Regular
Field label
Error text
Helper text
Success
Field label
Error text
Helper text
Error
Field label
Error text
Helper text
Disabled
Field label
Error text
Helper text

Radio


Regular
Field label
Helper text
Helper text
Helper text
Helper text
Error text

Success
Field label
Helper text
Helper text
Helper text
Helper text
Error text

Error
Field label
Helper text
Helper text
Helper text
Helper text
Error text

Disabled
Field label
Helper text
Helper text
Helper text
Helper text
Error text

Checkbox


Regular
Helper text
Error text

Success
Helper text
Error text

Error
Helper text
Error text

Disabled
Helper text
Error text

Toggle


Regular
Helper text
Error text

Success
Helper text
Error text

Error
Helper text
Error text

Disabled
Helper text
Error text

Breadcrumbs

Tooltips

Modals

Open modal

Lorem ipsum sit dolor amet

Fusce vel tellus placerat, efficitur lorem vitae, aliquam lorem. Nullam ac varius libero. Phasellus imperdiet turpis sed felis scelerisque efficitur. Maecenas neque arcu, ultrices sit amet facilisis vel, porta non nisi. Duis eleifend lorem dolor, vel semper nunc pretium sed. Pellentesque finibus pulvinar ultricies.

Cards

12

Raised in Week 4

Fair to Good

Teaching Mastery

85%

Teaching Mastery

Scrollbars

Pagination

Showing results 1 to 10 of 295

Tables

Double header table
Error text
First header group
Second header group
Third header group
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor neque,...
Missing data
Pill info
Pill success
Pill warning
Pill error
Example JSX
k
k
k
k
k
k
k
k
j
j
j
j
j
j
j
j
i
i
i
i
i
i
i
i
h
h
h
h
h
h
h
h
g
g
g
g
g
g
g
g
f
f
f
f
f
f
f
f
e
e
e
e
e
e
e
e
d
d
d
d
d
d
d
d
c
c
c
c
c
c
c
c
b
b
b
b
b
b
b
b
a
a
a
a
a
a
a
a
Showing 12 results




Single header table
Error text
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor neque,...
Missing data
Pill info
Pill success
Pill warning
Pill error
Example JSX
k
k
k
k
k
k
k
k
j
j
j
j
j
j
j
j
i
i
i
i
i
i
i
i
h
h
h
h
h
h
h
h
g
g
g
g
g
g
g
g
f
f
f
f
f
f
f
f
e
e
e
e
e
e
e
e
d
d
d
d
d
d
d
d
c
c
c
c
c
c
c
c
b
b
b
b
b
b
b
b
a
a
a
a
a
a
a
a
Showing 12 results

Charts

Line chart


Bar chart


Chart wrapper


Chart type
Error text

Teacher averages

44

Teacher - Teaching Mastery

35

Teacher - Practice Fidelity

61

Teacher - Student Mastery

School averages

46

School - Teaching Mastery

36

School - Practice Fidelity

59

School - Student Mastery