nyc-planning-style-guide
Version:
Base styles for NYC Department of City Planning (using Foundation for Sites)
296 lines (273 loc) • 15.1 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="logo" class="large-margin-bottom">Logo</h1>
<section>
<p>The NYC Planning logo should be used consistently to foster brand awareness.</p>
<div class="grid-x grid-margin-x">
<div class="cell large-8">
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"NYC Planning"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png"</span> /></span></code></pre></div><div class="callout xlarge-padding">
<img alt="NYC Planning" style="width:300px;" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />
</div>
</div>
<div class="cell large-4 text-small">
<p>
Various formats can be downloaded from
<a href="https://github.com/NYCPlanning/dcp-logo">github.com/NYCPlanning/dcp-logo</a>:
</p>
<ul>
<li><a href="https://github.com/NYCPlanning/dcp-logo/raw/master/dcp_logo.svg">SVG</a></li>
<li><a href="https://github.com/NYCPlanning/dcp-logo/raw/master/dcp_logo_772.png">PNG</a></li>
<li><a href="https://github.com/NYCPlanning/dcp-logo/raw/master/dcp_logo_black_772.png">PNG (Black)</a></li>
<li><a href="https://github.com/NYCPlanning/dcp-logo/raw/master/dcp_logo_white_772.png">PNG (White)</a></li>
</ul>
</div>
</div>
</section>
<section>
<h2 id="logo-variations">Logo variations <sup><a href="#logo-variations" class="silver"><i class="fas fa-link"></i></a></sup></h2>
<p>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.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-comment"><!-- Primary, two-color logo --></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"NYC Planning"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png"</span> /></span>
<span class="hljs-comment"><!-- White logo --></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"NYC Planning"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_white_772.png"</span> /></span>
<span class="hljs-comment"><!-- Black logo --></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"NYC Planning"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_black_772.png"</span> /></span></code></pre></div><div class="callout">
<div class="grid-x grid-padding-x large-up-3">
<div class="cell large-padding">
<img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />
<p class="text-small large-margin-top no-margin-bottom">Use the two-color version of the logo whenever possible</p>
</div>
<div class="cell large-padding bg-a11y-orange">
<img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_white_772.png" />
<p class="text-small large-margin-top no-margin-bottom">Use the white version of the logo on dark backgrounds</p>
</div>
<div class="cell large-padding bg-dcp-yellow">
<img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_black_772.png" />
<p class="text-small large-margin-top no-margin-bottom">Use the black version of the logo on light backgrounds</p>
</div>
</div>
</div>
</section>
<section>
<h2 id="clearspace">Clearspace <sup><a href="#clearspace" class="silver"><i class="fas fa-link"></i></a></sup></h2>
<div class="grid-x grid-margin-x">
<div class="cell large-4">
<div class="callout clear" style="padding:8%; position:relative;">
<img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />
<div style="background:rgba(255,0,0,0.2); position:absolute; top:0; right:0; bottom:auto; left:0; padding-top:8%;"></div>
<div style="background:rgba(255,0,0,0.2); position:absolute; top:0; right:0; bottom:0; left:auto; padding-right:8%;"></div>
<div style="background:rgba(255,0,0,0.2); position:absolute; top:auto; right:0; bottom:0; left:0; padding-bottom:8%;"></div>
<div style="background:rgba(255,0,0,0.2); position:absolute; top:0; right:auto; bottom:0; left:0; padding-left:8%;"></div>
</div>
</div>
<div class="cell large-auto">
<p>It's important to maintain enough space around the logo, allowing it to stand out and ensuring that it's easily identifiable.</p>
<p>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. </p>
</div>
</div>
</section>
<section>
<h2 id="resolution">Resolution <sup><a href="#resolution" class="silver"><i class="fas fa-link"></i></a></sup></h2>
<p>The PNG version of the logo is 722 × 373 pixels. Remember to consider this for @2x/retina screens. It's best not to display the raster PNG logo at sizes wider than 360 pixels — the logo will look great on high-resolution screens when automatically scaled to less than 1/2 its original size. For larger display sizes (or print), use vector SVG version.</p>
</section>
<section>
<h2 id="what-not-to-do">What not to do <sup><a href="#what-not-to-do" class="silver"><i class="fas fa-link"></i></a></sup></h2>
<div class="grid-x grid-margin-x large-up-4">
<div class="cell">
<div class="callout large-padding bg-green-muted">
<img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />
</div>
<p class="text-small large-margin-bottom"><i class="fas fa-ban fuchsia"></i> Do not place the two-color logo on colorful backgrounds</p>
</div>
<div class="cell">
<div class="callout large-padding" style="background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);">
<img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />
</div>
<p class="text-small large-margin-bottom"><i class="fas fa-ban fuchsia"></i> Do not place the logo on backgrounds that make it difficult to read</p>
</div>
<div class="cell">
<div class="callout clear large-padding">
<img style="transform:scale(0.2)" alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />
</div>
<p class="text-small large-margin-bottom"><i class="fas fa-ban fuchsia"></i> Do not shrink the logo smaller than its 50-pixel minimum width</p>
</div>
<div class="cell">
<div class="callout large-padding">
<img style="mix-blend-mode:hard-light;" alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />
</div>
<p class="text-small large-margin-bottom"><i class="fas fa-ban fuchsia"></i> Do not change the color of the logo</p>
</div>
<div class="cell">
<div class="callout clear large-padding">
<img style="width:100%;" alt="NYC Planning" src="/assets/img/bad-logo.png" />
</div>
<p class="text-small large-margin-bottom"><i class="fas fa-ban fuchsia"></i> Do not use a blurry or low-resolution version of the logo</p>
</div>
<div class="cell">
<div class="callout clear large-padding">
<img style="transform:rotate(-45deg);" alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />
</div>
<p class="text-small large-margin-bottom"><i class="fas fa-ban fuchsia"></i> Do not rotate the logo</p>
</div>
<div class="cell">
<div class="callout bg-white-smoke large-padding">
<img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_black_772.png" />
</div>
<p class="text-small large-margin-bottom"><i class="fas fa-ban fuchsia"></i> Do not use the black logo when the primary logo would read well</p>
</div>
<div class="cell">
<div class="callout bg-orange-light large-padding">
<img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_white_772.png" />
</div>
<p class="text-small large-margin-bottom"><i class="fas fa-ban fuchsia"></i> Do not use the white logo on light colored backgrounds</p>
</div>
</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 active">Logo</a>
<ul class="medium-margin-bottom text-small">
<li><a href="#logo-variations">Logo variations</a></li>
<li><a href="#clearspace">Clearspace</a></li>
<li><a href="#resolution">Resolution</a></li>
<li><a href="#what-not-to-do">What not to do</a></li>
</ul>
</li>
<li>
<a href="/color" class="text-weight-bold display-inline-block ">Color</a>
<ul class="medium-margin-bottom text-small">
</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>