Design Guide

Below is the current settings for the new OneSolution website design. As of 1/25/23 these are not set in stone - these are simply some of the most common web settings.

Heading H1

font: Roboto, font-weight: Bold, font-size: 36px, font-style: all caps, line-height: 1.4, color: #333333

Heading H1

font: Roboto, font-weight: Bold, font-size: 36px, line-height: 1.4, color: #333333

Heading H1

font: Roboto, font-weight: Normal, font-size: 36px, line-height: 1.4, color: #333333

Heading H1

font: Roboto, font-weight: Light, font-size: 36px, line-height: 1.4, color: #333333

Heading H2

font: Roboto, font-weight: Normal, font-size: 30px, line-height: 1.4, color: #333333

Heading H3

font: Roboto, font-weight: Normal, font-size: 24px, line-height: 1.4, color: #333333

Heading H4

font: Roboto, font-weight: Normal, font-size: 18px, line-height: 1.4, color: #333333

Heading H5

font: Roboto, font-weight: Normal, font-size: 14px, line-height: 1.4, color: #333333

Body Font

font: Roboto, font-weight: Normal, font-size: 14px, line-height: 1.45, color: #808080

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare massa eget egestas purus viverra accumsan. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Eleifend quam adipiscing vitae proin sagittis. Urna porttitor rhoncus dolor purus non enim. Id volutpat lacus laoreet non curabitur gravida arcu ac tortor. Id velit ut tortor pretium viverra suspendisse.

  • Viverra ipsum nunc aliquet bibendum enim facilisis gravida.
  • Mus mauris vitae ultricies leo integer.
  • Suspendisse faucibus interdum posuere lorem ipsum.

Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Lacus viverra vitae congue eu consequat ac felis donec. Sed arcu non odio euismod lacinia at quis. Pulvinar mattis nunc sed blandit libero.

Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Urna et pharetra pharetra massa massa ultricies mi quis hendrerit. Lorem dolor sed viverra ipsum nunc. Facilisis magna etiam tempor orci eu lobortis elementum nibh. At varius vel pharetra vel turpis nunc. Et odio pellentesque diam volutpat commodo sed egestas egestas. Consectetur a erat nam at lectus urna duis convallis. Venenatis lectus magna fringilla urna porttitor.

Body Font

font: Roboto, font-weight: Normal, font-size: 16px, line-height: 1.45, color: #000000

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare massa eget egestas purus viverra accumsan. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Eleifend quam adipiscing vitae proin sagittis. Urna porttitor rhoncus dolor purus non enim. Id volutpat lacus laoreet non curabitur gravida arcu ac tortor. Id velit ut tortor pretium viverra suspendisse.

  • Viverra ipsum nunc aliquet bibendum enim facilisis gravida.
  • Mus mauris vitae ultricies leo integer.
  • Suspendisse faucibus interdum posuere lorem ipsum.

Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Lacus viverra vitae congue eu consequat ac felis donec. Sed arcu non odio euismod lacinia at quis. Pulvinar mattis nunc sed blandit libero.

Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Urna et pharetra pharetra massa massa ultricies mi quis hendrerit. Lorem dolor sed viverra ipsum nunc. Facilisis magna etiam tempor orci eu lobortis elementum nibh. At varius vel pharetra vel turpis nunc. Et odio pellentesque diam volutpat commodo sed egestas egestas. Consectetur a erat nam at lectus urna duis convallis. Venenatis lectus magna fringilla urna porttitor.

This is tab content. Click to edit this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is tab content. Click to edit this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is tab content. Click to edit this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  • Insert a title here

    If you had some description text, this is where it would be placed.

  • Insert title here

    If you had some description text, this is where it would be placed.

Placeholder_1920x500

Can be any height you want but must be 1920px wide or wider.  These are used for hero images at the top of pages and backgrounds for sliders rows.

Placeholder_900x1200

Standard portrait style.

Placeholder_900x900

Used for grids, etc. where image and text alignment need to be precise.

Placeholder_900x600

Standard landscape style. This is the most common image size used.