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.
- 320px (mobile)
- 740px (tablet)
- 980px (desktop)
- 1220px (desktop - wide)
Global styles
DC.Gov is designed using the following global fonts, text sizes and colors.
- link block height - 50px
- font size - body/standard baseline 14px
- body text color - #444444
- font to be used globally - Roboto
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)