NYC Planning's Digital Style Guide defines standards for the creation, formatting, and design of our digital products. These best practices and UI patterns ensure consistency both within specific applications, and throughout our products and services.

Content

Design

Development

User experience is directly affected by how digital content is planned and structured. For this reason, this style guide is aimed at not only designers and developers, but also content creators. In addition to code samples and rules of aesthetics, this guide also defines best practices for creating content that's clear, concise, and user-friendly.

Note: This style guide is built upon the Foundation front-end framework. For an exhaustive list of features, components, or modules not covered here, please see the Foundation for Sites documentation.

Getting Started

There are a few ways to incorporate the NYC Planning Digital Style Guide into your project, depending on your tech stack and requirements:

Note: This Style Guide uses the Foundation framework. However, a Bootstrap template is also available.

CDN

The simplest way to incorporate the Style Guide into your project is to use the files hosted on the unpkg.com CDN .

1. Place this link in the head of your HTML code:

<link rel="stylesheet" href="https://unpkg.com/nyc-planning-style-guide@1.0.7/dist/assets/css/nyc-planning.css" />

2. And place this script at the end of your code, just before the closing `</body>` tag:

<script src="https://unpkg.com/nyc-planning-style-guide@1.0.7/dist/assets/js/nyc-planning.js"></script>

That's it! You're all set to start using our CSS classes and JavaScript components.

Upgrading

If you want to upgrade to a newer release of the Style Guide, update the version number in your CSS and JavaScript URLs — see the list of the available releases. If you don't specify a specific version, it will default to the latest version. So be sure to use (and test!) an explicit version in your application to avoid breaking changes.

Still need help?

Here's a boilerplate HTML starter template which has everything you need — including the CSS, JavaScript, and the FontAwesome icon set:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NYC Planning [application name]</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/nyc-planning-style-guide@1.0.7/dist/assets/css/nyc-planning.css">
  </head>
  <body>
    <h1>Hello, world! <i class="fas fa-rocket"></i></h1>

    <script src="https://unpkg.com/nyc-planning-style-guide@1.0.7/dist/assets/js/nyc-planning.js"></script>
  </body>
</html>

Note: Be sure to include the .no-js class on your html tag. Adding this class prevents flash of unstyled content for a number of components.

Download static assets

If you'd like the CSS and JavaScript as static assets for your project, you can download the latest files here:

Style: nyc-planning.css
JavaScript: nyc-planning.js

Installation

This package is available at npmjs.com, and includes all of the source Sass and JavaScript files and the compiled CSS and JavaScript. It requires Node.js (with npm or Yarn) and a Sass compiler (Ruby Sass 3.4+ or libsass 3.3.2+).

1. Install the package

$ npm install nyc-planning-style-guide
$ # or
$ yarn add nyc-planning-style-guide

2. Configure Sass load paths

Add Sass load paths for this package and Foundation. How you do this depends on your build process—for example, node-sass can declare load paths by adding a SASS_PATH variable to your .env file:

SASS_PATH=node_modules:node_modules/foundation-sites/scss:node_modules/nyc-planning-style-guide/src/assets/scss

Regardless of your build process, the load paths are the same:

node_modules/
node_modules/foundation-sites/scss
node_modules/nyc-planning-style-guide/src/assets/scss

3. Set up your `.scss`

Edit your project's Sass file to import/include variables, mixins, and modules in the following order:

Import Foundation's utilities that help us work with colors, units, selectors, and more.
```
@import 'foundation-sites/scss/util/util';
```
Import the variables file from this package, which includes NYC Planning color palettes and Foundation's utilities and settings.
```
@import 'nyc-planning-variables';
```
Import Foundation, which includes Sass functions and mixins but does not output any CSS rule-sets.
```
@import 'foundation';
```

Include Foundation components, which outputs CSS rule-sets for those components. If you don't need everything, you can output a subset of components by including them individually.

Everything
Individually

@include foundation-everything;

// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// Grids (choose one)
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;

// Generic components
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-switch;
@include foundation-table;
// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;

// Containers
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;
// Menu-based containers
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;

// Layout components
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;

// Helpers
@include foundation-float-classes;
// @include foundation-flex-classes;
@include foundation-visibility-classes;
// @include foundation-prototype-classes;

Import NYC Planning Sass modules, which outputs CSS rule-sets for our custom components. If you don't need everything, you can output a subset of modules by including them individually.

Everything
Individually

@import 'modules/nyc-planning-all-modules';

@import 'nyc-planning-m-box-model';
@import 'nyc-planning-m-color';
@import 'nyc-planning-m-layer-groups-menu';
@import 'nyc-planning-m-site-header';
@import 'nyc-planning-m-typography';

Finally, any custom app modules and styles should come after the files above. Your .scss file should look something like this:

@import 'foundation-sites/scss/util/util';
@import 'nyc-planning-variables';
@import 'foundation';
@include foundation-everything;
@import 'modules/nyc-planning-all-modules';

// My custom app styles
@import 'my-app-module';
.peanut-butter {
  color: Burlywood;
}

4. JavaScript (optional)

This package can be used for its styles alone. However, some interactive components require JavaScript for behaviors such as toggling element class names. There are a few methods for including JavaScript in your project:

Use the compiled JavaScript: Simply load the JavaScript file (/dist/assets/js/nyc-planning.js), which is a compiled combination of Foundation's JavaScript and its dependencies. This is the easiest method but may include unnecessary code.
Use specific JavaScript components: Individually load jQuery, What Input, and the specific Foundation JavaScript components and then initialize Foundation. For more information on setting up custom JavaScript, see the Foundation JavaScript documentation .
Handle behavior/state yourself: If you're using a framework that handles state for you (e.g. JavaScript MVCs), it's best to avoid the dependencies of jQuery and Foundation's custom JavaScript. You should instead use your own custom methods to change class names in interactive components. This is how the Labs UI addon works, as state is handled by EmberJS.

