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.
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.
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.
Standard portrait style.
Used for grids, etc. where image and text alignment need to be precise.
Standard landscape style. This is the most common image size used.