FRBSF.org Pattern Library

MENU
  • CSS
  • Components
  • JavaScript
  • Templates
  • Appendix
Typography Colors Icons Buttons Images Table

CSS

Foundational styles applied to FRBSF.org. We use the CSS preprocessor Sass.

1-1 Typography

Documentation of typographical styles across the site.

1-1.1 Font

The site uses Roboto as its main font. Base size is 20px.

Backup font is Helvetica. Use Helvetica Neue as default Facebook Instant Articles font.

1-1.2 Font weights

We use Sass variables for font weights.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+

<p style="font-weight: [modifier class]">ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
1234567890!@#$%^&*()_+</p>

$thin .100 weight

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+

$light .300 weight

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+

$normal .400 weight

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+

$medium .500 weight

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+

$bold .700 weight

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+

1-1.3 Foundational headings

Default styling of page headings. These are semantic headings with no classes.

(There will, however, be cases when the semantic won't match the visual hierarchy of a page. For example, a complex page may have several semantic h1's, but some of them may visually be required to look like h2. In those cases, use heading classes to make the page visually consistent.)

Note about h1: All h1s have font-weight: 300 or $light, except on mobile viewports (<= 480), at which point they become font-weight: 500 or $medium.

Page Title

Primary Sub-heading

Secondary Sub-heading

Related or In This Section heading

Article Title on Archive Pages (event, blog, and publication)
<h1>Page Title</h1>
<h2>Primary Sub-heading</h2>
<h3>Secondary Sub-heading</h3>
<h4>Related or In This Section heading</h4>
<h5>Article Title on Archive Pages (event, blog, and publication)</h5>

1-1.4 Additional headings

Headings with special modifier classes.

Economic Letter sub-heading

FRBSF Economic Letter

Section link

Publications section link

Blog author

Additional info box heading

Follow Us box heading

Headcrumb heading style

<h2 class="secTitle">Economic Letter sub-heading</h2>
<p id="pubName">
  <span id="sf_eltop">FRBSF</span> <span id="pub_title">Economic Letter</span>
</p>
<h2 class="landing-section-title"><a href="#">Section link</a></h2>
<h2 class="margin-bottom-none padding-top-add"><a href="#">Publications section link</a></h2>
<h3 class="author vcard"><a href="#">Blog author</a></h3>
<h3 class="heading-bg">Additional info box heading</h3>
<h3 class="landing-follow">Follow Us box heading</h3>
<header class="section-header">
    <h4><a href="#">Headcrumb heading style</a></h4>
</header>

1-1.5 Paragraph

Default styling of paragraphs.

The quick brown fox jumps over the lazy dog. Foxy parsons quiz and cajole the lovably dim wiki-girl. Watch "Jeopardy!", Alex Trebek's fun TV quiz game. How razorback-jumping frogs can level six piqued gymnasts! All questions asked by five watched experts—amaze the judge.

<p>The quick brown fox jumps over the lazy dog. Foxy parsons quiz and cajole the
lovably dim wiki-girl. Watch "Jeopardy!", Alex Trebek's fun TV quiz game. How
razorback-jumping frogs can level six piqued gymnasts! All questions asked by
five watched experts—amaze the judge.</p>

1-1.6 Lists

Default styling of lists.

  • A list item
  • A list item
  • A list item
<ul class="ul [modifier class]">
  <li>A list item</li>
  <li>A list item</li>
  <li>A list item</li>
</ul>

Use short-list for no padding between list items. .short-list

  • A list item
  • A list item
  • A list item

Use for bulleted press release highlights. .subhead

  • A list item
  • A list item
  • A list item

1-1.7 Blockquote

Default styling of blockquotes.

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.
<blockquote>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.</blockquote>

1-1.8 Pull quote

General pull quote style. Use in excerpts from interviews employed as graphic elements. Typically followed by quote attribution.

pullquote class uses Helvetica to avoid Roboto quote marks.

“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.”

John, Quote author
<blockquote class="pullquote">
<p>“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.”</p>
    <footer>John, Quote author</footer>
</blockquote>

1-1.9 Pull quote (Jobs)

The Jobs page uses a special pull quote class for its multimedia gallery.

“The quick brown fox jumps over the lazy dog. Watch 'Jeopardy!', Alex Trebek's fun TV quiz game.”

Jane, Quote author

<article role="article" class="m-all t-10of12 d-10of12 t-o-1of12 d-o-1of12 page-careers">
  <div id="jp_container" class="demo-container">
    <div class="slideshow_large">
        <div class="slide_large active" id="slide_large1" style="display: block;">
            <img src="http://placehold.it/550x375" width="550" height="375" class="alignnone size-full" />
        <div class="quote">
          <p>“The quick brown fox jumps over the lazy dog. Watch 'Jeopardy!', Alex Trebek's fun TV quiz game.”</p>
          <p class="quote-author">Jane, Quote author</p>
        </div>
      </div>
    </div>
  </div>
</article>
<p class="cf"></p>

1-1.11 Chart or table title

Title style for charts and tables (Economic Letter).

Table or Chart Title
Description of table or chart

<div class="Rchart">
  <p>Table or Chart Title<br>
  Description of table or chart</p>
</div>

1-1.12 Chart or table footer

Footnote style for charts and tables (Economic Letter).

Note: Footnote about or source of chart or table.

<div class="Rchart">
  <p class="note">Note: Footnote about or source of chart or table.</p>
</div>

1-1.13 Superscript

Superscript style for text that requires it, for example, President's Speeches footnotes. Link it to the corresponding citation or footnote at the bottom of the page.

Footnoted phrase1

<p>Footnoted phrase<a class="footnotenumbersraised">1</a></p>

1-1.14 Center

Use class aligncenter to center an element.

Centered element

<p class="aligncenter">Centered element</p>
<p class="aligncenter"><img src="http://placehold.it/450x280"></p>

1-1.15 Disclaimer

Style for boilerplate language required on some pages.

The views expressed are not necessarily those of the Federal Reserve Bank of San Francisco or of the Federal Reserve System. 

<footer>
  <p class="disclaimer">
    <small>The views expressed are not necessarily those of the Federal Reserve Bank of San Francisco or of the Federal Reserve System.</small>
  </p>
