IDEA UI

Grid

IDEAfit.com is built with BeaverBuilder using the Bootstrap 4 framework. The grid is 12 column, and is 1100px with a gutter on 40px (20x2).

More info...

Breakpoints:
Small devices: 576px +
Medium devices: 768px +
Large devices: 1020px +

Color Pallete

#13406D
#1F5285
#2773C1
#31C1D8
#F26B4F
#E64944

#333333
#666666
#cccccc
#f4f4f4

Typography

Fonts

Roboto

Roboto Bold

Roboto is our main heading and title font

Raleway Bold

Raleway is used for hero Headlines/titles.

Headings

Desktop

H1 Heading - 42px

H2 Heading - 32px

H3 Heading - 26px

H4 Heading - 22px

H5 Heading - 20px

H6 Heading - 18px

Tablet

H1 Heading - 36px

H2 Heading - 30px

H3 Heading - 24px

H4 Heading - 22px

H5 Heading - 18px

H6 Heading - 16px

Mobile

H1 Heading - 30px

H2 Heading - 26px

H3 Heading - 22px

H4 Heading - 20px

H5 Heading - 18px

H6 Heading - 16px

Paragraph text

Body text:
Small devices: 15px
Medium devices: 16px
Large devices: 16px

Body text is Roboto font display at 16px for desktop, 16px for tablet, and 15px on mobile devices, with a line-height of 1.64em.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum placerat arcu. Morbi rutrum vel augue nec dictum. Phasellus tortor urna, auctor quis nulla at, sagittis fermentum neque. Morbi finibus ante finibus, efficitur quam ac, tempus eros. Aenean scelerisque pretium nibh, a auctor augue rutrum eu. In vel tempus lectus.