Search
Close this search box.

Style Guide

This is the Style Guide for the WordPress website(s): Corporate and user portal.

It is meant to represent the styles, patterns, practices, and principles of the RAIC Brand and how apply them on the new website.

Colour Schemes

System Colours

Text

Mainly used for paragraphs, or body of text. 

HEX: #000000

Primary

White

HEX: #FFFFF

Secondary

Dark Grey

HEX: #333A42

Accent

Orange

HEX: #F04D37

Custom Colours

Official Brand Colour Palette

Magenta

HEX: #B72467

Green

HEX: #32B561

Orange

HEX: #F04D37

Blue

HEX: #008DCD

Lime Green

HEX: #A7C539

Turquoise

HEX: #52C6D8

Semantic Colours

Success

HEX: #32b561

Error

HEX: #f00000

Warning

HEX: #ffcc00

Information

HEX: #008DCD

Typography

Global Fonts

1. Primary Typeface: Roboto Regular

Light

Light Italic

Regular

Regular Italic

Medium

Medium Italic

Bold

Bold Italic

Black

Black Italic

2. Other typeface: Roboto Condensed Regular

Light

Light Italic

Regular

Regular Italic

Bold

Bold Italic

3. Fallback typeface: Open Sans

Headings

H1: Roboto Black 40px

H2: Roboto Black 32px

H3: Roboto Black 28px

H4: Roboto Black 24px

H5: Roboto Black 20px
H6 Roboto Black 16px

Display Headings

Display stylings for headings to make a them stand out.

Display H1: Roboto Black 64px

Display H2: Roboto Black 56px

Display H3: Roboto Black 48px

Display H4: Roboto Black 40px

Display H5: Roboto Black 32px
Display H6: Roboto Black 24px

Text Styles

Base text - Roboto Regular 16px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Congue quisque egestas diam in arcu cursus euismod quis viverra. Libero volutpat sed cras ornare.

Small text - Roboto Regular 14px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Congue quisque egestas diam in arcu cursus euismod quis viverra. Libero volutpat sed cras ornare.

Extra Small Text - Roboto Regular 12px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Congue quisque egestas diam in arcu cursus euismod quis viverra. Libero volutpat sed cras ornare.

Lead Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Congue quisque egestas diam in arcu cursus euismod quis viverra. Libero volutpat sed cras ornare.

Text Link(s)

Link with Icon

List Styles

Bullet List

Ordered (numbered) List

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  1. A
  2. B
  3. C
  4. D
  5. E
  6. F
  7. G

Forms

 
 
 
 
 
 
This site is registered on wpml.org as a development site. Switch to a production site key to remove this banner.