</footer>

1-2 Colors

These are the approved colors for use on the site. We use Sass variables to set colors. (Check out "Naming Sass Color Variables" and "Better Sass variables through abstraction").

1-2.1 Foundational colors

Color naming convention is based on the writings of Geoff Graham ("Naming SASS Color Variables") and Craig Dennis ("Better SASS variables through abstraction").

$white-smoke: #f6f5f4

$pampas: #f1eeec

$gallery: #ebebeb

$swiss-coffee: #e1dddb

$silver: #cacaca

$cottonseed: #c1bbb9

$gray: #8c8c8c

$dove-gray: #6e6e6e

$tundora: #4e4e4e

$mine-shaft: #333

$napa: #aba091

$gimblet: #be9f72

$clay-creek: #837a57

$dark-goldenrod: #c39709

$desert: #ae6320

$orange-roughy: #a64a36

$tabasco: #96200f

$burnt-umber: #883529

$ironstone: #784139

$antique-bronze: #753d05

$walnut: #6c441c

$black-rose: #6f0733

$narvik: #eceee5

$amulet: #7c936f

$finlandia: #516e5c

$limeade: #518000

$chalet: #497037

$green-pea: #215b33

$mallard: #2e4520

$horizon: #6291a6

$blue-lagoon: #026877

$boston-blue: #3d7dba

$endeavor: #0256a5

$prussian-blue: #022951

$waikawa-gray: #596a9a

$blue-marguerite: #827ac9

<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #f6f5f4; color: #000">
  <p class="aligncenter">$white-smoke: #f6f5f4</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #f1eeec; color: #000">
  <p class="aligncenter">$pampas: #f1eeec</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #ebebeb; color: #000">
  <p class="aligncenter">$gallery: #ebebeb</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #e1dddb; color: #000">
  <p class="aligncenter">$swiss-coffee: #e1dddb</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #cacaca; color: #000">
  <p class="aligncenter">$silver: #cacaca</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #c1bbb9; color: #fff">
  <p class="aligncenter">$cottonseed: #c1bbb9</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #8c8c8c; color: #fff">
  <p class="aligncenter">$gray: #8c8c8c</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #6e6e6e; color: #fff">
  <p class="aligncenter">$dove-gray: #6e6e6e</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #4e4e4e; color: #fff">
  <p class="aligncenter">$tundora: #4e4e4e</p></article>
</main>
<p class="cf"></p>
<p></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #333; color: #fff">
  <p class="aligncenter">$mine-shaft: #333</p></article>
</main>
<p class="cf"></p>
  <article class="m-all t-4of12 d-4of12" style="background: #aba091; color: #fff">
  <p class="aligncenter">$napa: #aba091</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #be9f72; color: #fff">
  <p class="aligncenter">$gimblet: #be9f72</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #837a57; color: #fff">
  <p class="aligncenter">$clay-creek: #837a57</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #c39709; color: #fff">
  <p class="aligncenter">$dark-goldenrod: #c39709</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #ae6320; color: #fff">
  <p class="aligncenter">$desert: #ae6320</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #a64a36; color: #fff">
  <p class="aligncenter">$orange-roughy: #a64a36</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #96200f; color: #fff">
  <p class="aligncenter">$tabasco: #96200f</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #883529; color: #fff">
  <p class="aligncenter">$burnt-umber: #883529</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #784139; color: #fff">
  <p class="aligncenter">$ironstone: #784139</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #753d05; color: #fff">
  <p class="aligncenter">$antique-bronze: #753d05</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #6c441c; color: #fff">
  <p class="aligncenter">$walnut: #6c441c</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #6f0733; color: #fff">
  <p class="aligncenter">$black-rose: #6f0733</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #eceee5; color: #000">
  <p class="aligncenter">$narvik: #eceee5</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #7c936f; color: #fff">
  <p class="aligncenter">$amulet: #7c936f</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #516e5c; color: #fff">
  <p class="aligncenter">$finlandia: #516e5c</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #518000; color: #fff">
  <p class="aligncenter">$limeade: #518000</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #497037; color: #fff">
  <p class="aligncenter">$chalet: #497037</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #215b33; color: #fff">
  <p class="aligncenter">$green-pea: #215b33</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #2e4520; color: #fff">
  <p class="aligncenter">$mallard: #2e4520</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #6291a6; color: #fff">
  <p class="aligncenter">$horizon: #6291a6</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #026877; color: #fff">
  <p class="aligncenter">$blue-lagoon: #026877</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #3d7dba; color: #fff">
  <p class="aligncenter">$boston-blue: #3d7dba</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #0256a5; color: #fff">
  <p class="aligncenter">$endeavor: #0256a5</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #022951; color: #fff">
  <p class="aligncenter">$prussian-blue: #022951</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #596a9a; color: #fff">
  <p class="aligncenter">$waikawa-gray: #596a9a</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #827ac9; color: #fff">
  <p class="aligncenter">$blue-marguerite: #827ac9</p></article>
</main>
<p class="cf"></p>

1-2.2 Department section colors

