City Design Guidelines

The City’s Style Guide provides guidelines for design elements such as typography and color. These exist to strengthen and unify the City’s online brand identity and user experience. We strongly encourage you to use them when designing an online application, agency website, microsite, campaign, or any other page linking to

Logo Guide

The City’s most recognizable brand asset is its logo. Its bold block style is easily identifiable and works in a number of configurations. Different agencies can choose to use it in a solid color or fill it with vibrant imagery, but all City sites must use the logo according to official Email the Content Strategy Team to request the NYC Logo Guidelines.

excerpt from the NYC Logo Guidelines showing a logo reading NYC Agency Department Subdivision

Fonts and Typography

We recommend the following font characteristics for all City-related sites.

Base Font Size

Existing sites: 16px
New sites: 18.677px

Avoid using absolute sizes. Instead, use relative sizes by setting the base font size in the html or body tag, and using the rem unit for all spacing throughout the site.

Font Stack

Use the following as your standard font stack:
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

Text Color

Primary text color
Gray: hex #333333
Secondary text color
Black: hex #000000

Text Elements

Line Length

75 characters per line (cpl) of text or fewer will allow for optimal readability and scannability. (For reference, this paragraph has an average of 75 cpl). While higher cpl may result in faster reading speed, a target of 45-75 cpl is commonly advised. If you’re not sure whether a line is too long, test by reading it and seeing if your eye loses its place between the end of one line and the beginning of another. If so, reduce the characters per line.

Line Height

Make sure there’s adequate line height for paragraphs of text. Headline text may have tighter line spacing, depending on your design. A line height of 1.6 is a good starting point for all paragraph text. You can set this using the line-height property.


Headings can help you format content for better readability, and are key to making information accessible to users with disabilities and low-literacy levels.

Current heading sizes used on

h1 heading

39px (2.5rem)

h2 heading

36px (2rem)

h3 heading

24px (1.75rem)

Read more about properly formatting headings in the Accessibility section.


Choose colors that reflect your agency and its target audiences. Be aware that colors convey moods and meaning without words. Red, for instance, can be seen as negative, while blue and green connote more positive emotions.

With these things in mind, create a color palette of primary, secondary, and tertiary colors that work together visually and meet contrast requirements.

Example Teamsite color palette:

  • Hex #0a5796, rgb (10,87,150)
  • Hex #1771b7, rgb (23,113,183)
  • Hex #000000, rgb (0,0,0)
  • Hex #333333, rgb (51,51,51)


Color Contrast

Color contrast ratios between text and background colors must be at least 4.5:1 to pass the WCAG 2.1 AA accessibility requirements.

The WebAim Color Contrast Checker lets you check the accessibility level of different color combinations at different sizes. This is important, since a color combo that’s accessible at a large size may be inaccessible at a smaller size.

Read more about color and accessibility in the Accessibility section.