Ember and Labs UI

Labs UI is an EmberJS addon that contains common components used in NYC Planning digital products. It consumes Sass files from this package to style its components. Since Ember handles behavior and state management, Labs UI does not include any JavaScript from this package.

For more information, see the Labs UI documentation.

Logo

The NYC Planning logo should be used consistently to foster brand awareness.

<img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />

Download the logo in various formats: https://github.com/NYCPlanning/dcp-logo

Logo variations

The two-color, primary version of logo should be used for most instances. Alternate black and white versions are provided for instances where the primary logo is less legible — e.g. a background makes the orange or black in the logo hard to read.

<!-- Primary, two-color logo -->
<img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />

<!-- White logo -->
<img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_white_772.png" />

<!-- Black logo -->
<img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_black_772.png" />

Use the two-color version of the logo whenever possible

Use the black version of the logo on light backgrounds

Logo usage

Clearspace

It's important to maintain enough space around the logo, allowing it to stand out and ensuring that it's easily identifiable.

Please don’t put anything in this "red zone"—which is approximately 8% of the height of the logo, or about the size of the square in the middle of the C.

Resolution

@2x for retina screens, display raster PNG version at max 1/2 size or use vector SVG versions

Logo don'ts

Do not place the two-color logo on colorful backgrounds

Do not place the logo on backgrounds that make it difficult to read

Do not shrink the logo smaller than its 50-pixel minimum width

Do not change the color of the logo

Do not use a blurry or low-resolution version of the logo

Do not rotate the logo

Do not use the black logo when the primary logo would read well

Do not use the white logo on light colored backgrounds

Color

Promote strong brand recognition by using a distinct and reduced color palette, featuring only two hues (orange and yellow) and subtle shades of gray.

The primary brand color is dcp-orange . It's the color of the "NYC" in our logo, and it can be used for large blocks of color. The slightly darker a11y-orange increases accessibility by adding more contrast, and is the default color for linked text and button backgrounds.

The secondary brand color is dcp-yellow . Use it in small amounts as an accent and for secondary UI elements. The lighter a11y-yellow increases accessibility and can be used for linked text on darker backgrounds.

Orange implies clickability in our products. Do not use orange to highlight or emphasize words.
Be sure to use the Color Contrast Checker to choose accessible colors.
Do not overuse color. Color should not cover the majority of the page.
Avoid dark UIs. Instead, keep products light and inviting, using subtle grays to create visual hierarchy—the default background color of the <body> element is off-white .

Brand colors

Grayscale colors

Avoid pure black #000 and white #fff, as text/background color combinations with too high of a contrast can decrease legibility and cause eye strain.

Data viz colors

Our data viz color palette has been optimized to increase the visual distinction of 12 hues in varying saturation and lightness, with consideration for APA's Land-Based Classification Standards. Learn more about choosing colors in the Color Accessibility section.

Red

Orange

Gold

Yellow

Chartreuse

Green

Teal

Aqua

Blue

Indigo

Purple

Fuchsia

Land Use colors

lu-peach
lu-yellow
lu-magenta
lu-red
lu-orange
lu-pink
lu-green
lu-blue
lu-lavendar
lu-silver
lu-gray

Color classes

Text colors

Use the .text-[color] classes to set the text color of an element.

<p class="text-green-dark">This whole paragraph is dark green.</p>
<p>This one is black with a <span class="text-purple">purple</span> word.</p>

This whole paragraph is dark green.

This one is black with a purple word.

Background colors

Use the .bg-[color] classes to set an element's background color and its default text color (defaulting to black or white, depending on which is more accessible). Text color classes override the default text color set by background color classes.

<p class="bg-yellow">This element has a yellow background, which defaults to black text.</p>
<p class="bg-blue-dark">This element has a dark blue background, which defaults to white text.</p>
<p class="bg-chartreuse-light text-green-dark">This element has a light chartreuse background and dark green text (which overrides its default black text).</p>

This element has a yellow background, which defaults to black text.

This element has a dark blue background, which defaults to white text.

This element has a light chartreuse background and dark green text (which overrides its default black text).

Color accessibility