(Text color #fff used only to make text readable.)

$er-color: $black-rose

$banking-color: $tabasco

$education-color: $blue-lagoon

$cd-color: $desert

$cash-color: $green-pea

<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #6f0733; color: #fff">
  <p class="aligncenter">$er-color: $black-rose</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #96200f; color: #fff">
  <p class="aligncenter">$banking-color: $tabasco</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #026877; color: #fff">
  <p class="aligncenter">$education-color: $blue-lagoon</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #ae6320; color: #fff">
  <p class="aligncenter">$cd-color: $desert</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #215b33; color: #fff">
  <p class="aligncenter">$cash-color: $green-pea</p></article>
</main>
<p class="cf"></p>

1-2.3 Graphics colors (#unreserved)

These are used for #unreserved landing block colors. (Text color #fff used only to make text readable.)

$graphics-blue: $boston-blue

$graphics-red: $orange-roughy

$graphics-yellow: $dark-goldenrod

$graphics-green: $limeade

$graphics-purple: $blue-marguerite

$graphics-beige: $napa

$graphics-sage: $finlandia

$graphics-teal: $horizon

$graphics-dark-red: $ironstone

<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #3d7dba; color: #fff">
  <p class="aligncenter">$graphics-blue: $boston-blue</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #a64a36; color: #fff">
  <p class="aligncenter">$graphics-red: $orange-roughy</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #c39709; color: #fff">
  <p class="aligncenter">$graphics-yellow: $dark-goldenrod</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #518000; color: #fff">
  <p class="aligncenter">$graphics-green: $limeade</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #827ac9; color: #fff">
  <p class="aligncenter">$graphics-purple: $blue-marguerite</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #aba091; color: #fff">
  <p class="aligncenter">$graphics-beige: $napa</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #516e5c; color: #fff">
  <p class="aligncenter">$graphics-sage: $finlandia</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #6291a6; color: #fff">
  <p class="aligncenter">$graphics-teal: $horizon</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #784139; color: #fff">
  <p class="aligncenter">$graphics-dark-red: $ironstone</p></article>
</main>
<p class="cf"></p>

1-2.4 Text and background

Black text color and white background. (Note: "color: #fff" and "#333" only used to make text readable.) When there's no "$" sign before a value, as in "white" below, it means built-in CSS value is being used.

$black: $mine-shaft

$white: white

<main class="m-all t-all d-all cf">
  <article class="m-all t-4of8 d-4of8" style="background: #333; color: #fff">
  <p class="aligncenter">$black: $mine-shaft</p></article>
  <article class="m-all t-4of8 d-4of8" style="background: #fff; color: #333">
  <p class="aligncenter">$white: white</p></article>
</main>
<p class="cf"></p>

1-2.5 Gray background colors

Shades of gray. (Note: "color: #fff" and "#333" only used to make text readable.)

$pale-gray: $white-smoke

$light-gray: $gallery

$nav-btn-gray: $silver

$medium-gray: $dove-gray

$gray

$coal-gray: $tundora

$sand-gray: $pampas

$lt-sand-gray: $swiss-coffee

$med-sand-gray: $cottonseed

<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #f6f5f4; color: #333">
  <p class="aligncenter">$pale-gray: $white-smoke</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #ebebeb; color: #333">
  <p class="aligncenter">$light-gray: $gallery</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #cacaca; color: #333">
  <p class="aligncenter">$nav-btn-gray: $silver</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #6e6e6e; color: #fff">
  <p class="aligncenter">$medium-gray: $dove-gray</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #8c8c8c; color: #fff">
  <p class="aligncenter">$gray</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #4e4e4e; color: #fff">
  <p class="aligncenter">$coal-gray: $tundora</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #f1eeec; color: #333">
  <p class="aligncenter">$sand-gray: $pampas</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #e1dddb; color: #333">
  <p class="aligncenter">$lt-sand-gray: $swiss-coffee</p></article>
  <!--Games not-selected button background color-->
  <article class="m-all t-4of12 d-4of12" style="background: #c1bbb9; color: #333">
  <p class="aligncenter">$med-sand-gray: $cottonseed</p></article>
  <!--Games not-selected button text-->
</main>
<p class="cf"></p>

1-2.6 Border and disabled gray

$border-color: $light-gray

$disabled-gray: $medium-gray

<main class="m-all t-all d-all cf">
  <article class="m-all t-4of8 d-4of8" style="color: #333; border: solid 2px #ebebeb;">
  <p class="aligncenter">$border-color: $light-gray</p></article>
  <article class="m-all t-4of8 d-4of8" style="background: #6e6e6e; color: #fff">
  <p class="aligncenter">$disabled-gray: $medium-gray</p></article>
</main>
<p class="cf"></p>

1-2.7 Text color

Text color (black).

Use $black ($mineshaft) for text color.

<p style="color: #333">Use $black ($mineshaft) for text color.</p>

1-2.8 Link color

Link color, hover color.

Link and hover color in action.

Sass formula:

$link-color: $blue

$link-hover: darken($link-color, 9%)

<a href="#">Link and hover color in action.</a>
<p>Sass formula:</p>
<p>$link-color: $blue</p>
<p>$link-hover: darken($link-color, 9%)</p>

1-2.9 Grays for reference lines and to accentuate focus

$pale-gray: $white-smoke

$sand-gray: $pampas

$light-gray: $gallery

$gray

$medium-gray: $dove-gray

$coal-gray: $tundora

<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #f6f5f4; color: #333">
  <p class="aligncenter">$pale-gray: $white-smoke</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #f1eeec; color: #333">
  <p class="aligncenter">$sand-gray: $pampas</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #ebebeb; color: #333">
  <p class="aligncenter">$light-gray: $gallery</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #8c8c8c; color: #fff">
  <p class="aligncenter">$gray</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #6e6e6e; color: #fff">
  <p class="aligncenter">$medium-gray: $dove-gray</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #4e4e4e; color: #fff">
  <p class="aligncenter">$coal-gray: $tundora</p></article>
</main>
<p class="cf"></p>

1-2.14 Data visualization colors

Use these approved colors for data charts and only in the color combinations according to chart type.

When color labels are more approriate for the data versus black (#333), please use alternate colors for data labels. See example.

Principal colors

Color Hex Value (Sass Name) RGB Value
dataviz-1 2e5e8b (calypso) (46,94,139)
dataviz-2 8baf3e (wasabi) (139,175,62)
dataviz-3 fcc62d (sunglow) (252,198,45)
dataviz-4 88cde5 (cornflower) (136,205,229)
dataviz-5 6d6aaa (violet) (109,106,170)
dataviz-6 474747 (charcoal) (71,71,71)
dataviz-7 b63b36 (medium-carmine) (182,59,54)
dataviz-8 fa7b00 (tangerine) (250,123,0)
dataviz-9 6291a6 (horizon) (98,145,166)
dataviz-10 1E5932
darken(saturate(adjust-hue
(#497037, 39), 15.45), 9.41)		 (30,89,50)

Alternate colors for data labels (to improve readability)

label color for light-yellow

label color for light-blue

label color for light-green

<h4>Principal colors</h4>
<table class="data-table">
    <thead>
        <tr>
            <th>Color</th>
            <th>Hex Value (Sass Name)</th>
            <th>RGB Value</th>
        </tr>
    </thead>
    <tr>
        <td data-title="Color" style="background: #2e5e8b; color: #fff; padding: 15px">dataviz-1</td>
        <td data-title="Hex Value (Sass Name)">2e5e8b (calypso)</td>
        <td data-title="RGB Value">(46,94,139)</td>
    </tr>
    <tr>
        <td data-title="Color" style="background: #8baf3e; color: #fff; padding: 15px">dataviz-2</td>
        <td data-title="Hex Value (Sass Name)">8baf3e (wasabi)</td>
        <td data-title="RGB Value">(139,175,62)</td>
    </tr>
    <tr>
        <td data-title="Color" style="background: #fcc62d; color: #fff; padding: 15px">dataviz-3</td>
        <td data-title="Hex Value (Sass Name)">fcc62d (sunglow)</td>
        <td data-title="RGB Value">(252,198,45)</td>
    </tr>
    <tr>
        <td data-title="Color" style="background: #88cde5; color: #fff; padding: 15px">dataviz-4</td>
        <td data-title="Hex Value (Sass Name)">88cde5 (cornflower)</td>
        <td data-title="RGB Value">(136,205,229)</td>
    </tr>
    <tr>
        <td data-title="Color" style="background: #6d6aaa; color: #fff; padding: 15px">dataviz-5</td>
        <td data-title="Hex Value (Sass Name)">6d6aaa (violet)</td>
        <td data-title="RGB Value">(109,106,170)</td>
    </tr>
    <tr>
        <td data-title="Color" style="background: #474747; color: #fff; padding: 15px">dataviz-6</td>
        <td data-title="Hex Value (Sass Name)">474747 (charcoal)</td>
        <td data-title="RGB Value">(71,71,71)</td>
    </tr>
    <tr>
        <td data-title="Color" style="background: #b63b36; color: #fff; padding: 15px">dataviz-7</td>
        <td data-title="Hex Value (Sass Name)">b63b36 (medium-carmine)</td>
        <td data-title="RGB Value">(182,59,54)</td>
    </tr>
    <tr>
        <td data-title="Color" style="background: #fa7b00; color: #fff; padding: 15px">dataviz-8</td>
        <td data-title="Hex Value (Sass Name)">fa7b00 (tangerine)</td>
        <td data-title="RGB Value">(250,123,0)</td>
    </tr>
    <tr>
        <td data-title="Color" style="background: #6291a6; color: #fff; padding: 15px">dataviz-9</td>
        <td data-title="Hex Value (Sass Name)">6291a6 (horizon)</td>
        <td data-title="RGB Value">(98,145,166)</td>
    </tr>
    <tr>
        <td data-title="Color" style="background: #1E5932; color: #fff; padding: 15px">dataviz-10</td>
        <td data-title="Hex Value (Sass Name)">1E5932 <br>darken(saturate(adjust-hue<br>(#497037, 39), 15.45), 9.41)</td>
        <td data-title="RGB Value">(30,89,50)</td>
    </tr>
</table>
<p class="cf"></p>
<h4>Alternate colors for data labels (to improve readability)</h4>
<main class="m-all t-all d-all cf">
  <article class="m-all t-4of12 d-4of12" style="background: #fff; color: #dca303">
  <p class="aligncenter">label color for light-yellow</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #fff; color: #3dabc9">
  <p class="aligncenter">label color for light-blue</p></article>
  <article class="m-all t-4of12 d-4of12" style="background: #fff; color: #769627">
  <p class="aligncenter">label color for light-green</p></article>
</main>
<p class="cf"></p>

1-2.15 Qualitative scheme color combinations

Use to represent discrete data sets. Colors do not represent magnitude differences between data sets. (ColorBrewer 2.0: Color Advice for Cartography.) (Reviewed for color blindness (Protanopia and Deuteuranopia).

See examples.

2 Colors

Default

 

 

Option 2
(Use Default First)

 

 

Option 3
(Use Default First)

 

 

3 Colors

Option 1

 

 

 

Option 2

 

 

 

4 Colors

 

 

 

 

5 Colors

 

 

 

 

 

6 Colors

 

 

 

 

 

 

7 Colors

 

 

 

 

 

 

 

8 Colors

 

 

 

 

 

 

 

 

9 Colors

 

 

 

 

 

 

 

 

 

10 Colors

 

 

 

 

 

 

 

 

 

 

<h4>2 Colors</h4>
<main class="m-all t-all d-all cf">
  <article class="m-4of12 t-4of12 d-4of12">
  <p class="aligncenter">Default</p></article>
  <article class="m-4of12 t-4of12 d-4of12" style="background: #2e5e8b">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-4of12 t-4of12 d-4of12" style="background: #8baf3e">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-4of12 t-4of12 d-4of12">
  <p class="aligncenter">Option 2<br>(Use Default First)</p></article>
  <article class="m-4of12 t-4of12 d-4of12" style="background: #2e5e8b">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-4of12 t-4of12 d-4of12" style="background: #fcc62d">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-4of12 t-4of12 d-4of12">
  <p class="aligncenter">Option 3<br>(Use Default First)</p></article>
  <article class="m-4of12 t-4of12 d-4of12" style="background: #6291a6">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-4of12 t-4of12 d-4of12" style="background: #b63b36">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>3 Colors</h4>
<main class="m-all t-all d-all cf">
  <article class="m-3of12 t-3of12 d-3of12">
  <p class="aligncenter">Option 1</p></article>
  <article class="m-3of12 t-3of12 d-3of12" style="background: #2e5e8b">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-3of12 t-3of12 d-3of12" style="background: #8baf3e">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-3of12 t-3of12 d-3of12" style="background: #fcc62d">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-3of12 t-3of12 d-3of12">
  <p class="aligncenter">Option 2</p></article>
  <article class="m-3of12 t-3of12 d-3of12" style="background: #6291a6">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-3of12 t-3of12 d-3of12" style="background: #fcc62d">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-3of12 t-3of12 d-3of12" style="background: #474747">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>4 Colors</h4>
<main class="m-all t-all d-all cf">
  <article class="m-3of12 t-3of12 d-3of12" style="background: #2e5e8b">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-3of12 t-3of12 d-3of12" style="background: #8baf3e">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-3of12 t-3of12 d-3of12" style="background: #fcc62d">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-3of12 t-3of12 d-3of12" style="background: #88cde5">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>5 Colors</h4>
<main class="m-all t-all d-all cf">
  <article class="m-2of10 t-2of10 d-2of10" style="background: #2e5e8b">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-2of10 t-2of10 d-2of10" style="background: #8baf3e">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-2of10 t-2of10 d-2of10" style="background: #fcc62d">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-2of10 t-2of10 d-2of10" style="background: #88cde5">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-2of10 t-2of10 d-2of10" style="background: #6d6aaa">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>6 Colors</h4>
<main class="m-all t-all d-all cf">
  <article class="m-1of6 t-1of6 d-1of6" style="background: #2e5e8b">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of6 t-1of6 d-1of6" style="background: #8baf3e">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of6 t-1of6 d-1of6" style="background: #fcc62d">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of6 t-1of6 d-1of6" style="background: #88cde5">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of6 t-1of6 d-1of6" style="background: #6d6aaa">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of6 t-1of6 d-1of6" style="background: #474747">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>7 Colors</h4>
<main class="m-all t-all d-all cf">
  <article class="m-1of7 t-1of7 d-1of7" style="background: #2e5e8b">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of7 t-1of7 d-1of7" style="background: #8baf3e">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of7 t-1of7 d-1of7" style="background: #fcc62d">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of7 t-1of7 d-1of7" style="background: #88cde5">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of7 t-1of7 d-1of7" style="background: #6d6aaa">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of7 t-1of7 d-1of7" style="background: #474747">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of7 t-1of7 d-1of7" style="background: #b63b36">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>8 Colors</h4>
<main class="m-all t-all d-all cf">
  <article class="m-1of8 t-1of8 d-1of8" style="background: #2e5e8b">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #8baf3e">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #fcc62d">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #88cde5">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #6d6aaa">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #474747">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #b63b36">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #fa7b00">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>9 Colors</h4>
<main class="m-all t-all d-all cf">
  <article class="m-1of9 t-1of9 d-1of9" style="background: #2e5e8b">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of9 t-1of9 d-1of9" style="background: #8baf3e">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of9 t-1of9 d-1of9" style="background: #fcc62d">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of9 t-1of9 d-1of9" style="background: #88cde5">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of9 t-1of9 d-1of9" style="background: #6d6aaa">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of9 t-1of9 d-1of9" style="background: #474747">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of9 t-1of9 d-1of9" style="background: #b63b36">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of9 t-1of9 d-1of9" style="background: #fa7b00">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of9 t-1of9 d-1of9" style="background: #6291a6">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>10 Colors</h4>
<main class="m-all t-all d-all cf">
  <article class="m-1of10 t-1of10 d-1of10" style="background: #2e5e8b">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of10 t-1of10 d-1of10" style="background: #8baf3e">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of10 t-1of10 d-1of10" style="background: #fcc62d">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of10 t-1of10 d-1of10" style="background: #88cde5">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of10 t-1of10 d-1of10" style="background: #6d6aaa">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of10 t-1of10 d-1of10" style="background: #474747">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of10 t-1of10 d-1of10" style="background: #b63b36">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of10 t-1of10 d-1of10" style="background: #fa7b00">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of10 t-1of10 d-1of10" style="background: #6291a6">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of10 t-1of10 d-1of10" style="background: #1E5932">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>

1-2.16 Diverging schemes color combinations

Use to display deviations from the mean. (ColorBrewer 2.0: Color Advice for Cartography.)

See example.

 

 

 

 

 

 

 

 

 

 

<main class="m-all t-all d-all cf">
  <article class="m-2of10 t-2of10 d-2of10" style="background: #8baf3e">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-2of10 t-2of10 d-2of10" style="background: #b9cf8b">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-2of10 t-2of10 d-2of10" style="background: #f7f7f7">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-2of10 t-2of10 d-2of10" style="background: #a7a6cc">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-2of10 t-2of10 d-2of10" style="background: #6d6aaa">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<main class="m-all t-all d-all cf">
  <article class="m-2of10 t-2of10 d-2of10" style="background: #2e5e8b">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-2of10 t-2of10 d-2of10" style="background: #829eB9">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-2of10 t-2of10 d-2of10" style="background: #f7f7f7">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-2of10 t-2of10 d-2of10" style="background: #d38986">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-2of10 t-2of10 d-2of10" style="background: #b63b36">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>

1-2.17 Sequential schemes color combinations

Use to order data that progresses from low to high, lightness steps with light colors for low data values to dark colors for high data values. (ColorBrewer 2.0: Color Advice for Cartography.)

See example.

Based on data-viz-1

 

 

 

 

*

 

 

 

Based on data-viz-2

 

 

 

 

*

 

 

 

Based on data-viz-3

 

 

 

 

*

 

 

 

Based on data-viz-4

 

 

 

 

*

 

 

 

Based on data-viz-5

 

 

 

 

*

 

 

 

Based on data-viz-6

 

 

 

 

*

 

 

 

Based on data-viz-7

 

 

 

 

*

 

 

 

Based on data-viz-8

 

 

 

 

*

 

 

 

Based on data-viz-9

 

 

 

 

*

 

 

 

Based on data-viz-10

 

 

 

 

*

 

 

 

<h4>Based on <code>data-viz-1</code></h4>
<main class="m-all t-all d-all cf">
  <article class="m-1of8 t-1of8 d-1of8" style="background: #D5DFE8">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #ABBFD1">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #829EB9">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #587EA2">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #2e5e8b; color: #fff">
  <p class="aligncenter">*</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #234768">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #172F46">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #0C1823">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>Based on <code>data-viz-2</code></h4>
<main class="m-all t-all d-all cf">
  <article class="m-1of8 t-1of8 d-1of8" style="background: #E8EFD8">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #D1DFB2">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #B9CF8B">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #A2BF65">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #8BAF3E; color: #fff">
  <p class="aligncenter">*</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #68832F">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #46581F">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #232C10">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>Based on <code>data-viz-3</code></h4>
<main class="m-all t-all d-all cf">
  <article class="m-1of8 t-1of8 d-1of8" style="background: #FEF4D5">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #FEE8AB">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #FDDD81">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #FDD157">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #FCC62D; color: #fff">
  <p class="aligncenter">*</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #BD9522">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #7E6317">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #3F310B">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>Based on <code>data-viz-4</code></h4>
<main class="m-all t-all d-all cf">
  <article class="m-1of8 t-1of8 d-1of8" style="background: #E1FFFF">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #BEFFFF">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #ACF1FF">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #9ADFF7">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #88cde5; color: #fff">
  <p class="aligncenter">*</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #6FB4CC">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #559AB2">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #3C8199">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>Based on <code>data-viz-5</code></h4>
<main class="m-all t-all d-all cf">
  <article class="m-1of8 t-1of8 d-1of8" style="background: #E2E1EE">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #C5C3DD">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #A7A6CC">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #8A88BB">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #6D6AAA; color: #fff">
  <p class="aligncenter">*</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #525080">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #373555">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #1B1B2A">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>Based on <code>data-viz-6</code></h4>
<main class="m-all t-all d-all cf">
  <article class="m-1of8 t-1of8 d-1of8" style="background: #ADADAD">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #949494">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #7A7A7A">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #616161">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #474747; color: #fff">
  <p class="aligncenter">*</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #2E2E2E">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #212121">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #141414">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>Based on <code>data-viz-7</code></h4>
<main class="m-all t-all d-all cf">
  <article class="m-1of8 t-1of8 d-1of8" style="background: #fff5f0">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #fcbba1">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #fc9272">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #fb6a4a">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #b63b36; color: #fff">
  <p class="aligncenter">*</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #a50f15">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #67000d">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #4E0000">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>Based on <code>data-viz-8</code></h4>
<main class="m-all t-all d-all cf">
  <article class="m-1of8 t-1of8 d-1of8" style="background: #fff5eb">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #fee6ce">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #fdd0a2">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #fdae6b">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #fa7b00; color: #fff">
  <p class="aligncenter">*</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #d94801">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #a63603">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #7f2704">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>Based on <code>data-viz-9</code></h4>
<main class="m-all t-all d-all cf">
  <article class="m-1of8 t-1of8 d-1of8" style="background: #E0E9ED">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #C0D3DB">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #A1BDCA">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #81A7B8">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #6291A6; color: #fff">
  <p class="aligncenter">*</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #4A6D7D">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #314953">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #182429">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>
<h4>Based on <code>data-viz-10</code></h4>
<main class="m-all t-all d-all cf">
  <article class="m-1of8 t-1of8 d-1of8" style="background: #84BF98">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #6BA67F">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #518C65">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #38734C">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #1E5932; color: #fff">
  <p class="aligncenter">*</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #114C25">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #054019">
  <p class="aligncenter">&nbsp;</p></article>
  <article class="m-1of8 t-1of8 d-1of8" style="background: #00330C">
  <p class="aligncenter">&nbsp;</p></article>
</main>
<p class="cf"></p>

1-3 Icons

Various icons to direct users around the site.

1-3.1 Menu

Hamburger icon for main top nav menu.

Show Menu MENU

Show Menu MENU 

<div id="nav-btn-show" tabindex="0" class="m-1of4 d-1of6 t-1of6" style="background: #333; color: #6e6e6e; padding: 1rem">
  <img src="../assets/images/icon-menu.png" width="27" height="23" alt="Show Menu"> MENU
</div>
<p class="cf"></p>
<div id="nav-btn" tabindex="0" class="m-1of4 d-1of6 t-1of6 fixed" style="background: #f1eeec; color: #6e6e6e; padding: 1rem">
  <img src="../assets/images/icon-menu.png" width="27" height="23" alt="Show Menu"> MENU
</div>
<p class="cf"></p>

1-3.2 Search

Search icon, which, when clicked or tapped becomes a search box form.

Search SF Fed

Search SF Fed 

<div id="search-site" class="m-1of4 d-1of6 t-1of6" style="background: #333; color: #6e6e6e; padding: 1rem">
  <img src="../assets/images/search-icon.png" alt="Search SF Fed" style="display: block;">
</div>
<p class="cf"></p>
<div id="search-site" class="m-1of4 d-1of6 t-1of6" style="background: #f1eeec; color: #6e6e6e; padding: 1rem">
  <img src="../assets/images/search-icon.png" alt="Search SF Fed" style="display: block;">
</div>
<p class="cf"></p>

1-3.3 Off-site icon

Indicates to user a link that is not frbsf.org and will open a new window.

Below is a basic link; it's then followed by those with off-site icon variants.

Link
<a href="http://www.federalreserve.gov" class="a [modifier class]">Link</a>

Icon next to non-FRBSF site indicating link will open new window. .offsite-icon-img

Link

Off-site link icon in the main navigation. .offsite-icon-img-nav

Link

1-3.4 Audio and video link icons

Indicates whether link goes to audio or video content.

Below is a basic link; it's then followed by those with multimedia icon variants.

Link
<a class=" [modifier class]" href="">Link</a>

Links to video content. .video-icon

Link

Links to audio content. .audio-icon

Link

1-3.5 Economic letter icons

Share, subscribe and download icons on Economic Letters. Social media icons appear when share icon is clicked.

View PDF    Subscribe to FedViews    Share 

<p>
<a href="#">
  <img src="../assets/images/icon-pdf.png" width="46" height="30" alt="View PDF" class="padding-r pdf">&nbsp;&nbsp;&nbsp;
</a>
<a href="#" title="" target="_blank" rel="noopener">
  <img src="../assets/images/icon-email.png" width="41" height="30" alt="Subscribe to FedViews">&nbsp;&nbsp;&nbsp;
</a>
<a href="#" class="share">
  <img src="../assets/images/icon-share.png" width="37" height="30" alt="Share">
</a>
</p>

1-3.6 Share icons

Social media icons for sharing content. Used on several Fed sections.

Share on Facebook Share on Twitter Share on LinkedIn 
<div id="share-links">
        <a href="#"><img src="../assets/images/icon-facebook.png" width="44" height="44" alt="Share on Facebook"></a>
        <a href="#" title="Share on Twitter" target="_blank" rel="noopener"><img src="../assets/images/icon-twitter.png" width="44" height="44" alt="Share on Twitter"></a>
        <a href="#"><img src="../assets/images/icon-linkedin.png" width="44" height="44" alt="Share on LinkedIn"></a>
</div>

1-3.7 Education share icons

Sharing and social icons for Education

Twitter Facebook Pinterest Youtube Edublog Newsletter 
<div class="landing-follow-section-ed desktop">
  <a href="#"><img src="../assets/images/icon-twitter.png" width="44" height="44" alt="Twitter"></a>
  <a href="#"><img src="../assets/images/icon-facebook.png" width="44" height="44" alt="Facebook"></a>
  <a href="#"><img src="../assets/images/icon-pinterest.png" width="44" height="44" alt="Pinterest"></a>
  <a href="#"><img src="../assets/images/icon-youtube.png" width="44" height="44" alt="Youtube"></a>
  <a href="#"><img border="0" src="../assets/images/icon-edublog.png" alt="Edublog"></a>
  <a href="#"><img border="0" src="../assets/images/icon-email.png" alt="Newsletter"></a>
</div>

1-3.8 Community Development share icons

Users can follow CD on social with these icons.

Youtube Facebook Twitter LinkedIn Newsletter 
<div class="landing-follow-section desktop">
    <a href="#"><img src="../assets/images/icon-youtube.png" width="44" height="44" alt="Youtube"></a>
    <a href="#"><img src="../assets/images/icon-facebook.png" width="44" height="44" alt="Facebook"></a>
    <a href="#"><img src="../assets/images/icon-twitter.png" width="44" height="44" alt="Twitter"></a>
    <a href="#"><img src="../assets/images/icon-linkedin.png" width="44" height="44" alt="LinkedIn"></a>
    <a href="#"><img border="0" src="../assets/images/icon-email.png" alt="Newsletter"></a>
</div>

1-3.9 PDF CV icon

Combo "CV/PDF" box for economist bio.

CV

<p id="cv"><a href="#" class="pdf">CV</a></p>

1-3.10 Upcoming events

Calendar icon for upcoming events.

Upcoming Events

Upcoming Events

<div class="landing-events">
  <img src="../assets/images/icon-event-calendar.png" width="40" height="44" alt="Upcoming Events" class="eventicon">
  <h3><a href="/education/events/">Upcoming Events</a></h3>
</div>

1-3.11 Show and Hide

Plus and minus icons used to toggle visibility of elements.

Show this section Hide this section
<img src="../assets/images/icon-plus.png" class="icon hideshow" width="30" height="30" alt="Show this section">
<img src="../assets/images/icon-minus.png" class="icon hideshow" width="30" height="30" alt="Hide this section">

1-3.12 RSS icon

Indicates available RSS feed subscription.

Subscribe to the Community Development Blog RSS feed 

<div id="share-links">
    <p>
        <a href="#" title="Subscribe to the Community Development Blog RSS feed" ><img src="../assets/images/icon-rss.png" width="29" height="30" class="rss" alt="Subscribe to the Community Development Blog RSS feed"></a>
    </p>
</div>

1-4 Buttons

Main button styles and special buttons.

1-4.1 Blue button

Main button style.

Register

<p class="register-btn"><a href="#" target="_blank" rel="noopener" class="button_gradient">Register</a></p>

1-4.2 Form submission button

Subscription button, mainly for mailchimp pages.

<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button gradient">

1-4.3 Read more button

White arrow inside circle used for #unreserved.

<div class="ur-text m-all t-4of12 d-4of12" style="background:#516e5c">
  <p style="text-align: center"><img src="../assets/images/icon-left-arrow.png" alt"left="" arrow"="" title="Read more"></p>
</div>
<p class="cf"></p>

1-4.4 Recent Presidents button

Use class recent-pres-btn to create link to recent FRBSF presidents on Office of the President page.

Recent President

<article role="article" class="m-all t-10of12 d-10of12 t-o-1of12 d-o-1of12">
  <section class="entry-content cf">
    <div class="clearfix">
      <div class="m-all t-5of12 d-5of12 recent-pres-btn sand-btn aligncenter">
        <p><a href="#">Recent President</a></p>
      </div>
    </div>
  </section>
</article>
<p class="cf"></p>

1-4.5 Listen/pause buttons

Audio control buttons (mainly for Careers landing page). Image toggles when clicked.

<img src="../assets/images/audio-pause.png" class="button" id="play1" href="#" title="" style="width:50px">
<img src="../assets/images/audio-play2.png" class="button" id="play1" href="#" title="" style="width:50px">

1-4.6 Chair the Fed game buttons

A number of one-off, non-standard buttons created for Chair the Fed game in Teacher Resources. They have the following respective functions: Launch Game, For the Public, For Educators, and Contact Us.

Launch Game For the Public For Educators Contact Us
<img src="../assets/images/button_launch_game.png" width="200" height="56" alt="Launch Game" title="Launch Game" class="chair-the-fed-launch-btn">
<img src="../assets/images/icon_p.png" width="142" height="142" alt="For the Public">
<img src="../assets/images/icon_e.png" width="142" height="142" alt="For Educators">
<img src="../assets/images/icon_contact.png" width="142" height="142" alt="Contact Us">

1-5 Images

Use the image size guidelines below for the site. They can be made responsive via max-width: 100% and height: auto to scale with parent element. Note that every image must have a text equivalent (e.g. via succinct “alt” or equivalent text within corresponding body copy). Alternative text should be descriptive, but should not repeat body copy text. It should be neither too verbose (e.g., “image of” or “photo of”) nor too vague.

1-5.1 Our District hero

Hero image and text on Our District landing page. Text overlay is visible on desktop only.

The 12th District

<div class="landing-hero-our-district">
    <p class="desktop">The 12th District</p>
    <img class="hero" src="../assets/images/our-district-hero-img.jpg" width="960" height="252" alt="">
</div>

1-5.2 #unreserved landing image

#unreserved landing image.

blog landing image
<img width="319" height="300" src="https://placehold.it/319x300" class="attachment-" alt="blog landing image">

1-5.3 #unreserved post image

#unreserved individual post, full-sized image.

blog post image
<img width="800" height="420" src="https://placehold.it/800x420" class="attachment-full" alt="blog post image">

1-5.4 Blog image and video

SF Fed blog image or featured video on landing and individual post. For image, add from page as Featured Image; it will appear in landing and post. For video, add as Featured Video embed, but also add Featured Image; image will apear in landing, video in individual post.

blog image 

<img src="https://placehold.it/670x268" alt="blog image" class="blog-hero">

<div class="responsive-embed" style="padding-bottom:56.25%;">
    <iframe src="https://player.vimeo.com/video/336812660" allowfullscreen="" width="640" height="360" frameborder="0"></iframe>
    <script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72174276.js">
    </script>
</div>

1-5.5 Thumbnail

Thumbnail for biographic images. Standard sizes include 138 x 138 and 200 x 200.

...

Name
Title
bio

<div class="bio-image" style="border-radius: 0%"><img src="https://placehold.it/138x138" alt="..." width="138" height="138"></div>
  <div class="bio-text">
        <p><strong>Name</strong>
        <br><strong>Title</strong>
        <br>bio</p>
    </div>

1-5.6 Circle thumbnail

Circle-shaped biographic image, 138x158 or 120x120. Floated left of person's name and title on desktop, stacked on top on mobile. Use border-radius: 50% to shape image.

...

Staff Member

Title

<div class="bio-image"><img src="https://placehold.it/138x158" alt="..." ></div>
<div class="bio-text"><h1>Staff Member</h1><h3 class="h5">Title</h3></div>

1-5.7 Badge images

Badge images, floated left of first paragraph or top on mobile, required by some pages (e.g., Tech Pulse)

Title

Page Title

This is a description of the section.

Section Title

<article class="cf">
  <div class="m-all t-5of12 d-4of12 padding-bottom-add">
      <div class="landing-hero-data">
          <img class="banner" src="https://placehold.it/375x205">
          <p>Title</p>
      </div>
  </div>
  <div class="m-all t-7of12 d-8of12 padding-bottom-add">
            <h1 class="banner-title">Page Title</h1>
            <p>This is a description of the section.</p>
    </div>
    <div></div>
</article>
<div class="desktop">
   <h2 class="section-title">Section Title</h2>
</div>

1-5.8 Image with text wrap

Use alignleft class on an element, such as an image, to make text wrap around it.

De Finibus Bonorum et Malorum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt.

<p>
    <img src="https://placehold.it/160x219" class="alignleft alt="placeholder" width="160" height="219" /><strong>De Finibus Bonorum et Malorum</strong
</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br><br>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt.</p>

1-5.9 Page not found sloth

The 404 Search Sloth.

<img src="../assets/images/404-search-sloth.jpg" width="245" height="305" alt="">

1-5.10 Easter egg rock chick

Easter egg animated gif from President's Speech Easter Eggs game.

<img src="../assets/images/egg_chick_animation.gif">

1-5.11 SF Fed Blog and In the Media image (from landing page)

The SF Fed Blog and In the Media image links from Our District landing page. Two-column responsive layout stacks on mobile.

Image 1

Image 2

 

<main id="main" class="m-all t-all d-all cf" role="main">
    <article class="m-all t-all d-10of12 d-o-1of12">
        <div class="m-all t-6of12 d-6of12 sf-fed-blog">
            <a href="#">
                <p>Image 1</p>
                <img src="https://placehold.it/467x264" width="467" height="264" alt="">
            </a>
        </div>
        <div class="m-all t-6of12 d-6of12 in-the-media">
            <a href="/our-district/press/">
                <p>Image 2</p>
                <img src="https://placehold.it/467x264" width="467" height="264" alt="">
            </a>
        </div>
    </article>
</main>
<p class="cf"></p>

1-5.12 Inline image

Use figure to display inline blog images and charts, and figcaption for accompanying captions or notes.

Figure 1
Title

placeholder image
Source: source name.
<figure class="aligncenter">
    <p>Figure 1<br>
    Title</p>
    <img src="https://placehold.it/550x365" alt="placeholder image">
    <figcaption>Source: source name.</figcaption>
</figure>

1-5.13 CPBS logo

Used in CTA box on landing page

<div class="landing-did-you-know">
    <p><img src="http://www.frbsf.org/economic-research/wp-content/themes/sf_fed_rebrand_2015/library/images/cpbs-logo.png" class="fullwidth"></p>
</div>

1-6 Table

We use NPR's responsive data table model. On smaller screens, table stacks to become row-based.

Institution Country Systemic Importance Rank
Mitsubishi UFJ Financial Group Japan 11
Bank of China China 17
Mizuho Financial Group Japan 20
Agricultural Bank of China China 27
Standard Chartered UK 27 
<table class="data-table">
    <thead>
        <tr>
            <th>Institution</th>
            <th>Country</th>
            <th>Systemic Importance Rank</th>
        </tr>
    </thead>
    <tr>
        <td data-title="Institution">Mitsubishi UFJ Financial Group</td>
        <td data-title="Country">Japan</td>
        <td data-title="Systemic Importance Rank">11</td>
    </tr>
    <tr>
        <td data-title="Institution">Bank of China</td>
        <td data-title="Country">China</td>
        <td data-title="Systemic Importance Rank">17</td>
    </tr>
    <tr>
        <td data-title="Institution">Mizuho Financial Group</td>
        <td data-title="Country">Japan</td>
        <td data-title="Systemic Importance Rank">20</td>
    </tr>
    <tr>
        <td data-title="Institution">Agricultural Bank of China</td>
        <td data-title="Country">China</td>
        <td data-title="Systemic Importance Rank">27</td>
    </tr>
    <tr>
        <td data-title="Institution">Standard Chartered</td>
        <td data-title="Country">UK</td>
        <td data-title="Systemic Importance Rank">27</td>
    </tr>
</table>