The style of an application defines the colors, fonts and iconography that is used. In order to provide a clean appearance, a standardized font and icon set will be used. This allows flexibility while still ensuring familiarity and ease of processing the information on the screens.

Typography

The standard application font is Open Sans. You can view or download Open Sans at Google Fonts. This font is a clean, open source font used on many websites and web-based applications.

Some of the common font applications are listed below:

Heading 1

Used for the highest-level page title.

Example Heading 1

CSS Attributes:
  • 20px (1.25rem)
  • #154570 ($navy)
  • Open Sans Semi-Bold

Heading 2

Used for the secondary page titles.

Example Heading 2

CSS Attributes:
  • 18px (1.125rem)
  • #154570 ($navy)
  • Open Sans Semi-Bold

Heading 3

Used for the tertiary headings.

Example Heading 3

CSS Attributes:
  • 16px (1rem)
  • #154570 ($navy)
  • Open Sans Semi-Bold

Heading 4

Used for additional headings.

Example Heading 4

CSS Attributes:
  • 16px (1rem)
  • #58585B ($charcoal)
  • Open Sans Light

Heading 5

Used for headings beyond 4.

Example Heading 5
CSS Attributes:
  • 16px (1rem)
  • #58585B ($charcoal)
  • Open Sans Regular

Body Text

Used for all standard body text.

Example Body Text

CSS Attributes:
  • 16px (1rem)
  • #58585B ($charcoal)
  • Open Sans Light

Label Text

Used for form field labels.

CSS Attributes:
  • 12px (0.75rem)
  • #58585B ($charcoal)
  • Open Sans Semi-Bold

Link Text

Used for links within body text.

Example Link Text
CSS Attributes:
  • 12px (0.75rem)
  • #58585B ($charcoal)
  • Open Sans Semi-Bold