//
// Colors
//
.color__swatch
    padding: $spacer
    border: 1px solid $brand-grey-dimmed
    margin-bottom: ($spacer / 3)
    border-radius: $border-radius-large

.color__name,
.color__hex
    @extend .small
    font-family: $font-family-monospace
    display: block

// colors
.brand-dark
    background: $brand-dark

.brand-light
    background: $brand-light

.brand-cyan
    background: $brand-cyan

.brand-grey
    background: $brand-grey

.brand-grey-light
    background: $brand-grey-light

.brand-grey-dimmed
    background: $brand-grey-dimmed

//
// Fonts
//

.font__name
    font-size: 5vw

.font__name--brandon
    font-family: $headings-font-family
    line-height: $headings-line-height
    color: $headings-color
    font-weight: $headings-font-weight

.font__name--fftisa
    font-family: $font-family-base
    color: $text-color
    font-weight: $font-weight-base