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

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

Heading 1 link

Heading 2 link

Heading 3 link

Heading 4 link

Text large link

Text medium link

Text small link

Text extra small link

Arrow buttons

Heading 1

Arrow left

Arrow right

Heading 2

Arrow right

Heading 3

Arrow right

Heading 4

Expand collapse buttons

Heading 1

Heading 2

Heading 3

Heading 4

Text large

Text medium

Text small

Text extra small

Buttons

Large

Text only

Icon and text

Icon only

Medium

Text only

Icon and text

Icon only

Small

Text only

Icon and text

Icon only

Extra small

Text only

Icon and text

Icon only

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

ipsum dolor

sit amet, consectetur adipiscing elit.

Success notice. Lorem

ipsum dolor

sit amet, consectetur adipiscing elit.

Warning notice. Lorem

ipsum dolor

sit amet, consectetur adipiscing elit.

Error notice. Lorem

ipsum dolor

sit amet, consectetur adipiscing elit.

Icons

Please note -

All icons from the

Huge Icons

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

12 grid size columns

Nested grids

Gap sizes

Column gap XL

Row gap XL

Column gap L

Row gap L

Column gap M

Row gap M

Column gap S

Row gap S

Column gap XS

Row gap XS

Column alignment

Center

Left

Right

Breadcrumbs

First breadcrumb

Second breadcrumb

Third breadcrumb

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.

Cancel

Confirm

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

Swap to list view

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,... read more	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

Swap to list view

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,... read more	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

GGSA Design System

Colours

Main colours

Neutral colours

Background colours

Chart colours

Border radius

Shadows

Typography

Heading 1 - the quick brownfox jumps over the lazy dog

Heading 2 - the quick brownfox jumps over the lazy dog

Heading 3 - the quick brownfox jumps over the lazy dog

Heading 4 - the quick brownfox jumps over the lazy dog

Lists

Unordered list

Heading 1Heading 1

Heading 2Heading 2

Heading 3Heading 3

Heading 4Heading 4

Ordered list

Heading 1Heading 1

Heading 2Heading 2

Heading 3Heading 3

Heading 4Heading 4

Links

Heading 1 link

Heading 2 link

Heading 3 link

Heading 4 link

Arrow buttons

Heading 1

Arrow left

Arrow right

Heading 2

Arrow left

Arrow right

Heading 3

Arrow left

Arrow right

Heading 4

Arrow left

Arrow right

Text large

Text medium

Text small

Text extra small

Expand collapse buttons

Heading 1

Show more

Show less

Heading 2

Show more

Show less

Heading 3

Show more

Show less

Heading 4

Show more

Show less

Text large

Text medium

Text small

Text extra small

Buttons

Large

Medium

Small

Extra small

Pills

Large

Medium

Small

Extra small

Notices

Icons

Extra large

Large

Medium

Small

Extra small

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

Heading 1
Heading 1

Heading 2
Heading 2

Heading 3
Heading 3

Heading 4
Heading 4

Heading 1
Heading 1

Heading 2
Heading 2

Heading 3
Heading 3

Heading 4
Heading 4