Design Elements

Design elements are an essential part of the RMCAD brand identity, providing visual cues that communicate our brand personality and values to our audience.

01

Animated Icons

02

Campus Buildings

Campus Building Illustrations Carpenter
Carpenter Building
Campus Building Illustrations Diamond
Diamond Building
dome
dome
Campus Building Illustrations Epic
Epic Building
Campus Building Illustrations Mary Harris
Mary Harris Building
Campus Building Illustrations Neusteter
Neusteter Building
Campus Building Illustrations 2020 Robinson
Robinson Building
Campus Building Illustrations Rotunda
Rotunda Building
Campus Building Illustrations Rude
Rude Building
Campus Building Illustrations Shore
Shore Building
Campus Building Illustrations Spivak
Spivak Building
Campus Building Illustrations Texas
Texas Building
Campus Building Illustrations Triboro
Triboro Building
Campus Building Illustrations Water Tower
Water Tower Building
03

Shape Dividers + Section Spacing

Shape dividers are design elements meant to be used in an online environment. They are used to add visual interest to the page, and bring a branding element with the use of the mountains shape. Below are the specs for each of the three shape dividers used by RMCAD. These specs are for the Elementor page builder used on the RMCAD website.

Mountain Shape

Shape Divider: Pyramid (bottom only):

  • Desktop Height: 165 (default)
  • Tablet Height: 125
  • Mobile Height: 80

These styles must be either copied from a compliant section or implemented manually. Please note, certain section dividers may require more space on certain device sizes.

Desktop/Tablet/Mobile:

  • 5% Padding on top and bottom without section dividers
  • 10% Padding on top or bottom with section dividers
  • 10% Padding on top of section following the hero
Diagonal Shape

Shape Divider: Tilt (top and bottom):

  • Desktop Height: 160 (default)
  • Tablet Height: 80
  • Mobile Height: 40

These styles must be either copied from a compliant section or implemented manually. Please note, certain section dividers may require more space on certain device sizes.

Desktop/Tablet/Mobile:

  • 5% Padding on top and bottom without section dividers
  • 10% Padding on top or bottom with section dividers
  • 10% Padding on top of section following the hero
Triangle Shape

Shape Divider: Triangle Asymmetrical (bottom only):

  • Desktop Height: 160 (default)
  • Tablet Height: 90
  • Mobile Height: 50

These styles must be either copied from a compliant section or implemented manually. Please note, certain section dividers may require more space on certain device sizes.

Desktop/Tablet/Mobile:

  • 5% Padding on top and bottom without section dividers
  • 10% Padding on top or bottom with section dividers
  • 10% Padding on top of section following the hero
04

Buttons

Our standard button consists of an orange rectangle, with slightly rounded corners, and all caps Brandon Text font. The button specs consist of:

  • 16px font size, uppercase
  • 4px border radius
  • 15px padding for top and bottom
  • 30px padding for left and right

Our secondary button should be a white box with slightly rounded corners with orange text placed on a darker background, all caps Brandon Text font. Use the secondary button when the background is orange, or when you have two buttons side-by-side and you need to give hierarchy to the buttons.

This is an example of when you need to use the white button. The background is orange, so an orange button would not work.

Here’s another example: a 2 button call-to-action with different levels of importance. Use the orange button for the more important message. 

05

Sample Layout

Spread the love

School is more fun with a friend.
Refer a friend to RMCAD.