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
- Good design is innovative
- Good design makes a product/service useful
- Good design is aesthetically pleasing
- Good design makes a product understandable
- Good design is unobtrusive
- Good design is honest
- Good design is long-lasting
- Good design is thorough down to the last detail
- 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.
#EF4638
Branding & Accents
#F7F6F5
Containers
#F1F1F1
Container Borders
#001E38
Dark Backgrounds
#FFFFFF
Backgrounds
#000000
Text
#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.
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700" rel="stylesheet">
Headings
OG&E Design System
OG&E Design System
OG&E Design System
OG&E Design System
OG&E Design System
OG&E Design System
Display titles
OG&E Design System
OG&E Design System
OG&E Design System
OG&E Design System
Specialized titles
OG&E Design System
OG&E Design System
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
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
At OG&E, we’ve always been one step ahead.
At OG&E, we’ve always been one step ahead.
At OG&E, we’ve always been one step ahead.
At OG&E, we’ve always been one step ahead.
At OG&E, we’ve always been one step ahead.
At OG&E, we’ve always been one step ahead.
Images




Grid System
12 Column Layout
* Borders and margins have been added for better visualization. These will not appear in the foundation.
Inputs
Menu
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
Success! This is a success alert—check it out!
Info! This is an info alert—check it out!
Warning! This is a warning alert—check it out!
Danger! This is an error alert—check it out!
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
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
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
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.
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.
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
Pagination
Navigation Pills
Labels
Primary Success Danger Warning InfoForm 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
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
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
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.