O3 Labs Style Guide

This Style Guide is living document of the elements and components that make up O3 Labs projects. Use it to enhance communication between team members and to assist with visual consistency and code maintainability.

CSS and JS updates are automatically added here when changes are made. HTML additions or updates will need to be added to the corresponding section manually.

Color Palette

Primary Colors

  • Brand Red
    #E00000

  • Medium Red
    #CC0000

  • Dark Red
    #990000

  • Medium Gray
    #666666

  • Dark Gray
    #1D1D1D

Supporting Colors

  • Gray F1
    #F1F1F1

  • Gray E1
    #E1E1E1

  • Gray C7
    #C7C7C7

  • Gray
    #999999

  • Light Blue
    #03B1EB

  • Medium Blue
    #0099CC

  • Dark Blue
    #037196

Typography

Headers

h1

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

h2

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

h3

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

h4

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Content Elements

Paragraph

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, strong text in a paragraph. Duis nulla tellus, cursus quis diam eget, facilisis consequat leo. Morbi rutrum odio ac risus gravida pellentesque eget nec dolor. Quisque sit amet mollis enim. Nullam aliquet vitae orci vitae feugiat. Proin eu euismod risus, vel pellentesque magna.

Vivamus cursus turpis dui, emphasized text in a paragraph. Vestibulum nec porta magna. Morbi quam lorem, sollicitudin bibendum auctor et, rutrum eu sem. Nulla rutrum urna eu justo finibus tincidunt. Donec vehicula diam eget tempus eleifend. Aenean sodales sit amet lorem nec lacinia. Sed ultrices placerat est. Suspendisse vitae orci sollicitudin, linked text in a paragraph, molestie est. Curabitur viverra tincidunt vestibulum. Vivamus consectetur nulla tortor, ultricies commodo nulla semper vel.

Ordered List

  1. The quick brown fox jumps over the lazy dog
  2. Quisque at mi a nunc ornare tincidunt a non diam
    • The quick brown fox jumps over the lazy dog
    • In accumsan ut sapien nec porttitor
    • Quisque vitae libero quis ipsum dignissim efficitur
  3. Morbi sed dapibus nulla

Unordered List

  • The quick brown fox jumps over the lazy dog
  • Quisque at mi a nunc ornare tincidunt a non diam
    • The quick brown fox jumps over the lazy dog
    • In accumsan ut sapien nec porttitor
    • Quisque vitae libero quis ipsum dignissim efficitur
  • Morbi sed dapibus nulla
  1. The quick brown fox jumps over the lazy dog
  2. Quisque at mi a nunc ornare tincidunt a non diam
  3. Morbi sed dapibus nulla

Buttons

Forms

Inputs

Textarea

Checkboxes and Radios

Sample Form

Example block-level help text here.

Pop-Up Form

Title for a Pop-Up Form

Pop-Up Form Response

Thank You!

Sample text to confirm submission of a form!

Tables

The site includes a script that transforms tables into vertically aligned blocks for optimal viewing on small screens. The script uses <th> tags to provide lables for each table block. Table headings must be present on all tables. Note that <data-th> attributes are inserted dynamically and should not be included in base markup.

Column Title Column Title Column Title Column Title Column Title
Table Cell Item Table Cell Item Table Cell Item Table Cell Item Table Cell Item
Table Cell Item Table Cell Item Table Cell Item Table Cell Item Table Cell Item
Table Cell Item Table Cell Item Table Cell Item Table Cell Item Table Cell Item
Table Cell Item Table Cell Item Table Cell Item Table Cell Item Table Cell Item

Accordions

Sample Item 1
This is sample copy to describe a subject in a table. This copy that is intended for placement purposes only. This is sample copy to describe a subject in a table. This copy that is intended for placement purposes only. This is sample copy to describe a subject in a table. This copy that is intended for placement purposes only. This is sample copy to describe a subject in a table. This copy that is intended for placement purposes only.
Sample Item 2
Sample Item 3

Contents