---
extends: _layouts.markdown
title: "Backgrounds"
---

# Backgrounds

<div class="subnav">
    <a class="subnav-link" href="#colors">Colors</a>
    <a class="subnav-link" href="#responsive">Responsive</a>
    <a class="subnav-link" href="#customizing">Customizing</a>
</div>

<h2 id="colors">Colors</h2>


<div class="row pull-x-4 mb-4">
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="bg-light px-6 py-4 text-sm">
        .bg-light
      </div>
      <div class="bg-light-soft px-6 py-4 text-sm">
        .bg-light-soft
      </div>
      <div class="bg-light-softer px-6 py-4 text-sm">
        .bg-light-softer
      </div>
      <div class="bg-light-softest px-6 py-4 text-sm">
        .bg-light-softest
      </div>
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-dark px-6 py-4 text-sm">
        .bg-dark
      </div>
      <div class="text-light bg-dark-soft px-6 py-4 text-sm">
        .bg-dark-soft
      </div>
      <div class="text-light bg-dark-softer px-6 py-4 text-sm">
        .bg-dark-softer
      </div>
      <div class="text-light bg-dark-softest px-6 py-4 text-sm">
        .bg-dark-softest
      </div>
    </div>
  </div>
</div>

<div class="row pull-x-4 mb-4">
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-red-dark px-6 py-4 text-sm">
        .bg-red-dark
      </div>
      <div class="text-light bg-red px-6 py-4 text-sm">
        .bg-red
      </div>
      <div class="text-light bg-red-light px-6 py-4 text-sm">
        .bg-red-light
      </div>
      <div class="text-red-dark bg-red-lightest px-6 py-4 text-sm">
        .bg-red-lightest
      </div>
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-orange-dark px-6 py-4 text-sm">
        .bg-orange-dark
      </div>
      <div class="text-light bg-orange px-6 py-4 text-sm">
        .bg-orange
      </div>
      <div class="text-orange-dark bg-orange-light px-6 py-4 text-sm">
        .bg-orange-light
      </div>
      <div class="text-orange-dark bg-orange-lightest px-6 py-4 text-sm">
        .bg-orange-lightest
      </div>
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-yellow-dark px-6 py-4 text-sm">
        .bg-yellow-dark
      </div>
      <div class="text-light bg-yellow px-6 py-4 text-sm">
        .bg-yellow
      </div>
      <div class="text-yellow-dark bg-yellow-light px-6 py-4 text-sm">
        .bg-yellow-light
      </div>
      <div class="text-yellow-dark bg-yellow-lightest px-6 py-4 text-sm">
        .bg-yellow-lightest
      </div>
    </div>
  </div>
</div>

<div class="row pull-x-4 mb-4">
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-green-dark px-6 py-4 text-sm">
        .bg-green-dark
      </div>
      <div class="text-light bg-green px-6 py-4 text-sm">
        .bg-green
      </div>
      <div class="text-green-dark bg-green-light px-6 py-4 text-sm">
        .bg-green-light
      </div>
      <div class="text-green-dark bg-green-lightest px-6 py-4 text-sm">
        .bg-green-lightest
      </div>
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-teal-dark px-6 py-4 text-sm">
        .bg-teal-dark
      </div>
      <div class="text-light bg-teal px-6 py-4 text-sm">
        .bg-teal
      </div>
      <div class="text-teal-dark bg-teal-light px-6 py-4 text-sm">
        .bg-teal-light
      </div>
      <div class="text-teal-dark bg-teal-lightest px-6 py-4 text-sm">
        .bg-teal-lightest
      </div>
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-blue-dark px-6 py-4 text-sm">
        .bg-blue-dark
      </div>
      <div class="text-light bg-blue px-6 py-4 text-sm">
        .bg-blue
      </div>
      <div class="text-blue-dark bg-blue-light px-6 py-4 text-sm">
        .bg-blue-light
      </div>
      <div class="text-blue-dark bg-blue-lightest px-6 py-4 text-sm">
        .bg-blue-lightest
      </div>
    </div>
  </div>
</div>

<div class="row pull-x-4 mb-4">
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-indigo-dark px-6 py-4 text-sm">
        .bg-indigo-dark
      </div>
      <div class="text-light bg-indigo px-6 py-4 text-sm">
        .bg-indigo
      </div>
      <div class="text-indigo-dark bg-indigo-light px-6 py-4 text-sm">
        .bg-indigo-light
      </div>
      <div class="text-indigo-dark bg-indigo-lightest px-6 py-4 text-sm">
        .bg-indigo-lightest
      </div>
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-purple-dark px-6 py-4 text-sm">
        .bg-purple-dark
      </div>
      <div class="text-light bg-purple px-6 py-4 text-sm">
        .bg-purple
      </div>
      <div class="text-purple-dark bg-purple-light px-6 py-4 text-sm">
        .bg-purple-light
      </div>
      <div class="text-purple-dark bg-purple-lightest px-6 py-4 text-sm">
        .bg-purple-lightest
      </div>
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-pink-dark px-6 py-4 text-sm">
        .bg-pink-dark
      </div>
      <div class="text-light bg-pink px-6 py-4 text-sm">
        .bg-pink
      </div>
      <div class="text-pink-dark bg-pink-light px-6 py-4 text-sm">
        .bg-pink-light
      </div>
      <div class="text-pink-dark bg-pink-lightest px-6 py-4 text-sm">
        .bg-pink-lightest
      </div>
    </div>
  </div>
