DC.Gov Portal - Default Styles

Example page that uses these styles is the Government Resource Center landing page

Breakpoints

DC.Gov is designed for the following breakpoints.

Global styles

DC.Gov is designed using the following global fonts, text sizes and colors.

Desktop heading styles and colors

h1 styles
color: #20394F
320-Mobile: 22px
740-Tablet: 30px
980-Desktop: 30px
1024-Desktop: 36px
h2 styles
color: #20394F
320-Mobile: 18px
740-Tablet: 20px
980-Desktop: 20px
1024-Desktop: 22px
h3 styles
color: #20394F
320-Mobile: 14px
740-Tablet: 14px
980-Desktop: 18px
1024-Desktop: 20px
h4 styles
color: #20394F
320-Mobile: 14px
740-Tablet: 14px
980-Desktop: 17px
1024-Desktop: 19px
h5 styles
color: #20394F
320-Mobile: 14px
740-Tablet: 14px
980-Desktop: 16px
1024-Desktop: 18px
h6 styles
color: #20394F
320-Mobile: 14px
740-Tablet: 14px
980-Desktop: 15px
1024-Desktop: 17px

Link styles and colors

Global link color: a
text color: #0038b1
Mobile and Tablet a link background color:
bg: #f0f0f0
(block/div h50px)
Global link color: a visited
text color: #20399d
Mobile and Tablet a visited background color:
bg: #f0f0f0
(block/div h50px)
Global link color: a active
text color: #20399d
Mobile and Tablet a activ background color:
bg: #dde8ff
(block/div h50px)
Global link color: a hover
text color: #0038b1
Global link color: a hover background color:
bg: #dde8ff
(block/div h50px)