For those with low vision, typographic contrast is important. In accordance with Web Content Accessibility Guidelines (WCAG) 2.0 requirements, please use the [Color Contrast Checker](http://webaim.org/resources/contrastchecker/) to make sure that all text and background color combinations pass AA contrast requirements.

Do not set light type on light backgrounds
Do not set dark type on dark backgrounds
Do not relying purely on color for visual cues

This isn't readable for those with low vision.

Icons

Font Awesome

NYC Planning products use the Font Awesome free, open-source, vector icon set. You can easily tweak these icons. Easily add color, change the size, rotate, animate, and even combine/stack them.

<i class="fas fa-search"></i>
<i class="fas fa-search text-blue"></i>
<i class="fas fa-search fa-xs"></i>
<i class="fas fa-search fa-2x"></i>
<i class="fas fa-search fa-rotate-270"></i>
<i class="fas fa-cog fa-spin"></i>
<span class="fa-stack fa-2x" style="font-size:0.5em;">
  <i class="fas fa-comment fa-stack-2x text-charcoal"></i>
  <i class="fas fa-bicycle fa-stack-1x text-blue-light"></i>
</span>

Typography

Type basics

Be consistent with font styles and hierarchies to ensure that UI elements are clear and easily recognizable when scanning the page.

Avoid using too many font styles
Size type with relative units (rem)
Check how your type flows at various screen sizes

Inline formatting

Use <b> for bold text, without any extra importance
Use <strong> for bold text, with added semantic "strong" importance
Use <i> for italic text, without any extra importance
Use <em> for italicize text, with added semantic importance
Use <small> for smaller text
Use <mark> for marked or highlighted text
Use <del> for ~~deleted~~ (removed) text
Use <ins> for inserted (added) text
Use <sub> for _subscripted text
Use <sup> for ^{superscripted} text

Fonts

NYC Planning products use a system font stack. This ensures that UIs are optimized to be highly legible, boosts performance, and are frictionless as you move between our products and the rest of the operating system. One exception to system fonts is when displaying code. In this case, you should use the monospace font stack.

Use the .font-default and .font-mono classes to explicitly set the font for a particular element. These classes can be used to override the font inherited from a parent element. But be aware that further nested elements may inherit their font from these classes.

// Sans-serif font stack
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

// Monospaced font stack
font-family: Consolas, 'Liberation Mono', Courier, monospace;

The default font size of the <body> element is set to 100%, which is 16 pixels on most browsers. This ensures compatibility with browser-based text zoom and preferences set by the user. Explicit font sizes should be set with relative units, preferably rem. Setting the font size with px can break browser zoom functionality.

Headers

Since search engines use headers to index structure and content, and users skim content by its headers, it's important to use headers semantically. <h1> through <h6> elements represent six levels of hierarchy, <h1> being the highest and <h6> the lowest. Avoiding using <h1> more than once on a page, and avoid skipping heading levels.

<h1>Header Level 1</h1>
<h2>Header Level 2</h2>
<h3>Header Level 3</h3>
<h4>Header Level 4</h4>
<h5>Header Level 5</h5>
<h6>Header Level 6</h6>

Header Level 1

Header Level 2

Header Level 3

Header Level 4

Header Level 5

Header Level 6

Paragraphs

Paragraphs inherit the font size of their containing element, which defaults to 1rem/16px inherited from the body element. Paragraphs are styled with line-height: 1.6 and margin-bottom: 1rem for a vertical rhythm that's easy to read.

<p>This is a paragraph...</p>

Wide lines of text are difficult to read and make it harder for people to focus. While there's no perfect line length, a good goal fewer than 120 characters per line (including spaces). It's good practice to use responsive design techniques to create layouts with optimal line lengths.

Text alignment

Change the text alignment of an element by adding .text-left, .text-right, .text-center or .text-justify.

Adding a breakpoint to the front of a text alignment class will cause it to only be applied on that size screen or larger. For example, .medium-text-center will keep text left-aligned on the smallest screens, but switch to center-aligned on medium screens and larger.

<p class="text-left">This text is left-aligned. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="text-right">This text is right-aligned. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="text-center">This text is centered. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="text-justify">This text is justified. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

This text is left-aligned. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This text is right-aligned. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This text is centered. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This text is justified. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Links

Inline text links are styled as orange text, as orange implies clickability in NYC Planning products. For more information on indicating clickability in the UI, go to the Color section.

<a href="url">link text</a>

link text

Never tell users to click here!

There are two reasons why links should never say click here:

"Click" puts too much focus on mouse mechanics. People know what links are and how to use a mouse. Telling them to click is unnecessary, diminishes their experience, and can be even demeaning (they may be using a touch device or assistive technology).
"Here" conceals the content that they are clicking on. You shouldn't have to read a paragraph to understand a link's context. When links communicate more than "here," you can easily scan content to find the link you're looking for.

Bad:

To learn more about ZoLa, click here.

Good:

Learn more about ZoLa.

Here are some tips for writing proper links:

Links should provide information when read out of context
Do not talk about mechanics (clicking)
A link should be the subject of its sentence (avoid linking verb phrases)
Placing links at the end of sentences can help users to act more quickly
When linking to documents, include the filetype in the link text—e.g. Important File (PDF)

Note: Proper link text also has the benefit of being more SEO-friendly.

The target attribute

The target attribute can be used to open a linked document in a new window. This should be used sparingly. Avoid opening new windows for internal links.

<a href="url" target="_blank">link text</a>

link text

External links

When linking to external websites and documents, use an icon that indicates to the user that they will be leaving the current website. For example: “Follow NYC Planning on GitHub.” For more information on adding icons, go to the Font Awesome section.

Lists

Unordered lists

Use the <ol> tag to list things if the order of the items doesn't matter.

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>This list item contains another list
    <ul>
      <li>Nested list item</li>
      <li>Another nested list item</li>
    </ul>
  </li>
  <li>List item with a much longer description or more content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
</ul>

List item
List item
This list item contains another list
- Nested list item
- Another nested list item
List item with a much longer description or more content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ordered lists

The <ol> tag defines lists with an explicit order, marked with numbers by default.

The optional type="[1,A,a,I,i]" attribute defines the type of the list item marker.

<ol>
  <li>Bicycles</li>
  <li>Bike racks</li>
  <li>Bike lanes
    <ol type="a">
      <li>Sharrows</li>
      <li>Striped</li>
      <li>Buffered</li>
      <li>Protected</li>
    </ol>
  </li>
</ol>

Bicycles
Bike racks
Bike lanes
1. Sharrows
2. Striped
3. Buffered
4. Protected

Un-bulleted lists

The <ul> is a bulleted list and <ol> is a numbered list by default, but you can add the class .no-bullet to remove the bullets or numbers. This allows lists to have semantic markup and custom styles so they do not look like lists (useful for lists such as menu items).

<ul class="no-bullet">
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested list item</li>
      <li>Nested list item</li>
    </ul>
  </li>
  <li>List item</li>
</ul>

List item
List item
- Nested list item
- Nested list item
List item

Definition lists

The <dl> tag is used to display name-value pairs, like metadata or a dictionary definition. Each term (<dt>) is paired with one or more definitions (<dd>).

<dl>
  <dt>Time</dt>
  <dd>The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.</dd>
  <dt>Space</dt>
  <dd>A continuous area or expanse that is free, available, or unoccupied.</dd>
  <dd>The dimensions of height, depth, and width within which all things exist and move.</dd>
</dl>

Time: The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.
Space: A continuous area or expanse that is free, available, or unoccupied.; The dimensions of height, depth, and width within which all things exist and move.

Blockquotes

<blockquote>
  Cities have the capability of providing something for everybody, only because, and only when, they are created by everybody.
  <cite>Jane Jacobs</cite>
</blockquote>

Cities have the capability of providing something for everybody, only because, and only when, they are created by everybody. Jane Jacobs

Abbreviations

Use the <abbr> tag to annotate a shortened term. Always include a title attribute which clarifies the full term.

<abbr title="Department of Information Technology & Telecommunications">DoITT</abbr> provides infrastructure...

DoITT provides infrastructure...

Note: Abbreviations should be used mindfully. See the acronyms and abbreviations section for more information.

Code

Format references to code with the <code> tag.

Remember to escape angle brackets: <code>&lt;div&gt;</code>

Remember to escape angle brackets: <div>

Keystrokes

Use the <kbd> element to annotate a key stroke or combination.

Press <kbd>-</kbd> / <kbd>+</kbd> to zoom the map.

Press - / + to zoom the map.

Dividers

Use the <hr> tag to define a thematic change in the content (a shift of topic). This creates a 1-pixel tall, gray horizontal rule that spans 100% of the width of its container.

<hr />

This is a paragraph about apples. This is a paragraph about apples. This is a paragraph about apples. This is a paragraph about apples. This is a paragraph about apples.

This is a paragraph about oranges. This is a paragraph about oranges. This is a paragraph about oranges. This is a paragraph about oranges. This is a paragraph about oranges.

Forms

Text inputs

The following input types create a text input: text, date, datetime-local, email, month, number, password, search, tel, time, url, and week.

<label>Text <input type="text"></label>
<label>Number <input type="number"></label>
<label>Date <input type="date"></label>
<label>Password <input type="password"></label>

Text Number Date Password

In some desktop browsers, certain types—number, date, search…—have controls in them which allow the user to increment/decrement the text inside the field, select it from a dropdown, or clear it. When adding custom controls, be sure they don't conflict with these browser-specific controls. Adding the .no-controls class will remove most of them.

Text areas

The <textarea> element creates a multi-line text area. The row attribute determines its height, which can be overridden with custom CSS. The cols attribute is not necessary, as the width is always 100%.

<label>Text Area
  <textarea rows="4"></textarea>
</label>

Text Area

Labels & placeholders

All form inputs must have an associated label. To associate a <label> with an <input> element, give the label a for attribute with the same value as the input's id attribute.

<label for="my-label-id">Input Label</label>
<input type="text" id="my-label-id">

Input Label

Alternatively, you can nest the input directly inside the label (without matching attributes) to associate them implicitly.

<label>Input Label
  <input type="text">
</label>

Input Label

Select menus

Select menus combine choices into one condensed menu. However, when the user needs to see all available choices, radio buttons are often more user-friendly. For long lists, consider using a typeahead autocomplete component.

<label>Choose one
  <select>
    <option value="one-two-family">One & Two Family Buildings</option>
    <option value="multi-family-walk-up">Multi-Family Walk-Up Buildings</option>
    // more options ...
  </select>
</label>

Choose one

Multi-select

The multiple attribute allows more than one option to be selected. Use the size attribute to set how many options are visible at once (defaults to 4). However, since UX can vary by OS/browser and multiple selection may not be intuitive, checkboxes are often more user-friendly.

<label>Choose many
  <select multiple size="6">
    <option value="one-two-family">One & Two Family Buildings</option>
    <option value="multi-family-walk-up">Multi-Family Walk-Up Buildings</option>
    // more options ...
  </select>
</label>

Choose many

Checkboxes & radio buttons

When selecting from a short list of options, checkboxes and radio buttons are often a more user-friendly alternative to select menus. Use radio buttons when the user must select only one option. Use checkboxes when the user may select multiple options. For long lists, consider using a typeahead autocomplete component.

Radio buttons

<fieldset class="fieldset">
  <legend>Choose one zoning type:</legend>
  <input type="radio" name="zoning" id="com_example" value="com"><label for="com_example">Commercial</label>
  <input type="radio" name="zoning" id="man_example" value="man"><label for="man_example">Manufacturing</label>
  <input type="radio" name="zoning" id="res_example" value="res"><label for="res_example">Residential</label>
  <input type="radio" name="zoning" id="par_example" value="par"><label for="par_example">Parks</label>
</fieldset>

Choose one zoning type: Commercial Manufacturing Residential Parks

Checkboxes

<fieldset class="fieldset">
  <legend>Choose multiple:</legend>
  <input type="checkbox" id="com_example"><label for="com_example">Commercial</label>
  <input type="checkbox" id="man_example"><label for="man_example">Manufacturing</label>
  <input type="checkbox" id="res_example"><label for="res_example">Residential</label>
  <input type="checkbox" id="par_example"><label for="par_example">Parks</label>
</fieldset>

Choose multiple: Commercial Manufacturing Residential Parks

Fieldsets

A group of related controls should be wrapped in a <fieldset> element, and given a common label using the <legend> element. Each individual input should have its own <label>. Fieldsets have no default style. The .fieldset class can be added to the fieldset to style it as a containing box, with the legend in its top-left corner.

<fieldset class="fieldset">
  <legend>Zoning types</legend>
  <input type="checkbox" id="com_example"><label for="com_example">Commercial</label>
  <input type="checkbox" id="man_example"><label for="man_example">Manufacturing</label>
  <input type="checkbox" id="res_example"><label for="res_example">Residential</label>
  <input type="checkbox" id="par_example"><label for="par_example">Parks</label>
</fieldset>

Zoning types Commercial Manufacturing Residential Parks

Accessible fieldsets

To increase accessibility, related controls (especially checkboxes and radio buttons) should always be wrapped in a fieldset. If this is not ideal for the UI/layout, the .show-for-sr class can be added to the legend so it's hidden on screen but still available for screen readers.

<fieldset>
  <legend class="show-for-sr">Zoning types:</legend>
  ...
</fieldset>

Commercial Manufacturing Residential Parks

File upload

Use <input type="file"> to create a file upload button. For security reasons, most browsers don't let you style file inputs. To work around that, we can style a form label as a button, and point it to the <input>. To properly mask the input, the .show-for-sr class is added.

<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">

Upload File

Upload & download icons

Add icons to file upload inputs and download buttons give more scannable context to these action. Learn more about using icons in the icons section.

Upload

Placeholder text

The placeholder attribute specifies text that appears within an input when it's empty.

<input type="text" placeholder="This is placeholder text">

Placeholders are not accessible!

Do not use placeholder text to replace the functionality of a <label> element. Placeholder text can’t be automatically translated, doesn't work with assistive technology, and causes UX confusion—users may assume that the field is already filled out and upon entering their first character, they no longer see the prompt. Explicit instructions and requirements for inputs should appear in labels or help text.

Search is the exception. It's a standard UI convention for search inputs to have a magnifying glass icon, which clearly communicates the function of the input. In this case, it is acceptable to use placeholder text. However, you must also include a label for accessibility. View to the Search Form component for information on implementing this.

Help text

Place .help-text below a form element to clarify any instructions or requirements. Give the help text a unique ID, and add the attribute aria-describedby to the associated form element. Screen readers can read the help text when the user focusses an associated input.

<label>Password
  <input type="password" aria-describedby="passwordHelpText">
</label>
<p class="help-text" id="passwordHelpText">Your password must have at least 10 characters, a number, and an Emoji.</p>

Password

Your password must have at least 10 characters, a number, and an Emoji.

Buttons

Buttons can be created with minimal markup by adding the .button class. Primary buttons are a11y-orange with white text, and should be used sparingly for primary user actions that need to be very noticeable. For secondary tasks, add the .secondary class to make a light gray button with orange text.

<a class="button" href="#">Primary action</a>
<a class="button secondary" href="#">Secondary action</a>

Primary action Secondary action

Size classes can be added to your button to change its size.

<a class="button tiny" href="#">Tiny</a>
<a class="button small" href="#">Small</a>
<a class="button" href="#">Default</a>
<a class="button large" href="#">Large</a>

Tiny Small Default Large

The .expanded class makes the butto tak up the full width of its container.

<a class="button expanded" href="#">Such Expand</a>

Such Expand

Use the right tag

Since buttons can be used for many purposes, it's important to use the right tag. Use the <a> tag if the button is a link to a document, another page, or an anchor within the page. Use the <button> tag if the button performs an action that changes something on the current page.

Label buttons with clear actions

Generic or misleading button text can be frustrating for users. A button’s text should clearly describe its action. Use verbs whenever possible instead of "Yes" or "OK" so buttons don't rely on the context of titles or prompts.

Bad:

Would you like to delete this?

Good:

Would you like to delete this?

Disabled buttons

The .disabled gives buttons a faded appearance and the not-allowed cursor property. This only adds visual style; it doesn't disable any actions. For <button> elements, you can add the disabled attribute to both style and actually disable it. Mark links as disabled for assistive technology by adding the aria-disabled attribute.

<a class="button disabled" href="#" aria-disabled>Disabled link</a>
<button type="button" class="button" disabled>Disabled button</button>

Disabled link

Button groups

Wrap buttons in a container with the .button-group class to associate a set of related actions. These buttons will be separated by a 1-pixel border. Size and color classes can be applied to the group as a whole.

<div class="button-group small secondary">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>

One Two Three

Expanded button groups

The .expanded class will make the group fill the width of its container (maximum of six buttons).

<div class="button-group small secondary expanded">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>

One Two Three

Stacked button groups

Make a button group vertical with the .stacked class. The responsive .stacked-for-small class makes the group vertical on small screens only, and .stacked-for-medium makes the group vertical on medium and small screens. These classes are good for button groups confined to small spaces at certain screen sizes.

<div class="button-group small secondary stacked">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>

One Two Three

Menus

Menus are lists of links. Add the .menu class to a <ul> element containing <li> elements containing bold links.

<ul class="menu">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

Add the .is-active class to a menu's <li> to highlight that item as active.

By default, menu items align to the left. They can also be aligned to the right with the .align-right class, aligned to the center with the .align-center class, or take up the full width with the .expanded class.

<ul class="menu">...</ul>

<ul class="menu align-right">...</ul>

<ul class="menu align-center">...</ul>

<ul class="menu expanded">...</ul>

By default, menus are horizontally. Add the .vertical class to switch a menu's default orientation. The responsive .[size]-[orientation] classes allow you to re-orient a menu at different screen sizes.

<ul class="menu vertical medium-horizontal large-vertical">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

Tabs

Use tabs to alternate between views within the same context. Keep tab labels short. All tab content should be related and logically divided so users can easily predict what's in a given tab. If there aren't clearly distinct groupings, tabs are likely the wrong UI for navigating the content.

<ul class="tabs">
  <li class="tabs-title"><a href="#">One</a></li>
  <li class="tabs-title is-active"><a href="#" aria-selected="true">Two</a></li>
  <li class="tabs-title"><a href="#">Three</a></li>
  <li class="tabs-title"><a href="#">Four</a></li>
</ul>

Do not use tabs when users need to compare the info in multiple tabs. Having to switch back and forth puts an added burden on the user and lowers usability.

Do not use tabs unless they all fit on one row at all screen sizes.

Switching tabs

Tabs can be implemented by reloading the page with different content on click or by showing/hiding content with JavaScript. Reloading the page is less desirable, as it can cause the scroll position to jump. JavaScript improves the user's experience by seamlessly swapping the tabs content.

Foundation's JavaScript makes switching tabs easy. Put all tabs content in a container with the .tabs-content class. Each piece of content in the container needs the .tabs-panel class and a unique ID. The href of each tab link should match the ID of a tab panel. Alternatively, the ID can be specified with the attribute data-tabs-target.

<ul class="tabs" data-tabs id="example-tabs">
  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
  <li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
    <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
  </div>
  <div class="tabs-panel" id="panel2">
    <p>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
  </div>
</div>

Tab 1
Tab 2

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

Pagination

Pagination lets users click through related content, like search results or news posts. Add the class .pagination to a <ul> containing <li> elements containing <a> elements. Add the .current class to highlight the current list item, or .disabled to subdue it. Pagination should be centered with the .text-center class.

Pagination should be nested inside a <nav> with the attributes aria-label="Pagination" to explain the purpose of the component to assistive technologies. Content with the .show-for-sr class should also be added to provide more context to screen readers.

<nav aria-label="Pagination">
  <ul class="pagination text-center">
    <li class="pagination-previous disabled">Previous</li>
    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
    <li><a href="#" aria-label="Page 2">2</a></li>
    <li><a href="#" aria-label="Page 3">3</a></li>
    <li class="ellipsis"></li>
    <li><a href="#" aria-label="Page 42">42</a></li>
    <li><a href="#" aria-label="Page 43">43</a></li>
    <li><a href="#" aria-label="Page 44">44</a></li>
    <li class="pagination-next"><a href="#" aria-label="Next page">Next</a></li>
  </ul>
</nav>

Accessibility

Be sure to follow best practices to make our products more accessible:

Structure documents properly. Use the right HTML tags when marking up navigation, lists, links, controls, etc.
Label everything. Every control or form element must have a text label. You can use the visibility classes to hide labels visually while maintaining accessibility. Use `alt` attributes on images to describe them.
Don't rely on solely visual cues. Content should make sense even if it's being read by a screen reader. Content with color-based labeling should also have text-based ways of being identified.
Make all content navigable regardless of device. All components should work with keyboards, mice, and touch screens. If content is primarily accessed via an interactive map, it should also be accessible via text search or some other non-map method.

Resources

Tools

Contrast

For users with low vision, proper typographic contrast is important. Both size and color matter. Text colors should stand out from background colors. Use the Color Contrast Checker to choose accessible colors. The contrast ratio should at least be 1:4.5 for normal text and 3:1 for large text.

Screen readers

Adding display: none to an element will prevent screen readers from reading it. There are better ways to hide content while still making it accessible to screen readers.

Show for Screen Readers Only

To visually hide content, while still allowing assistive technology to read it, add the .show-for-sr class.

<p class="show-for-sr">This paragraph can only be read by a screen reader.</p>
<p>There's a paragraph above this one, but you can't see it.</p>

There's a paragraph above this one, but you can't see it.

Hide for Screen Readers Only

To hide text from assistive technology, while still keeping it visible, add the attribute aria-hidden="true". This doesn't affect how the element looks, but screen readers will skip over it.

<p aria-hidden="true">This text can be seen, but won't be read by a screen reader.</p>

Note: It's usually not a good idea to hide content from screen readers, but aria-hidden is best used to mask purely visual elements of a page. Try to avoid purely decorative text and images.

Skip links

In a product with a lot of navigation, a screen reader has to read through the entire navigation to get to the content. This can be remedied by adding a skip link before the navigation, which takes the user to the main content.

The .show-on-focus class hides an element, except when it has focus. Adding tabindex to the target element makes it focusable—a negative value (e.g. tabindex="-1") means the element is focusable, but not reachable via sequential keyboard navigation; tabindex="0" means the element is focusable in sequential keyboard navigation.

<a class="show-on-focus" href="#main-content">Skip to content</a>
<header id="header" role="banner">
  <!-- a lot of navigation -->
</header>
<main id="main-content" role="main" tabindex="0">...</main>

Focus styles

Never remove CSS outlines!

It is tempting to use :focus { outline: none; } to removing outlines in CSS. But this creates issues for people navigating via keyboard, removing any visible indication of focus. Methods like onfocus="blur()" are even worse, preventing users from interacting with elements at all.

Instead, use the what-input library, which detects the user's current input device and adjusts the CSS accordingly. It let's us disable outlines for mouse users, but not for keyboard users.

TODO: explain how to include what-input if not using Foundation JS...

Note: Custom Sass components can use the @include disable-mouse-outline; at-rule to add what-input styles.

Layout

Responsive layouts

Our products should support any type of device, any size screen, and any resolution. They should fit various screens automatically, displaying content in a way that optimizes the user experience on any device.

“There is no device.”

Relative units

absolute units vs relative units… rem preferred… em nesting troubles… px breaks zoom…

Whitespace & boxes

Avoid putting content into lots of boxes. Instead, use whitespace to separate pieces of content and create visual hierarchy. When creating boxes, avoid rounded corners. Boxes should have squared corners.

Avoid rounded corners.

Use squared corners.

Drop shadows

Drop shadows are used very sparingly and subtly. Do not apply drop shadows to content elements like buttons or text. Drop shadows should only be applied to the layout's primary containers. Shadows should not have any blur, they should retain sharp edges. The color of a shadow should be rgba(0,0,0,0.1), or pure black at 10 percent opacity.

Tables

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Responsive embeds

To make sure embedded content maintains its aspect ratio at various screen sizes, wrap the iframe, object, embed, or video in a container with the .responsive-embed class.

<div class="responsive-embed widescreen">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/6QJYgm0fRHk" frameborder="0" allowfullscreen></iframe>
</div>

Embedded videos

Disable autoplay. All embedded media should be started by an explicit user action. Autoplay is a bad idea for accessibility, usability, and general sanity. Unexpected sound can conflict with other sounds or quiet environments. W3C discourages the use of autoplay, as it affects a user’s ability to stop it with a screen reader since they navigate by listening.

Make sure text is legible. When displaying text in videos, make sure that it's reasonably large, uses high-contrast colours, and remains on screen for long enough to be read.

Provide subtitles. A lot of video is watched without sound (as much as 85 percent on Facebook). This also makes the vides accessibility for users with auditory disabilities.

Visibility

Print styles

Components

Voice & Language

Content that is clear, relevant, and reader-friendly helps provide a great user experience. Language that is concise and literal allows for more accurate automated translations and makes information more accessible. Focus on simple and succinct sentences. Avoid governmental jargon and legalese.

We aim to be clear and conversational, yet professional. To be as clear as possible, strip sentences down to the actors and actions. The use of active voice is preferred to passive voice.

Be conscious of the placement of the subjects of sentences—e.g. say the applicant proposed changes instead of the changes were proposed by the applicant.
Be conscious of the use of the verb "to be." When the subject of your sentence comes after the verb, you are writing in passive voice.
Avoid citations. If needed, integrate into text—e.g. according to the Department of Parks and Recreation.
Alternate long and short sentences to help your writing flow better. Focus on one thought per sentence.
Avoid repeating words in the same sentence, or beginning multiple sentences with the same word or phrase.

Acronyms and abbreviations

Agencies and organizations should always be spelled out on first reference, followed by the common abbreviation or acronym in parenthesis. On following references, the abbreviated agency name is preferred to the agency acronym—e.g. on second reference, Department of Parks & Recreation should be referred to as Parks not DPR.
Avoid the acronym DCP. Since users tend to scan content, acronyms can be read without the first defining instance having been seen. New York City Department of City Planning should instead be shortened to NYC Planning and never DCP.
Ampersands (&) and percent signs (%) should be written out. However, it's acceptable to use the symbols in subheadings, charts, graphs, and web buttons if they're used consistently.
Use the <abbr> tag to indicate abbreviations. See the abbreviations section for more information._

Addresses

Always use numerals when writing out building numbers in addresses.
In reference to specific street names, always spell out and capitalize words like Boulevard, Avenue, and Street. For street names that are also numbers, spell out and capitalize First through Ninth and use figures for 10th and higher—e.g Fifth Ave and 11th Ave.
If a street name includes a cardinal direction, abbreviate North, South, East and West only when referring to a specific building—e.g. 326 W. 17th Street or East 34th Street. Do not capitalize cardinal directions when they indicate a general direction or location—e.g. north of North 12th Street.

Phone numbers

Phone numbers use hyphens between groups of numbers—e.g. 212-123-4567. Do not use parentheses around area codes. Area codes and country codes get no special treatment and aren't preceded by a 1 or plus sign.

Capitalization

Titles should always be capitalized when they appear before a person's name.
Follow sentence case for web buttons that include three or more words. Use title case for buttons with only one or two words. Using punctuation in buttons is up to the discretion of the writer.
Charter should always be capitalized when used in reference to the New York City Charter.
City should be capitalized when referring to New York City.
District should be capitalized when referring to NYC Community Districts or Council Districts—e.g. the 11th Council District, or within several Districts).
Titles such as Chair, Mayor, and Speaker should always be capitalized when used in reference to their position—e.g. Chair of the City Planning Commission or Mayor of New York City or Speaker of the New York City Council.
Capitalize the first word of a subheading. Punctuating subheadings is acceptable for questions. Other forms of subhead punctuation are up to the discretion of the writer.
Lowercase adjectives that describe status of a title—e.g. the former Speaker Christine Quinn.

