nyc-planning-style-guide
Version:
Base styles for NYC Department of City Planning (using Foundation for Sites)
426 lines (395 loc) • 28.4 kB
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 Digital Style Guide</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="../assets/css/nyc-planning.css">
<style>
.header-logo {
max-height: 4.5rem;
}
.code-example code {
display: block;
padding: 1rem;
overflow-x: scroll;
margin-bottom: 1.5rem;
}
.is-stuck{
max-height: 100vh;
overflow: auto;
}
.code-example + .callout,
.code-example + table {
margin-top: calc(-1px - 1.5rem);
}
section + section {
margin-top: 3rem;
padding-top: 3rem;
border-top: 1px solid #d3d5d9;
}
section h4 {
margin-top: 1.5rem;
}
section .code-example + h4 {
margin-top: 0;
}
.callout.clear {
background-color: transparent;
border-color: transparent;
}
.color-swatch {
list-style: none;
margin: 0;
padding: 2.5rem 0.75rem 0.75rem;
line-height: 1.4;
}
</style>
</head>
<body id="top">
<header class="xlarge-padding-top large-padding-bottom bg-white-smoke">
<div class="grid-container">
<div class="grid-x text-center medium-text-left align-middle">
<div class="cell medium-shrink">
<img class="header-logo medium-margin-right medium-margin-bottom" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" alt="NYC Planning" />
</div>
<div class="cell medium-auto">
<h1 class="no-margin">Digital Style Guide</h1>
<p class="medium-margin-bottom">Standards, Code Snippets, & Assets</p>
</div>
<p class="cell medium-shrink no-margin show-for-medium">
<a href="https://github.com/NYCPlanning/nyc-planning-style-guide">
<i class="fab fa-github fa-2x small-margin text-light-gray"></i>
1.0.7
</a>
</p>
</div>
</div>
</header>
<div id="main-content" class="grid-container">
<div class="grid-x grid-margin-x">
<div class="medium-8 large-9 cell medium-order-2 large-padding-top large-padding-bottom">
<h1 id="color" class="large-margin-bottom">Color</h1>
<section>
<p>Promote strong brand recognition by using a distinct and reduced color palette, featuring only two hues (orange and yellow) and subtle shades of gray.</p>
<p>The primary brand color is <code>dcp-orange <i class="fas fa-square dcp-orange"></i></code>. It's the color of the "NYC" in our logo, and it can be used for large blocks of color. The slightly darker <code>a11y-orange <i class="fas fa-square a11y-orange"></i></code> increases accessibility by adding more contrast, and is the default color for linked text and button backgrounds.</p>
<p>The secondary brand color is <code>dcp-yellow <i class="fas fa-square dcp-yellow"></i></code>. Use it in small amounts as an accent and for secondary UI elements. The lighter <code>a11y-yellow <i class="fas fa-square a11y-yellow"></i></code> increases accessibility and can be used for linked text on darker backgrounds.</p>
<ul>
<li>Orange implies clickability in our products. Do not use orange to highlight or emphasize words.</li>
<li>Be sure to use the <a href="https://webaim.org/resources/contrastchecker/">Color Contrast Checker <i class="fas fa-external-link-alt"></i></a> to choose accessible colors.</li>
<li>Do not overuse color. Color should not cover the majority of the page.</li>
<li>Avoid dark UIs. Instead, keep products light and inviting, using subtle grays to create visual hierarchy—the default background color of the <code><body></code> element is <code>off-white <i class="fas fa-square off-white"></i></code>.</li>
</ul>
</section>
<section>
<h3 id="brand-colors">Brand colors <sup><a href="#brand-colors" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<div class="grid-x small-up-1 large-up-2 medium-margin-bottom font-mono large-text-right">
<ul class="color-swatch cell bg-dcp-orange" data-colorname="dcp-orange"></ul>
<ul class="color-swatch cell bg-a11y-orange" data-colorname="a11y-orange"></ul>
<ul class="color-swatch cell bg-dcp-yellow" data-colorname="dcp-yellow"></ul>
<ul class="color-swatch cell bg-a11y-yellow" data-colorname="a11y-yellow"></ul>
</div>
</section>
<section>
<h3 id="grayscale-colors">Grayscale colors <sup><a href="#grayscale-colors" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Avoid pure black <code>#000</code> and white <code>#fff</code>, as text/background color combinations with too high of a contrast can decrease legibility and cause eye strain.</p>
<div class="grid-x medium-margin-bottom align-middle">
<ul class="color-swatch cell large-4 large-text-right font-mono bg-black" data-colorname="black"></ul>
<ul class="color-swatch cell large-4 large-text-right font-mono bg-charcoal" data-colorname="charcoal"></ul>
<ul class="color-swatch cell large-4 large-text-right font-mono bg-dark-gray" data-colorname="dark-gray"></ul>
<ul class="color-swatch cell large-4 large-text-right font-mono bg-gray" data-colorname="gray"></ul>
<ul class="color-swatch cell large-4 large-text-right font-mono bg-light-gray" data-colorname="light-gray"></ul>
<ul class="color-swatch cell large-4 large-text-right font-mono bg-silver" data-colorname="silver"></ul>
<ul class="color-swatch cell large-4 large-text-right font-mono bg-white-smoke" data-colorname="white-smoke"></ul>
<ul class="color-swatch cell large-4 large-text-right font-mono bg-off-white" data-colorname="off-white"></ul>
<ul class="color-swatch cell large-4 large-text-right font-mono bg-white" data-colorname="white"></ul>
</div>
</section>
<section>
<h3 id="data-viz-colors">Data viz colors <sup><a href="#data-viz-colors" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Our data viz color palette has been optimized to increase the visual distinction of 12 hues in varying saturation and lightness, <a href="https://medium.com/nyc-planning-digital/experimenting-with-planning-color-standards-15b591d2a90c">with consideration for APA's Land-Based Classification Standards</a>. Learn more about choosing colors in the <a href="#color-accessibility" data-smooth-scroll>Color Accessibility</a> section.</p>
<h4 id="red">Red</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
<ul class="color-swatch cell bg-red-white" data-colorname="red-white"></ul>
<ul class="color-swatch cell bg-red-light" data-colorname="red-light"></ul>
<ul class="color-swatch cell bg-red" data-colorname="red"></ul>
<ul class="color-swatch cell bg-red-dim" data-colorname="red-dim"></ul>
<ul class="color-swatch cell bg-red-dark" data-colorname="red-dark"></ul>
<ul class="color-swatch cell bg-red-muted" data-colorname="red-muted"></ul>
</div>
<h4 id="orange">Orange</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
<ul class="color-swatch cell bg-orange-white" data-colorname="orange-white"></ul>
<ul class="color-swatch cell bg-orange-light" data-colorname="orange-light"></ul>
<ul class="color-swatch cell bg-orange" data-colorname="orange"></ul>
<ul class="color-swatch cell bg-orange-dim" data-colorname="orange-dim"></ul>
<ul class="color-swatch cell bg-orange-dark" data-colorname="orange-dark"></ul>
<ul class="color-swatch cell bg-orange-muted" data-colorname="orange-muted"></ul>
</div>
<h4 id="gold">Gold</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
<ul class="color-swatch cell bg-gold-white" data-colorname="gold-white"></ul>
<ul class="color-swatch cell bg-gold-light" data-colorname="gold-light"></ul>
<ul class="color-swatch cell bg-gold" data-colorname="gold"></ul>
<ul class="color-swatch cell bg-gold-dim" data-colorname="gold-dim"></ul>
<ul class="color-swatch cell bg-gold-dark" data-colorname="gold-dark"></ul>
<ul class="color-swatch cell bg-gold-muted" data-colorname="gold-muted"></ul>
</div>
<h4 id="yellow">Yellow</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
<ul class="color-swatch cell bg-yellow-white" data-colorname="yellow-white"></ul>
<ul class="color-swatch cell bg-yellow-light" data-colorname="yellow-light"></ul>
<ul class="color-swatch cell bg-yellow" data-colorname="yellow"></ul>
<ul class="color-swatch cell bg-yellow-dim" data-colorname="yellow-dim"></ul>
<ul class="color-swatch cell bg-yellow-dark" data-colorname="yellow-dark"></ul>
<ul class="color-swatch cell bg-yellow-muted" data-colorname="yellow-muted"></ul>
</div>
<h4 id="chartreuse">Chartreuse</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
<ul class="color-swatch cell cell bg-chartreuse-white" data-colorname="chartreuse-white"></ul>
<ul class="color-swatch cell cell bg-chartreuse-light" data-colorname="chartreuse-light"></ul>
<ul class="color-swatch cell bg-chartreuse" data-colorname="chartreuse"></ul>
<ul class="color-swatch cell bg-chartreuse-dim" data-colorname="chartreuse-dim"></ul>
<ul class="color-swatch cell bg-chartreuse-dark" data-colorname="chartreuse-dark"></ul>
<ul class="color-swatch cell bg-chartreuse-muted" data-colorname="chartreuse-muted"></ul>
</div>
<h4 id="green">Green</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
<ul class="color-swatch cell bg-green-white" data-colorname="green-white"></ul>
<ul class="color-swatch cell bg-green-light" data-colorname="green-light"></ul>
<ul class="color-swatch cell bg-green" data-colorname="green"></ul>
<ul class="color-swatch cell bg-green-dim" data-colorname="green-dim"></ul>
<ul class="color-swatch cell bg-green-dark" data-colorname="green-dark"></ul>
<ul class="color-swatch cell bg-green-muted" data-colorname="green-muted"></ul>
</div>
<h4 id="teal">Teal</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
<ul class="color-swatch cell bg-teal-white" data-colorname="teal-white"></ul>
<ul class="color-swatch cell bg-teal-light" data-colorname="teal-light"></ul>
<ul class="color-swatch cell bg-teal" data-colorname="teal"></ul>
<ul class="color-swatch cell bg-teal-dim" data-colorname="teal-dim"></ul>
<ul class="color-swatch cell bg-teal-dark" data-colorname="teal-dark"></ul>
<ul class="color-swatch cell bg-teal-muted" data-colorname="teal-muted"></ul>
</div>
<h4 id="aqua">Aqua</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
<ul class="color-swatch cell bg-aqua-white" data-colorname="aqua-white"></ul>
<ul class="color-swatch cell bg-aqua-light" data-colorname="aqua-light"></ul>
<ul class="color-swatch cell bg-aqua" data-colorname="aqua"></ul>
<ul class="color-swatch cell bg-aqua-dim" data-colorname="aqua-dim"></ul>
<ul class="color-swatch cell bg-aqua-dark" data-colorname="aqua-dark"></ul>
<ul class="color-swatch cell bg-aqua-muted" data-colorname="aqua-muted"></ul>
</div>
<h4 id="blue">Blue</h4>
<div class="grid-x small-up-1 large-up-6 medium-margin-bottom font-mono large-text-right">
<ul class="color-swatch cell bg-blue-white" data-colorname="blue-white"></ul>
<ul class="color-swatch cell bg-blue-light" data-colorname="blue-light"></ul>
<ul class="color-swatch cell bg-blue" data-colorname="blue"></ul>
<ul class="color-swatch cell bg-blue-dim" data-colorname="blue-dim"></ul>
<ul class="color-swatch cell bg-blue-dark" data-colorname="blue-dark"></ul>
<ul class="color-swatch cell bg-blue-muted" data-colorname="blue-muted"></ul>
</div>
<h4 id="indigo">Indigo</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
<ul class="color-swatch cell bg-indigo-white" data-colorname="indigo-white"></ul>
<ul class="color-swatch cell bg-indigo-light" data-colorname="indigo-light"></ul>
<ul class="color-swatch cell bg-indigo" data-colorname="indigo"></ul>
<ul class="color-swatch cell bg-indigo-dim" data-colorname="indigo-dim"></ul>
<ul class="color-swatch cell bg-indigo-dark" data-colorname="indigo-dark"></ul>
<ul class="color-swatch cell bg-indigo-muted" data-colorname="indigo-muted"></ul>
</div>
<h4 id="purple">Purple</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
<ul class="color-swatch cell bg-purple-white" data-colorname="purple-white"></ul>
<ul class="color-swatch cell bg-purple-light" data-colorname="purple-light"></ul>
<ul class="color-swatch cell bg-purple" data-colorname="purple"></ul>
<ul class="color-swatch cell bg-purple-dim" data-colorname="purple-dim"></ul>
<ul class="color-swatch cell bg-purple-dark" data-colorname="purple-dark"></ul>
<ul class="color-swatch cell bg-purple-muted" data-colorname="purple-muted"></ul>
</div>
<h4 id="fuchsia">Fuchsia</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
<ul class="color-swatch cell bg-fuchsia-white" data-colorname="fuchsia-white"></ul>
<ul class="color-swatch cell bg-fuchsia-light" data-colorname="fuchsia-light"></ul>
<ul class="color-swatch cell bg-fuchsia" data-colorname="fuchsia"></ul>
<ul class="color-swatch cell bg-fuchsia-dim" data-colorname="fuchsia-dim"></ul>
<ul class="color-swatch cell bg-fuchsia-dark" data-colorname="fuchsia-dark"></ul>
<ul class="color-swatch cell bg-fuchsia-muted" data-colorname="fuchsia-muted"></ul>
</div>
</section>
<section>
<h3 id="land-use-colors">Land Use colors <sup><a href="#land-use-colors" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<ul>
<li><code>lu-peach <i class="fas fa-square text-lu-peach"></i></code></li>
<li><code>lu-yellow <i class="fas fa-square text-lu-yellow"></i></code></li>
<li><code>lu-magenta <i class="fas fa-square text-lu-magenta"></i></code></li>
<li><code>lu-red <i class="fas fa-square text-lu-red"></i></code></li>
<li><code>lu-orange <i class="fas fa-square text-lu-orange"></i></code></li>
<li><code>lu-pink <i class="fas fa-square text-lu-pink"></i></code></li>
<li><code>lu-green <i class="fas fa-square text-lu-green"></i></code></li>
<li><code>lu-blue <i class="fas fa-square text-lu-blue"></i></code></li>
<li><code>lu-lavendar <i class="fas fa-square text-lu-lavendar"></i></code></li>
<li><code>lu-silver <i class="fas fa-square text-lu-silver"></i></code></li>
<li><code>lu-gray <i class="fas fa-square text-lu-gray"></i></code></li>
</ul>
</section>
<section>
<h3 id="color-classes">Color classes <sup><a href="#color-classes" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<h4 id="text-colors">Text colors</h4>
<p>Use the <code>.text-[color]</code> classes to set the <strong>text color</strong> of an element.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-green-dark"</span>></span>This whole paragraph is dark green.<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>This one is black with a <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-purple"</span>></span>purple<span class="hljs-tag"></<span class="hljs-title">span</span>></span> word.<span class="hljs-tag"></<span class="hljs-title">p</span>></span></code></pre></div><div class="callout">
<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>
</div>
<h4 id="background-colors">Background colors</h4>
<p>Use the <code>.bg-[color]</code> classes to set an element's <strong>background color</strong> and its default <strong>text color</strong> (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>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"bg-yellow"</span>></span>This element has a yellow background, which defaults to black text.<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"bg-blue-dark"</span>></span>This element has a dark blue background, which defaults to white text.<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"bg-chartreuse-light text-green-dark"</span>></span>This element has a light chartreuse background and dark green text (which overrides its default black text).<span class="hljs-tag"></<span class="hljs-title">p</span>></span></code></pre></div><div class="callout">
<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>
</div>
</section>
<section>
<h3 id="color-accessibility">Color accessibility <sup><a href="#color-accessibility" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<div class="grid-x grid-margin-x">
<div class="cell large-7">
<p>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.</p>
<ul class="no-bullet">
<li><i class="fas fa-ban fuchsia"></i> Do not set light type on light backgrounds</li>
<li><i class="fas fa-ban fuchsia"></i> Do not set dark type on dark backgrounds</li>
<li><i class="fas fa-ban fuchsia"></i> Do not relying purely on color for visual cues</li>
</ul>
</div>
<div class="cell large-5">
<p class="text-small bg-silver text-dcp-orange small-padding">This isn't readable for those with low vision.</p>
<p class="text-small bg-charcoal text-dcp-orange small-padding">This isn't readable for those with low vision.</p>
<p class="text-small bg-blue-dark text-gray small-padding">This isn't readable for those with low vision.</p>
<p class="text-small bg-green-light text-green small-padding">This isn't readable for those with low vision.</p>
</div>
</div>
</section>
<section>
<h3 id="badges-and-labels">Badges & Labels <sup><a href="#badges-and-labels" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Badges and Labels are convenient ways to add color and shape to UI elements.</p>
<p>The <code>.badge</code> class is useful for indicating out number of items. <em>Note: Badges are not good for large numbers, as the circle stretches to an oval:</em> <span class="badge">525,600</span></p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">strong</span> <span class="hljs-attribute">aria-describedby</span>=<span class="hljs-value">"messageCount"</span>></span>Unread Messages<span class="hljs-tag"></<span class="hljs-title">strong</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"badge"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"messageCount"</span>></span>1<span class="hljs-tag"></<span class="hljs-title">span</span>></span></code></pre></div><div class="callout large-margin-bottom">
<strong aria-describedby="messageCount">Unread Messages</strong>
<span class="badge" id="messageCount">1</span>
</div>
<p>The <code>.label</code> class is a useful inline style that's useful for calling out metadata such as tags or when something was updated.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">p</span>></span> Tags:
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label"</span>></span>cookies<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label"</span>></span>42<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label"</span>></span>bicycle<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"></<span class="hljs-title">p</span>></span></code></pre></div><div class="callout large-margin-bottom">
<p> Tags:
<span class="label">cookies</span>
<span class="label">42</span>
<span class="label">bicycle</span>
</p>
</div>
<p>Use color classes to change the color of badges and labels. Be sure to <a href="https://webaim.org/resources/contrastchecker/">check the contrast</a> when choosing colors. Be mindful not to make them look clickable if they aren't — remember, <a href="#color" data-smooth-scroll>orange implies clickable</a></p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"badge bg-yellow-light a11y-orange"</span>></span>1<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"badge bg-chartreuse-dark"</span>></span>2<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"badge bg-silver black"</span>></span>3<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"badge bg-fuchsia"</span>></span>45<span class="hljs-tag"></<span class="hljs-title">span</span>></span></code></pre></div><div class="callout">
<span class="badge bg-yellow-light a11y-orange">1</span>
<span class="badge bg-chartreuse-dark">2</span>
<span class="badge bg-silver black">3</span>
<span class="badge bg-fuchsia">45</span>
</div>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label"</span>></span>Updated 7/23/19<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label bg-chartreuse-light text-chartreuse-dark"</span>></span>cookies<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label bg-chartreuse-dark"</span>></span>42<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label bg-fuchsia"</span>></span>bicycle<span class="hljs-tag"></<span class="hljs-title">span</span>></span></code></pre></div><div class="callout">
<span class="label">Updated 7/23/19</span>
<span class="label bg-chartreuse-light text-chartreuse-dark">cookies</span>
<span class="label bg-chartreuse-dark">42</span>
<span class="label bg-fuchsia">bicycle</span>
</div>
</section>
</div>
<div class="medium-4 large-3 cell medium-order-1" data-sticky-container>
<div class="sticky large-padding-top large-padding-bottom" data-sticky data-margin-top="0" data-anchor="main-content">
<!-- <input id="showCodesCheckbox" type="checkbox"><label for="showCodesCheckbox">Show Code Examples</label> -->
<ul class="no-bullet" data-smooth-scroll data-animation-easing="swing">
<li>
<a href="/" class="text-weight-bold display-inline-block ">Overview</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
<li>
<a href="/getting-started" class="text-weight-bold display-inline-block ">Getting Started</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
<li>
<a href="/logo" class="text-weight-bold display-inline-block ">Logo</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
<li>
<a href="/color" class="text-weight-bold display-inline-block active">Color</a>
<ul class="medium-margin-bottom text-small">
<li><a href="#brand-colors">Brand colors</a></li>
<li><a href="#grayscale-colors">Grayscale colors</a></li>
<li><a href="#data-viz-colors">Data viz colors</a></li>
<li><a href="#color-classes">Color classes</a></li>
<li><a href="#color-accessibility">Color accessibility</a></li>
<li><a href="#badges-and-labels">Badges & Labels</a></li>
</ul>
</li>
<li>
<a href="/icons" class="text-weight-bold display-inline-block ">Icons</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
<li>
<a href="/typography" class="text-weight-bold display-inline-block ">Typography</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
<li>
<a href="/forms" class="text-weight-bold display-inline-block ">Forms</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
<li>
<a href="/navigation" class="text-weight-bold display-inline-block ">Navigation</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
<li>
<a href="/accessibility" class="text-weight-bold display-inline-block ">Accessibility</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
<li>
<a href="/layout" class="text-weight-bold display-inline-block ">Layout</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
<li>
<a href="/maps" class="text-weight-bold display-inline-block ">Maps</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
<li>
<a href="/voice-and-language" class="text-weight-bold display-inline-block ">Voice & Language</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/nyc-planning.js"></script>
</body>
</html>