This section goes over the look and feel.


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


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


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  


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.


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;

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='//'
rel='stylesheet' type='text/css'>
<!--[if gt IE 7]>
<style type="text/css">
한국어 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    


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.

File Naming Conventions

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


Correct Incorrect
  • 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


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
  1. List Item 1
  2. List Item 2
  3. List Item 3
  • List Item 1
  • List Item 2
  • List Item 3
  1. List Item 1
  2. List Item 2
  3. List Item 3
  1. Certify Escrow Company
  2. Certify Escrow Company
  3. Certify Escrow Company
  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