Compositions

Use quotation marks around titles of works of art and compositions, like books, songs, television shows, video games, and poems—e.g. say "The Grapes of Wrath" not The Grapes of Wrath. Do not use quotations or italics for names of publications—e.g. The New York Times.

Contractions

Use common contractions like isn't, won't, and you'll when possible to set a more conversational tone.

Names

Always use a person's title, first and last name upon first reference. Use title and last name for following references. Do not use courtesy titles, unless needed to differentiate between people who have the same last name.

Numbers

Spell out numbers one through nine. Use numerals for numbers 10 and greater. Always spell out numbers that begin sentences, unless it's a year—e.g. 2006 was a great year. For numbers in the millions, billions or trillions, use a number and word—e.g. 1 billion or 4.8 million. Large numbers can be abbreviated in charts and graphs if they're used consistently—e.g. 1B or 4.8M.
When referring to money, always use numerals preceded with a dollar sign—e.g. $400. When referencing an amount of money less than $1, use numerals and spell out the word cents—e.g. 30 cents.
For dates, avoid using ordinal numbers (1st, 2nd, 3rd). Instead use figures—e.g. March 7, 1980.
Always use numerals for units. Spell out words like pounds, feet, and ounces. Units can be abbreviated in charts and graphs if they're used consistently—e.g. 600 ft.
The word percent should almost always be written out. A percent sign (%) may be used for charts, graphs, and subheadings.
Always use numerals for percentages—e.g. 30 percent or 6 percent.
Use numerals in reference to age. Hyphenate ages when used as an adjective before a noun or in substitution for a noun—e.g. the 20-year-old student or the 8-year-olds). Don't use an apostrophe when describing a period of time—e.g. in their 20s or the 1950s.

