Heading 1 Display Text

H1 and primary display text is Lato Book in strong at 47 px (235%). On white (#ffffff), it is near black (#333333) with a blue (#00baff) highlight. On blue, it is white with a black (#000000) highlight. On black, it is white with a blue highlight. Overtop an image, it is typically white or near black, depending on the brightness of the background.

Heading 2

H2 text is Lato Book in strong at 32.8 px (164%). On white, it is blue or near black. On blue, it is white with a black highlight, plain white or plain black. On black it is white, or white with a blue highlight.

Heading 3

H3 text is Lato Book in strong at 25.8 px (129%). (28 in HubSpot) On white, it is medium gray (#646464). On blue, it is white or black. On black it is white. H3 should not employ highlights. Neither should styles H4–H6.

Heading 4

H4 text is Lato Book in at 28.2 px (141%) (28 in HubSpot).  It is typically used on white or black, and it is usually blue. It is the style we use for quotations. If it must be used on blue, it is white.

HEADING 5

H5 text is Lato Book in strong at 18 px (88%) – all caps. If used on white, it is blue. If used on black or blue, it is white. It is the style we use for accordion headings.

HEADING 6

H6 text is Lato Book at 18 (88%) – all caps. It is typically used on white, and it is usually blue. If it must be used on blue or black, it is white.

Content Text
Content text is Lato Book at 20 px. It is typically used on white in medium gray. When used on any other colour, it is usually white. All heading sizes are percentages of this.

 

dss_black_background. Primary messaging container. White text with blue highlight. Padding for top and bottom at 15%. Padding for sides at 0%. Stick to at least 3 lines of text, and no more than 5.

dss_blue_background. Secondary messaging container. White text with black highlight. Padding for top and bottom at 15%. Padding for sides at 0%. Stick to at least 3 lines of text, and no more than 5.

dss_white_background. Tertiary messaging container. Near black text with blue highlight. Padding for top and bottom at 15%. Padding for sides at 0%. Stick to at least 3 lines of text, and no more than 5.

dss_lightgray_background. Tertiary messaging container. Near black text with blue highlight. Padding for top and bottom at 15%. Padding for sides at 0%. Stick to at least 3 lines of text, and no more than 5.