UNPKG

nyc-planning-style-guide

Version:

Base styles for NYC Department of City Planning (using Foundation for Sites)

426 lines (395 loc) 28.4 kB
<!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 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, &amp; 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&#39;s the color of the &quot;NYC&quot; 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>&lt;body&gt;</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&#39;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">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-green-dark"</span>&gt;</span>This whole paragraph is dark green.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>This one is black with a <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-purple"</span>&gt;</span>purple<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span> word.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</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&#39;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">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"bg-yellow"</span>&gt;</span>This element has a yellow background, which defaults to black text.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"bg-blue-dark"</span>&gt;</span>This element has a dark blue background, which defaults to white text.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"bg-chartreuse-light text-green-dark"</span>&gt;</span>This element has a light chartreuse background and dark green text (which overrides its default black text).<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</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">&lt;<span class="hljs-title">strong</span> <span class="hljs-attribute">aria-describedby</span>=<span class="hljs-value">"messageCount"</span>&gt;</span>Unread Messages<span class="hljs-tag">&lt;/<span class="hljs-title">strong</span>&gt;</span> <span class="hljs-tag">&lt;<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>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</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&#39;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">&lt;<span class="hljs-title">p</span>&gt;</span> Tags: <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label"</span>&gt;</span>cookies<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label"</span>&gt;</span>42<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label"</span>&gt;</span>bicycle<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</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&#39;t &mdash; 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">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"badge bg-yellow-light a11y-orange"</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"badge bg-chartreuse-dark"</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"badge bg-silver black"</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"badge bg-fuchsia"</span>&gt;</span>45<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</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">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label"</span>&gt;</span>Updated 7/23/19<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label bg-chartreuse-light text-chartreuse-dark"</span>&gt;</span>cookies<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label bg-chartreuse-dark"</span>&gt;</span>42<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label bg-fuchsia"</span>&gt;</span>bicycle<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</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 &amp; 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 &amp; 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>