Hyperlinks

Avoid hyperlinking read here or click here. Hyperlinked text should always be descriptive to give readers a solid understanding of the linked content. Learn more about writing links in the links section.

Hashtags

Hashtags should be written in #CamelCase. Each word in the hashtag's phrase should begin with a capital letter. Acronyms within hashtags should be all capitals. Be careful when combining acronyms with other words—e.g. #NYCHealth reads as "New York City Health," whereas #NYChealth reads as "New York Chealth."

Pronouns

Pronouns like you and ours should be used at the writer's discretion to address readers or services we are providing. This helps humanize the City Planning's voice and makes us seem much more conversational and approachable.
Always use the singular form of they when referring to an abstract person—e.g. say when they contact the lead planner not when he/she contacts the lead planner.

Punctuation

Apostrophes: Add an apostrophe-s to all singular nouns, even if the noun ends in s. Use only an apostrophe with a singular noun if the following word begins with s—e.g. the boss's hat or the boss' style. Only use an apostrophe for a proper noun that ends in s—e.g. Districts' residents.
Bullets: Capitalize the first word of every bullet. Include a period only when the bulleted item is a complete sentence.
Colons: Capitalize the first word after a colon only if what follows makes a complete sentence.
Commas: Always use the serial comma, also known as the Oxford comma.
Dashes: Em dashes should be used—without spaces between them and adjacent words—to offset phrases. Avoid using en dashes when referring to ranges. Instead, spell out to, and, or through.
Dates: Always use the full name of the month—e.g. say March 3, 2016 not Mar 3, 2016.
Quotation marks: Periods and commas go inside quotation marks.

