--- layout: documentation doc-tab: overview doc-subtab: variables --- {% include subnav-overview.html %}

# Variables

## Easily customize Bulma to match your design

Bulma has 1 variable file divided into 4 sections:

- Initial variables: where you define variables by direct value, like:
  - colors: `$blue: #42afe3`
  - font families: `$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif`
  - font sizes: `$size-1: 48px`
  - other values: `$nav-height: 50px` or `$easing: ease-out`
- Primary colors derived from the initial variables:
  - `$primary: $turquoise`
  - `$info: $blue`
  - `$success: $green`
  - `$warning: $yellow`
  - `$danger: $red`
  - `$dark: $grey-darker`
  - `$text: $grey-dark`
- Generated variables where variables are calculated from the values set in the previous file. For example, you can have:
  - `$body-background: $grey-lighter`: the page's main background is the lighter grey
  - `$link: $primary`: the links use the primary color
  - `$family-primary: $family-sans-serif`: the primary font family is the sans-serif one
- Lists and maps which are collections so already defined variables:
  - `$colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))`
  - `$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6`

To override any of these variables, just set them before importing Bulma.

1. Initial variables
Colors
`$black` | #111
`$grey-darker` | #222324
`$grey-dark` | #69707a
`$grey` | #aeb1b5
`$grey-light` | #d3d6db
`$grey-lighter` | #f5f7fa
`$white` | #fff
`$blue` | #42afe3
`$green` | #97cd76
`$orange` | #f68b39
`$purple` | #847bb9
`$red` | #ed6c63
`$turquoise` | #1fc8db
`$yellow` | #fce473
Typography
`$family-sans-serif` | "Helvetica Neue", "Helvetica", "Arial", sans-serif
`$family-monospace` | "Source Code Pro", "Monaco", "Inconsolata", monospace
`$size-1` | 48px
`$size-2` | 40px
`$size-3` | 28px
`$size-4` | 24px
`$size-5` | 18px
`$size-6` | 14px
`$size-7` | 11px
`$weight-normal` | 400
`$weight-bold` | 700
`$weight-title-normal` | 300
`$weight-title-bold` | 500
Breakpoints
`$tablet` | 769px
`$desktop` | 980px
`$widescreen` | 1180px
Dimensions
`$column-gap` | 20px
`$nav-height` | 50px
Miscellaneous
`$easing` | ease-out
`$radius` | 3px
`$speed` | 86ms
2. Primary colors
`$primary` | $turquoise
`$info` | $blue
`$success` | $green
`$warning` | $yellow
`$danger` | $red
`$light` | $grey-lighter
`$dark` | $grey-dark
`$text` | $grey-dark
3. Generated variables
Invert colors
`$primary-invert` | findColorInvert($primary)
`$info-invert` | findColorInvert($info)
`$success-invert` | findColorInvert($success)
`$warning-invert` | findColorInvert($warning)
`$danger-invert` | findColorInvert($danger)
`$light-invert` | $dark
`$dark-invert` | $light
General colors
`$body-background` | $grey-lighter
`$background` | $grey-lighter
`$border` | $grey-light
`$border-hover` | $grey
Text colors
`$text-invert` | findColorInvert($text)
`$text-light` | $grey
`$text-strong` | $grey-darker
Code colors
`$code` | $red
`$code-background` | $background
`$pre` | $text
`$pre-background` | $background
Link colors
`$link` | $primary
`$link-invert` | $primary-invert
`$link-visited` | $purple
`$link-hover` | $grey-darker
`$link-hover-background` | $grey-lighter
`$link-hover-border` | $grey-darker
`$link-active` | $grey-darker
`$link-active-border` | $grey-darker
Control colors
`$control` | $text-strong
`$control-background` | $text-invert
`$control-border` | $border
`$control-hover` | $link-hover
`$control-hover-border` | $border-hover
`$control-active` | $link
`$control-active-background` | $link
`$control-active-background-invert` | $link-invert
`$control-active-border` | $link
Typography
`$family-primary` | $family-sans-serif
`$family-code` | $family-monospace
`$size-small` | $size-7
`$size-normal` | $size-6
`$size-medium` | $size-5
`$size-large` | $size-3
`$size-huge` | $size-1
4. Lists and maps
`$colors` | (white: ($white, $black), black: ($black, $white), light: ($light, $light-invert), dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))
`$sizes` | $size-1 $size-2 $size-3 $size-4 $size-5 $size-6