Foreground

By default text, links, icons, and other elements render as a dark foreground against a light background. To invert this behavior and display light foreground elements use the dark class.

Welcome to Mapbox.
Welcome to Mapbox.
    <div class='pad2 fill-light'>
      Welcome to Mapbox. <a href='#' class='rcon next'>Learn more</a>
    </div>
    <div class='pad2 fill-navy dark'>
      Welcome to Mapbox. <a href='#' class='rcon next'>Learn more</a>
    </div>
  

Background

A background fill can be applied to a container using one of the fill-[color] classes.

.fill-dark
#404040
.fill-gray
#eee
.fill-light
#f8f8f8
.fill-white
#fff
.fill-cyan
#3bb2d0
.fill-blue
#3887be
.fill-darkblue
#223b53
.fill-denim
#50667f
.fill-navy
#28353d
.fill-navy-dark
#222b30
.fill-purple
#8a8acb
.fill-teal
#41afa5
.fill-green
#56b881
.fill-yellow
#f1f075
.fill-mustard
#fbb03b
.fill-orange
#f9886c
.fill-red
#e55e5e
.fill-pink
#ed6498
    <div class='pad2 fill-dark dark'>.fill-dark
      <div class="fr"><code>#404040</code></div>
    </div>
    <div class='pad2 fill-gray'>.fill-gray
      <div class="fr"><code>#eee</code></div>
    </div>
    <div class='pad2 fill-light'>.fill-light
      <div class="fr"><code>#f8f8f8</code></div>
    </div>
    <div class='pad2 fill-white'>.fill-white
      <div class="fr"><code>#fff</code></div>
    </div>
    <div class='pad2 fill-cyan dark'>.fill-cyan
      <div class="fr"><code>#3bb2d0</code></div>
    </div>
    <div class='pad2 fill-blue dark'>.fill-blue
      <div class="fr"><code>#3887be</code></div>
    </div>
    <div class='pad2 fill-darkblue dark'>.fill-darkblue
      <div class="fr"><code>#223b53</code></div>
    </div>
    <div class='pad2 fill-denim dark'>.fill-denim
      <div class="fr"><code>#50667f</code></div>
    </div>
    <div class='pad2 fill-navy dark'>.fill-navy
      <div class="fr"><code>#28353d</code></div>
    </div>
    <div class='pad2 fill-navy-dark dark'>.fill-navy-dark
      <div class="fr"><code>#222b30</code></div>
    </div>
    <div class='pad2 fill-purple dark'>.fill-purple
      <div class="fr"><code>#8a8acb</code></div>
    </div>
    <div class='pad2 fill-teal dark'>.fill-teal
      <div class="fr"><code>#41afa5</code></div>
    </div>
    <div class='pad2 fill-green dark'>.fill-green
      <div class="fr"><code>#56b881</code></div>
    </div>
    <div class='pad2 fill-yellow'>.fill-yellow
      <div class="fr"><code>#f1f075</code></div>
    </div>
    <div class='pad2 fill-mustard'>.fill-mustard
      <div class="fr"><code>#fbb03b</code></div>
    </div>
    <div class='pad2 fill-orange'>.fill-orange
      <div class="fr"><code>#f9886c</code></div>
    </div>
    <div class='pad2 fill-red'>.fill-red
      <div class="fr"><code>#e55e5e</code></div>
    </div>
    <div class='pad2 fill-pink'>.fill-pink
      <div class="fr"><code>#ed6498</code></div>
    </div>
  

Tinting backgrounds

Translucent background fills to shade an element against a background.

.fill-darken0
.fill-darken1
.fill-darken2
.fill-darken3
.fill-darken0
.fill-darken1
.fill-darken2
.fill-darken3
.fill-darken0
.fill-darken1
.fill-darken2
.fill-darken3
.fill-lighten0
.fill-lighten1
.fill-lighten2
.fill-lighten3
.fill-lighten0
.fill-lighten1
.fill-lighten2
.fill-lighten3
.fill-lighten0
.fill-lighten1
.fill-lighten2
.fill-lighten3
    <div class='clearfix'>
      <div class='pad1 col4 fill-navy dark'>
        <div class='pad2 fill-darken0'>.fill-darken0</div>
        <div class='pad2 fill-darken1'>.fill-darken1</div>
        <div class='pad2 fill-darken2'>.fill-darken2</div>
        <div class='pad2 fill-darken3'>.fill-darken3</div>
      </div>
      <div class='pad1 col4 fill-blue dark'>
        <div class='pad2 fill-darken0'>.fill-darken0</div>
        <div class='pad2 fill-darken1'>.fill-darken1</div>
        <div class='pad2 fill-darken2'>.fill-darken2</div>
        <div class='pad2 fill-darken3'>.fill-darken3</div>
      </div>
      <div class='pad1 col4 fill-purple dark'>
        <div class='pad2 fill-darken0'>.fill-darken0</div>
        <div class='pad2 fill-darken1'>.fill-darken1</div>
        <div class='pad2 fill-darken2'>.fill-darken2</div>
        <div class='pad2 fill-darken3'>.fill-darken3</div>
      </div>
    </div>
  
    <div class='clearfix'>
      <div class='pad1 col4 fill-navy'>
        <div class='pad2 fill-lighten0'>.fill-lighten0</div>
        <div class='pad2 fill-lighten1'>.fill-lighten1</div>
        <div class='pad2 fill-lighten2'>.fill-lighten2</div>
        <div class='pad2 fill-lighten3'>.fill-lighten3</div>
      </div>
      <div class='pad1 col4 fill-blue'>
        <div class='pad2 fill-lighten0'>.fill-lighten0</div>
        <div class='pad2 fill-lighten1'>.fill-lighten1</div>
        <div class='pad2 fill-lighten2'>.fill-lighten2</div>
        <div class='pad2 fill-lighten3'>.fill-lighten3</div>
      </div>
      <div class='pad1 col4 fill-purple'>
        <div class='pad2 fill-lighten0'>.fill-lighten0</div>
        <div class='pad2 fill-lighten1'>.fill-lighten1</div>
        <div class='pad2 fill-lighten2'>.fill-lighten2</div>
        <div class='pad2 fill-lighten3'>.fill-lighten3</div>
      </div>
    </div>