Words to avoid

Figurative, or superfluous, language can be confusing. It also makes translation into additional languages difficult. Here are some examples of words to avoid:

Stand (often used in social movements, but not inclusive of people with physical disabilities)
Drive (use a word like lead instead)
Drive out (use eliminate or push away instead)
Going forward (use in the future instead)
In order to (the words "in order" are unnnecessary; just say to instead)
One-stop shop (describe the item literally—e.g. a tool with comprehensive services)

Strive to use as few words as possible, especially jargon and buzzwords, as their meanings are often lost on readers. Opt instead for words that are more specific and descriptive. Here's a list of words that are used idiomatically, along with more literal suggestions:

Idioms and misnomers

Use literal and specific nouns rather than expressions or objects in a metaphorical context. For example:

Our office is low bandwidth due to a plumbing issue is abstract
Our office hours will end early due to plumbing issues is literal

Other examples:

agenda (use plan or intention)
llegals/illegal aliens (use undocumented immigrants or people without immigration status)
thought leader (describe person's specific accomplishments)
touchpoint (refer to actual components)
user testing (unless you're actually testing the users, use usability testing)

Verbs

Use the specific, literal action and sentence subject rather than a hard-to-understand abstraction of that action. For example:

empowered the use of waterfront is abstract
created public space on the waterfront is literal

Other examples:

collaborate
combating
countering
dialogue
facilitate
foster
impact (as a verb)
initiate

land (as verb)
leverage (implies financial)
progress (as a verb)
promote (implies advertising)
streamline
tackle (implies football)
transform
utilize

Overview
Getting Started
Logo
- Logo variations
- Logo usage
Color
Icons
- Font Awesome
Typography
- Type basics
- Fonts
- Headers
- Paragraphs
- Text alignment
- Links
- Lists
- Blockquotes
- Abbreviations
- Code
- Keystrokes
- Dividers
Forms
Navigation
- Buttons
- Button Groups
- Menus
- Tabs
- Pagination
Accessibility
Layout
Maps
Voice & Language

Getting Started

CDN

1. Place this link in the head of your HTML code:

2. And place this script at the end of your code, just before the closing </body> tag:

Upgrading

Still need help?

Download static assets

Installation

1. Install the package

2. Configure Sass load paths

3. Set up your .scss

4. JavaScript (optional)

Ember and Labs UI

Logo

Logo variations

Logo usage

Clearspace

Resolution

Logo don'ts

Color

Brand colors

Grayscale colors

Data viz colors

Red

Orange

Gold

Yellow

Chartreuse

Green

Teal

Aqua

Blue

Indigo

Purple

Fuchsia

Land Use colors

Color classes

Text colors

Background colors

Color accessibility

Icons

Font Awesome

Typography

Type basics

Inline formatting

Fonts

Headers

Header Level 1

Header Level 2

Header Level 3

Header Level 4

Header Level 5

Header Level 6

Paragraphs

Text alignment

Links

Never tell users to click here!

The target attribute

External links

Lists

Unordered lists

Ordered lists

Un-bulleted lists

Definition lists

Blockquotes

Abbreviations

Code

Keystrokes

Dividers

Forms

Text inputs

Text areas

Labels & placeholders

Select menus

Multi-select

Checkboxes & radio buttons

Radio buttons

Checkboxes

Fieldsets

Accessible fieldsets

2. And place this script at the end of your code, just before the closing `</body>` tag:

3. Set up your `.scss`