OG&E Logo

OG&E Design System for JQuery Mobile

Design Principles


1. What are design principles?

Design Principles are a set of considerations that form the basis of any good design or product.

2. Why use them?

Design Principles help teams with decision making. A few simple principles or constructive questions will guide your team towards making appropriate decisions.

3. Who uses them?

Organizations, individuals and product teams have benefited from writing and following their principles.

4. Purpose

The purpose of having design principles is to align people around what really matters.

We all have a shared sense of what’s important and true to us. Principles move us away from superficial things like what “feels right” and what “looks good” and gives purpose in the things we create.

5. Dieter Rams: Principles for Good Design

  1. Good design is innovative
  2. Good design makes a product/service useful
  3. Good design is aesthetically pleasing
  4. Good design makes a product understandable
  5. Good design is unobtrusive
  6. Good design is honest
  7. Good design is long-lasting
  8. Good design is thorough down to the last detail
  9. Good design is as little design as possible

6. Accessibility

Accessibility is more than "anti-disability". Someone holding a baby is no different than someone with one arm. Someone struggling with glare from the sun is the same as someone with low/poor vision. Someone distracted by traffic is similar to someone with severe ADHD.

After years of meeting with accessibility experts, Chris Feix revised his 1999 UX "Chart of Awesomeness". It all starts with accessibility, because if everyone can't use it, what's the purpose?

Colors

The following color palette came directly from OG&E Design System and passes Adobe's accessibility testing.

OG&E Red
#EF4638
Branding & Accents
Smoke
#F7F6F5
Containers
Seashell
#F1F1F1
Container Borders
Midnight
#001E38
Dark Backgrounds
White
#FFFFFF
Backgrounds
Black
#000000
Text
Cobalt
#0058C5
Links & CTAs

Typography

Font

Poppins is a free-use Google font and works well in print and digital. It is very light weight and loads quickly on the web. This version contains the complete 897 character set, which includes the standard ISO Latin 1, Latin CE, Greek and Cyrillic character sets. Poppins was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.

Poppins Embed Code

<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700" rel="stylesheet">

Headings

Heading 1

OG&E Design System

Heading 2

OG&E Design System

Heading 3

OG&E Design System

Heading 4

OG&E Design System

Heading 5
OG&E Design System
Heading 6
OG&E Design System

Display titles

Display 1

OG&E Design System

Display 2

OG&E Design System

Display 3

OG&E Design System

Display 4

OG&E Design System

Specialized titles

Heading

OG&E Design System

Heading title

OG&E Design System

Heading section

Header with small subtitle

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.

Paragraphs

Paragraph

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.

Lead text

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Muted text

At OG&E, we’ve always been one step ahead.

Primary text

At OG&E, we’ve always been one step ahead.

Info text

At OG&E, we’ve always been one step ahead.

Success text

At OG&E, we’ve always been one step ahead.

Warning text

At OG&E, we’ve always been one step ahead.

Danger text

At OG&E, we’ve always been one step ahead.

Images

Image Rounded image
Circle Image Circle image
Raised Raised image
Circle Raised Raised circle image




Grid System

12 Column Layout

col-12
col-6
col-6
col-4
col-4
col-4
col-3
col-3
col-3
col-3
col-5
col-7
col-2
col-10
col-1
col-11

* Borders and margins have been added for better visualization. These will not appear in the foundation.

Basic Elements

Buttons

Pick your size
Pick your color
Outline
Links
Default Primary Info Success Warning Danger

Inputs

Form controls
Form controls (alternative)
Checkboxes
Radios
Toggle buttons
Sliders

Navbars

Tabs

With icons

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.

Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.

With text

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.

Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.

Progress bars

Task running...
25%
Task completed
100%

Pagination

Navigation Pills

Labels

Primary Success Danger Warning Info

Alerts

Form Rules

When creating forms there are several basic rules to follow for accessibility and consistency. Please do your best to follow these rules whenever possible.

Sections

  1. Labels
  2. Button Types
  3. Button Placement

Labels

Placeholder Text should be avoided. Labels should be outside and on top of the input field. Helper Text should be placed below the input field.

Example

Password must contain at least one lowercase, one uppercase, one number and one special character. Password must also be at least 6 characters long.

Button Types

There are several types of buttons for forms:

  • Submit
    Submit is any button (Send, Apply, Submit, Login) that is the final step of a form. Submit buttons are blue (class="btn btn-primary").
  • Next
    Next is any button (Next, Verify, Step 2) that leads to another step of a form. Next is often used in wizards. Next buttons are green (class="btn btn-success").
  • Default
    Default is used for many actions. The most popular Default buttons are: Cancel, Upload, Advanced, and Settings. Default buttons are grey (class="btn btn-default").
  • Link
    Link is any button (Forgot password, Create account, Not my account) that is not a core function of a form. Link buttons are not styled (class="btn").

Examples

Submit Buttons

Next Buttons

Default Buttons

Link Buttons

Create an account. I forgot my Password Not John Smith???



Button Placement

Button Placement is based on the button type:

  • Submit
    Submit is on the right (class="pull-right").
  • Next
    Next is on the FARTHEST right (class="pull-right") If there is a Submit and a Next button on the same form, Next will be farthest right.
  • Default
    Default is on the left.
  • Link
    Link is usually under the main button row.

Example 1

Password must contain at least one lowercase, one uppercase, one number and one special character. Password must also be at least 6 characters long.



Create an account. I forgot my Password

Example 2

This is what your bio will say in the author box.