</div>

Using the utilities in HTML:

```html
<div class="bg-light"></div>
<div class="bg-light-soft"></div>
<div class="bg-light-softer"></div>
<div class="bg-light-softest"></div>

<div class="bg-dark"></div>
<div class="bg-dark-soft"></div>
<div class="bg-dark-softer"></div>
<div class="bg-dark-softest"></div>
```

Using the utilities in Less:

```less
div {
  .bg-light;
  .bg-light-soft;
  .bg-light-softer;
  .bg-light-softest;

  .bg-dark;
  .bg-dark-soft;
  .bg-dark-softer;
  .bg-dark-softest;
}
```

<h2 id="responsive">Responsive</h2>

The background utitlies can also be used with <a href="/responsive">responsive</a> prefixes:

```html
<!-- Using the utilities in HTML: -->

<div class="bg-dark sm:bg-dark-soft md:bg-dark-softer lg:bg-dark-softest"></div>
```

```less
// Using the utilities in Less:

div {
  .screen(lg, {
    .bg-light;
  });
}
```


<h2 id="customizing">Customizing</h2>

To customize the available background colors, start by creating a copy of the default `@bg-colors` variable in your own Less file:

```less
@bg-colors:
  'light'           @color-white,
  'light-soft'      @color-grey-200,
  'light-softer'    @color-grey-300,

  'dark'            @color-grey-900,
  'dark-soft'       @color-grey-800,
  'dark-softer'     @color-grey-700,

  'red-dark'        @color-red-dark,
  'red'             @color-red,
  'red-light'       @color-red-light,
  'red-lightest'    @color-red-lightest,

  'orange-dark'     @color-orange-dark,
  'orange'          @color-orange,
  'orange-light'    @color-orange-light,
  'orange-lightest' @color-orange-lightest,

  'yellow-dark'     @color-yellow-dark,
  'yellow'          @color-yellow,
  'yellow-light'    @color-yellow-light,
  'yellow-lightest' @color-yellow-lightest,

  'green-dark'      @color-green-dark,
  'green'           @color-green,
  'green-light'     @color-green-light,
  'green-lightest'  @color-green-lightest,

  'teal-dark'       @color-teal-dark,
  'teal'            @color-teal,
  'teal-light'      @color-teal-light,
  'teal-lightest'   @color-teal-lightest,

  'blue-dark'       @color-blue-dark,
  'blue'            @color-blue,
  'blue-light'      @color-blue-light,
  'blue-lightest'   @color-blue-lightest,

  'indigo-dark'     @color-indigo-dark,
  'indigo'          @color-indigo,
  'indigo-light'    @color-indigo-light,
  'indigo-lightest' @color-indigo-lightest,

  'purple-dark'     @color-purple-dark,
  'purple'          @color-purple,
  'purple-light'    @color-purple-light,
  'purple-lightest' @color-purple-lightest,

  'pink-dark'       @color-pink-dark,
  'pink'            @color-pink,
  'pink-light'      @color-pink-light,
  'pink-lightest'   @color-pink-lightest,
;
```

If you don't need certain background colors, remove them or comment them out to prevent those utilities from being generated:

```less
@bg-colors:
  // ...

  // 'yellow-dark'     @color-yellow-dark,
  // 'yellow'          @color-yellow,
  // 'yellow-light'    @color-yellow-light,
  // 'yellow-lightest' @color-yellow-lightest,

  'green-dark'      @color-green-dark,
  'green'           @color-green,
  'green-light'     @color-green-light,
  'green-lightest'  @color-green-lightest,

  // 'teal-dark'       @color-teal-dark,
  // 'teal'            @color-teal,
  // 'teal-light'      @color-teal-light,
  // 'teal-lightest'   @color-teal-lightest,

  'blue-dark'       @color-blue-dark,
  'blue'            @color-blue,
  'blue-light'      @color-blue-light,
  'blue-lightest'   @color-blue-lightest,

  'indigo-dark'     @color-indigo-dark,
  'indigo'          @color-indigo,
  'indigo-light'    @color-indigo-light,
  'indigo-lightest' @color-indigo-lightest,

  // 'purple-dark'     @color-purple-dark,
  // 'purple'          @color-purple,
  // 'purple-light'    @color-purple-light,
  // 'purple-lightest' @color-purple-lightest,

  // 'pink-dark'       @color-pink-dark,
  // 'pink'            @color-pink,
  // 'pink-light'      @color-pink-light,
  // 'pink-lightest'   @color-pink-lightest,
;
```

If you'd like to add new background colors, add them to the end of the `@bg-colors` variable like so:

```less
@bg-colors:
  // ...

  'brand-primary'     #cf4646,
  'brand-secondary'   #f6c92e,
;
```

New background color utilities (including responsive versions) will be generated for those colors and can be used in your markup like any other background color utility:

```html
<div class="bg-brand-primary md:bg-brand-secondary">
  <!-- ... -->
</div>
```