UH-GAF
/
Style Guide

Style Guide

Basic design system for site-wide styling.

Select Option

Typeface

Helvetica now display
Helvetica now display /  Font weights
Normal  /  400
Aa
Medium  /  500
Aa
Semi-Bold /  600
Aa
Bold  /  700
Aa
Extra Bold /  800
Aa
Black /  700
Aa
Helvetica now display /  Font Charachters
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b b d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! ?

Color Palettes

Card
is-purple
Purple
Card
is-purple02
Light Purple
Card
is-purple03
Dark Purple
Card
is-blue
Blue
Card
is-Blue02
Baby Blue
Card
is-green
Teal
Card
is-green02
Light Green
Card
is-grey
Grey
Card
is-black
Black

Headings

Typescale
Typescale /  1.250 Major Third
Heading Settings - H1
Size: 61.04px
No class added

Heading 1

Heading Settings - H2
Size: 48.83px
No class added

Heading 2

Heading Settings - H3
Size: 39.06px
No class added

Heading 3

Heading Settings - H4
Size: 31.25px
No class added

Heading 4

Heading Settings - H5
Size: 25px
No class added
Heading 5
Heading Settings - H6
Size: 20px
No class added
Heading 6
All heading setting - Purple Heading
heading
is-purple

Heading

All heading setting - White Heading
Heading
is-white

Heading

Titles

X Large Titles
Size: 90px
Title
Title XL
Large Titles
Size: 50px
Title
is-large
Title L
Medium Titles
Size: 30px
Title
is-medium
Title M
Small Titles
Size: 25px
Title
is-small
Title S
X Small Titles
Size: 20px
Title
is-xsmall
Title XS
All Titles - Purple Heading
heading
is-medium
is-purple
Display XS
All titles - White Heading
Heading
is-large
is-white
Display XS
All Titles - Uppercase
heading
is-medium
is-uppercase
Display XS
All Titles - Increase Weight
heading
is-large
is-black
Display XS

text blocks

Badges
Badge
is-white
is-grey
is-purple
is-purple02
is-purple03
is-green
is-green02
is-blue
is-blue02
Text
Text
is-xSmall
Size: 14px
© Copyright uh-gaf
Text
is-Small
Size: 16px
© Copyright uh-gaf
Text
is-medium
Size: 18px
© Copyright uh-gaf
Text
is-Large
Size: 14px
© Copyright uh-gaf
Text
is-xlarge
Size: 22px
© Copyright uh-gaf
Text
is-small
is-bold
you can add is-bold as a combo class to change weight
© Copyright uh-gaf
Text
is-medium
is-purple
you can add is-purple or is- white as combo class to change color
© Copyright uh-gaf
Text
is-xlarge
is-uppercase
you can add is-uppercase as combo class to change capitalization
© Copyright uh-gaf

Paragraphs

Paragraph
Size: 16px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph
is-medium
Size: 20px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph
is-Large
Size: 30px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph
is-xlarge
Size: 38px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph
is-medium
is-white
you can add is-white as a combo class to change color

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

rich text

Table
Rich-table
  • Ordered List Item
  • Ordered List Item
  • Ordered List Item
Rich text black
Rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Rich text white
Rich-text-white

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Buttons

Primary Button
Button
Learn more
right-arrow-icon
Secondary Button
Button
is-purple
Learn more
Third Button
Button
is-white
Learn more
right-arrow-icon

Links

Primary Link
Link
Learn more
Secondary Link
Link
is-purple
Learn more
right-arrow-icon
Third Link
Link
is-white
Learn more
right-arrow-icon

Icons

Icons  /  Interface  /  Black
Icons  /  Social  /  Black
Icons  /  Interface  /  White
right-arrow-iconLeft-arrow-icon
Icons  /  Social  /  White
Icons  /  Interface /  Purple
Icons  /  Social  /  Purple

Logos

Purple
Purple-03
Green
Blue
White
Black
Green 02
Blue 02

UI Layout

Spacing
Space
Space
16 px
Space
is-small
32 px
Space
is-medium
48 px
Space
is-large
64 px
Space
is-xlarge
80 px
Hero Section
Image-wrapper
is-(your-custom-name) Custom style

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more
right-arrow-icon
Learn more
Grid section
Grid

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more
right-arrow-icon
Learn more
Grid section
Grid
is-3cards
Image Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse

Learn more
Image Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse

Learn more
Image Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse

Learn more
Icon Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse

Learn more
Icon Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse

Learn more
Icon Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse

Learn more
Accordion
Accordion item
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Components

Open Day Registration
Open Day Registration
Attend an open day to see the campus for yourself

Not only are there a wide range of subject talks and campus activities, but an open day is a perfect opportunity to start to see yourself as a student in UH-GAF and to get a feel for the city and surrounding environment.

Register for an open day
right-arrow-icon