Website Under Construction! Stay Tuned!

ARVP Design System

Colors

This color palette was generated from a base color of #315b9d using https://palx.jxnblk.com/

Blues

Very Light Blue
#e9eef5
Light Blue
#dae1ed
Medium Blue
#89a1c7
Hover Text
#315b9d
Dark Blue
#223f6c

Greys

Hover Background
#ecedef
Shadow Grey
#9aa0aa
Sub Menu Items
#636d7c
Top Menu
#53565a
Dark Grey
#39404a

Gradients

Cool looking can be found here: https://uigradients.com/

Spacing

8px
16px
32px
64px

Use 8px increments for padding and margins for better scaling on retina displays.

  • 8px - elements closely related
  • 16px - elements related but not closely
  • 32px - elements not related
  • 64px - elements that should not be close together

Typography

Use https://fontpair.co/ to find a pair of heading and body fonts that go well together. These two fonts are used by the Perth theme.

H1 - 42px

H2 - 36px

H3 - 30px

H4 - 24px

H5 - 20px
H6 - 18px
Body - 16px

Heading Font - Open Sans, color #39404a, weight 700, line height 1.6

Body Font - Roboto, color #404040, weight 400, line height 1.6

Class Styling

Advanced multi-layer shadows can be generated at https://brumm.af/shadows and then the custom CSS can be copied over.
.post-tile
Simple box shadow
White background
32px padding
16px border
width: 100%
.light-shadow
Complex 5 layer shadow
Global Colors - Dark Grey
text-shadow: 2px 2px 15px #ecedef

Parallax Backgrounds

The following classes will fix a background to the screen to add a parallax effect. Custom Javascript has been added to the main template to achieve a scrolling effect and to allow backgrounds to function properly on mobile. The script prevents the background from changing size or jumping around when the url bar hides or shows as a user scrolls up and down on mobile.

.parallaxBg-10

  • background-size: cover
  • background-repeat: no-repeat
  • background-attachment: fixed
  • Scrolls at 10% of user scroll through javascript

.parallaxBg-Bottom

  • background-size: cover
  • background-repeat: no-repeat
  • background-attachment: fixed
  • Bottom of image aligned with bottom of window through javascript

Animations On Scroll

.fade-right

  • fade-right
  • 1000 ms
  • ease
  • Animate only once

.fade-left

  • fade-left
  • 1000 ms
  • ease
  • Animate only once

.flip-right

  • flip-right
  • 1000 ms
  • ease
  • Animate only once

.flip-left

  • flip-left
  • 1000 ms
  • ease
  • Animate only once
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram