Office of the Chief Technology Officer: Portal Page Specifications
DC Home Mayor DC Guide Residents Business Visitors DC Government Kids

Office of the Chief Technology Officer

OCTO HOME
OCTO HOME
SERVICES
ABOUT OCTO
INFORMATION
SERVICES
ONLINE SERVICE
  REQUESTS

INFORMATION
ONLINE SERVICE
  REQUESTS

About OCTO
How to Reach Us
Ask the CTO
FOIA Requests
News Room
Employment
  Opportunities

Site Map
Performance
CityDW
DC GIS
DC-NET
DC-WARN
ASMP
HSMP
Photo Gallery
Policies, Guidelines, &
  Procedures

DC IT Investment Board
Program Management
  Standards

Web Standards
  and Style

CTO's Biography
Mission & Goals
Organizational Chart

Portal Page Specifications

The DC portal design standards are very exact—there is little room for interpretation. They are, however, updated often to reflect the changing needs of the users.



Home Page Sandbox
There should be two cells within the sandbox:

  • The left cell contains the Services, Information, and agency-specific topics links; this cell should have a fixed width of 310 pixels.
  • The right cell contains the news headline, and should auto span the remaining screen width.
  • The agency logo should be flush right.




Agency Name Title

  • Font Face Verdana
  • Font Size 5
  • Font Color Blue (#001864)
  • Strong (formerly bold)




Agency Name Title Bar (blue fading bar under red navigation bar)

  • Font Face Arial
  • Font Size 3 or 4 (preference is 4)
  • Font Color White (#FFFFFF)
  • Strong (formerly bold)
  • Note: faded area of the title bar may be extended as far as the end of the DC
    Council button to accommodate the agency name.




News Headlines
There should be three headlines.

    News Header
  • Font Size 4
  • Font Face Arial
  • Uppercase
  • Font Color Red (#FF0000)
  • Strong (formerly bold)

    Headlines
  • Font Size 2
  • Font Face Verdana
  • Initial Caps
  • Font Color Blue (#001864)
  • Class Red
  • Strong (formerly bold)

    Subhead (Caption)
  • Font Size 1
  • Font Face Verdana
  • Sentence Case Structure
  • Font Color Black (#000000)

    Full Text Links
  • Font Size 1
  • Font Face Verdana
  • Title Case
  • Font Color Blue (#001864)
  • Class Red
  • Strong (formerly bold)




Title Headers

  • Font Size 4
  • Font Face Arial
  • Font Color Blue (#001864)
  • Class Red
  • Strong (formerly bold)




Sublinks (Bulleted List)

  • Font Size 2
  • Font Face Arial
  • Font Color Blue (#001864)
  • Class Red
Note: these link to specific pages. The Services, Information, and agency-specific topic links must match the links on the navigation bar.




Address Footer
A black horizontal rule size 1 should span 100 percent of the screen.

    Agency Name
  • Font Size 2
  • Font Face Arial
  • Font Color Red (#FF0000)
  • Title Case
  • Strong (formerly bold)




Services and Information Pages

    Page Titles
  • Font Face Arial
  • Font Size 4
  • Font Color Blue (#001864)
  • Strong (formerly bold)

Note: there should be a 10-pixel spacer between the blue agency name title bar and the page title.

    Links
  • Font Face Arial
  • Font Size 2
  • Class Red
Note: all bullets should be circular and solid black.