Styleguide

HTML Markup and CSS Style


Basics

Below are the global design choices that are reflected on each page of fpwealth.com. These include color, typefaces and font sizes. Beyond these global styles are the HTML element styles. Each pane below contains a logical grouping of HTML elemements and their respective styles.

Color

Typefaces

  • Open Sans
  • Open Sans Light

Font Sizes

These exclude heading sizes

  • Normal Size
  • Large Size
  • Larger Size

Buttons

Context

Box Sizes

(width only below)

Font Sizes

Styles

Combinations

Silent Outline

Icons

Forms

Login
  • Must be 8 or more characters
Profile
  • First
    Last
  • Extensions are optional
  • Extensions are optional
  • Interests
Address
  • Street Address
  • Address Line 2 (optional)
  • Use 5-digit zip code (US customers)

Gravity Forms

Form created with Gravity Forms plugin

  • Strength indicator
  • Add a new row
  • :

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Heading Level 1

Subheading for H1s

Heading Level 2

Subheading for H2s

Heading Level 3

Subheading for H3s

H3 as H1

Subheading for H1s

H2 as H3

Subheading for H3s

H1 as H2

Subheading for H2s

Lists

Unordered List

  • List item
  • List item
  • List item

Ordered Lists

  1. List item
  2. List item
  3. List item

Number List

  • List item
  • List item
  • List item
  • List item

  • List item

  • List item

  • List item

  • List item

  • List item

Tables

Standard Table

First Name Last Name Occupation
John Doe Designer
Jane Doe Developer
Jim Doe Administrator

Striped Table

Hover over table row to see additional effect

First Name Last Name Occupation
John Doe Designer
Jane Doe Developer
Jim Doe Administrator

Bare Table

First Name Last Name Occupation
John Doe Designer
Jane Doe Developer
Jim Doe Administrator

Fixed Table

First Name Last Name Occupation
John Doe Designer
Jane Doe Developer
Jim Doe Administrator