CSS3/HTML5 scaffolding style guide

This page contains the style guide for your application: the colors, typography, and common widget styles. The guide's structure and organization borrows heavily from the Twitter bootstrap.

Colors

The color palette for the application and a description of each color's usage.

Name   Hex code Usage/notes
Eggplant purple   #4a1a2b Visited link
Teal   #207861 Subheading
Leaf green   #9fad00 Success feedback
Bright yellow   #ffcc00 Warning feedback
Orange   #ff8400 Buttons
Blue   #1673a1 Link
Red   #e53b19 Error feedback
Charcoal   #444444 Body text
Grey   #808080 Secondary text
Silver   #c0c0c0 Disabled text, disabled buttons
Greyish white   #f0f0f0 Accent background

Typography

Headings and copy

Styles for textual content: headings, paragraphs, lists, etc.

Heading 1

Heading 2

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie, erat quis posuere vestibulum, ipsum erat hendrerit enim, id hendrerit eros orci quis augue. Maecenas vehicula molestie lectus. Aliquam a nisi tellus. Suspendisse pharetra pharetra mauris, vel accumsan orci consectetur non.

Curabitur at urna mauris. Donec varius, est sit amet vulputate tristique, orci lectus pulvinar libero, vel venenatis ligula est at arcu. Sed in dui vitae mauris ultrices iaculis.

Curabitur bibendum eros sit amet elit lacinia imperdiet. Sed venenatis dictum interdum. Praesent sit amet vehicula ligula. Aliquam erat volutpat. Suspendisse velit dolor, ullamcorper at gravida at, congue tincidunt mi.

Ordered list

  1. Suspendisse potenti.
  2. Maecenas vestibulum
    1. Aliquam ante libero,
    2. pretium ac cursus malesuada
  3. auctor a leo

Unordered list

  • Suspendisse potenti.
  • Maecenas vestibulum
    • Aliquam ante libero,
    • pretium ac cursus malesuada
  • auctor a leo

Definition list

Maecenas vestibulum
Nisl non ligula mattis gravida. Nulla id ipsum ante.
Ut tempus mi
Sed molestie tincidunt ornare.

Tables

Check out the source for our recommendation on marking up tables in a readable, semantic manner.
Your order placed on 09/02/2011
Item Quantity Price
Total $47.02
Widget 1 $15.02
Thingamabob 5 $3.00
Whatchamacallit 2 $8.50

Forms

Forms in tables

We commonly use tables to lay out forms with left- or right-aligned labels. This is the recommended method for desktop applications.

Note how destructive actions like deletion are marked with a class of "destructive" and highlighted visually.

  Cancel
  Form section heading

Field help text

inline help text
  • Please enter an email address

Stacked forms

Top-aligned form labels tend to reduce form-completion times the most and are best used when the data being requested is well-known to the user and requires minimum thought. Top-aligned labels should also be used for mobile applications.

Form section heading

Field help text

inline help text
  • Please enter an email address

Pagination

Pagination styles should ensure that individual links are well spaced and large enough to be suitable touch targets.

Alerts

Styles for alerts and messages. The icons are provided by famfamfam.

  • Your profile was successfully saved.
  • You have only 5MB of remaining free space.
  • Please correct the errors below.