This section goes over the look and feel.

Colors

We use a system to ensure consistency across websites. It consists of 3 base colors. Each base color has two variations. These variations are designed to offer flexibility while ensuring a consistent, visually pleasing, and accessible look.

With respect to accessibility, choose colors in alignment with Web Content Accessibility Guideline (WCAG) 2.2 Level AA. It requires a contrast ratio of at least:

  • 4.5:1 for normal text
  • 3:1 for large text
  • 3:1 for graphics and user interface components

Primary

The colors shown as 100% opacity are used for major sections of the layout such as main background and link colors.

Color Name 100% 50% (W) 25% (W) 10% (W) 5% (W)
Orange #fbad23 #fdd691 #feeac8 #fff7e9 #fffbf4
Blue #006599 #80b2cc #bfd8e5 #e5eff5 #f2f7fa
Dark Blue #003466 #809ab3 #bfccd9 #e5eaef #f2f5f7

Secondary

The colors shown as 100% opacity are used as border colors and secondary-background colors.

Color Name 100% 50% (W) 25% (W) 10% (W) 5% (W)
Lightest Blue #eef3f7 #f7f9fb #fbfcfd #fdfefe #fefeff
Light Blue #e0edf6 #f0f6fb #f7fafd #fcfdfe #fdfeff
Blue #a6c6df #d3e3ef #e9f1f7 #f6f9fc #fafcfd

Supplementary Colors

The colors shown as 100% opacity are used for items such as error messages, success boxes and highlighting active input fields.

Color Name 100% 50% 25% 10%
Red #981B1f #cc8d8f #e5c6c7 #f5e9e9
Green #026430 #81b298 #c0d8cb #e6f0eb
Yellow #FDECB2  
Back to Top

Typography

Font sizing and selection are at the discretion of the agency. They are dictated by the template and resizing font sizes are not necessary. The template uses Arial, a clean, neutral typeface for interfaces, text, and headings.

The base font size is 18px. Variable font sizes are used to improve readability on larger screens.

The line height is a ratio of 1.75 to the base font size. For each ascending level, the ratio is decreased by ⅛. As a result, larger headings have smaller line-height ratios which improves readability. Please ensure your typeface and sizes conforms to template standards which ensures they are easily readable and adheres to all Section 508 requirements.

Headers

Header 1 / 2em, margin:0;

 

Header 2 / 1.5em, margin:0;

 

Header 3 / 1.17em, margin:0;

 

Header 4 / 1em, margin:0;

 
Header 5 / 0.83em, margin: 1.67em 0;
 
Header 6 / 0.67em, margin: 2.33em 0;

Header 1 Link

 

Header 2 Link

 

Header 3 Link

 

Header 4 Link

 
Header 5 Link
 
Header 6 Link

Foreign Languages

  • Hindi and Khmer text rely on specific fonts.
  • Khmer's font links from Google Fonts.
  • Text in Thai need a class to enlarge the characters for readability.
  • English text within a foreign language need a class to overwrite the user's system default font. This maintains readability and consistency.
Language Font Language Code/Tag Class Additional Markup Requirements
中文 Chinese   zh-CN    
English   en-US txtEnglish  
हिन्दी Hindi Mangal hi-IN txtHindi  
日本語 Japanese   ja-JP    
ខ្មែរ Khmer Battambang km-KH txtKhmer

Required within the head tag:


<link href='//fonts.googleapis.com/css?family=Battambang'
rel='stylesheet' type='text/css'>
<!--[if gt IE 7]>
<style type="text/css">
.txtKhmer{font-size:110%}
</style>
<![endif]-->
한국어 Korean   ko-KR    
Español Spanish (Spain)   es-ES    
Español Spanish (Mexico)   es-MX    
Tagalog   tl-PH    
ภาษาไทย Thai   th-TH txtThai  
Tiếng Việt Vietnamese   vi-VN    
Back to Top

Images

We use photos and illustrations for visualizing information. We follow these guidelines:

  • Do not use images as unnecessary decoration.
  • Use an aspect ratio of 3:2 for all images. The exception is if the proportions of the subject of the image have significance. For example, an image of a driver’s license or an image of an application form.
  • Use alt text whenever adding images. Alt text makes websites more accessible and helps with search engine optimization.
  • Source licensed images from Shutterstock only.
Back to Top

File Naming Conventions

  • All lower-case.
  • Dashes as a word separator.
  • No spaces.

Examples

Correct Incorrect
this-is-a-cms-manual.pdf
  • ThisIsACMSManual.pdf
  • this_is_a_cms_manual.pdf
  • this%20is%20a%20cms%20manual.pdf
  • this-is-a-cms_manual.pdf
  • this is a cms manual.pdf
Back to Top

Lists

List Style Class
  • List Item 1
  • List Item 2
  • List Item 3
 (no class applied)
  1. List Item 1
  2. List Item 2
  3. List Item 3
 alphaLwr
  1. List Item 1
  2. List Item 2
  3. List Item 3
 alphaUppr
  • List Item 1
  • List Item 2
  • List Item 3
 blts
  1. List Item 1
  2. List Item 2
  3. List Item 3
 numPrnthsis
  1. Certify Escrow Company
  2. Certify Escrow Company
  3. Certify Escrow Company
 romanLwr
  1. Certify Escrow Company
    • List Item 1
    • List Item 2
    • List Item 3
  2. Approve Escrow Facility
    • List Item 1
    • List Item 2
    • List Item 3
 tblOfCont
Back to Top