Boll & Branch Style Guide

A collection of project UI elements. Please note that this is only for reference during development and should never be pushed live. It may become outdated or incomplete depending on future revisions.

Colors

black
white
cream
mid-cream
dark-cream
sea
navy
deep-teal
deep-beige
light-beige
warm-grey
stone
slate
grey-cloud
cool-grey
label-grey
border-grey
border-active
border-number
border-filter
bg-secondary-active
hover-button
hover-secondary-button
disabled-grey
filter-beige
sale
error
firefly_light
firefly_lighter
red
tower_gray
pearl
pampas_dark
ivory
pampas_light
heathered
progress
dark_grey
black_grey
light_grey
firefly_b
dune
dusty_grey

Typography

.large-title

Fusce facilisis accumsan lectus, eu ornare tellus venenatis id.

.h1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mauris felis, tristique non consectetur eu, aliquet id velit.

.h2

Praesent consectetur, nisi vitae auctor blandit, lorem leo cursus diam, eu faucibus eros eros et ligula.

.h3

Fusce facilisis accumsan lectus, eu ornare tellus venenatis id.

.h4

In arcu metus, interdum vel ultrices id, interdum at sem. Phasellus sodales egestas posuere. Fusce ac elit sagittis, dictum lacus viverra, commodo purus.

.h5

Pellentesque a ex gravida, condimentum ligula et, consectetur ex. Aliquam erat volutpat. Proin lacinia non nulla id porttitor.

.h6

Praesent consectetur, nisi vitae auctor blandit, lorem leo cursus diam, eu faucibus eros eros et ligula.

.sh1

Pellentesque a ex gravida, condimentum ligula et, consectetur ex. Aliquam erat volutpat. Proin lacinia non nulla id porttitor.

.sh2

In arcu metus, interdum vel ultrices id, interdum at sem. Phasellus sodales egestas posuere. Fusce ac elit sagittis, dictum lacus viverra, commodo purus.

.sh3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mauris felis, tristique non consectetur eu, aliquet id velit.

Square Buttons

Medium Button: .btn--medium .btn--square .btn--primary--dark

Medium Button: .btn--medium .btn--square .btn--primary--light

Dark Background

Medium Button: .btn--medium .btn--square .btn--secondary--light

Medium Button: .btn--medium .btn--square .btn--secondary--dark

Dark Background

Large Button: .btn--large .btn--square .btn--primary--dark

Large Button: .btn--large .btn--square .btn--primary--light

Dark Background

Large Button: .btn--large .btn--square .btn--secondary--light

Large Button: .btn--large .btn--square .btn--secondary--dark

Dark Background

Active Button: .btn--medium .btn--square .active-hover-button

Active Button: .btn--medium .btn--square .active-hover-button

Dark Background

Active Button: .btn--medium .btn--square .active-secondary

Icon Button: .btn--medium .btn--square .btn--primary--dark .btn--with-icon

Icon Button based on grid: .btn--medium .btn--square .btn--primary--dark .btn--with-icon grid

Link Buttons

Link Button: a.btn--link

Shop Now

Link Icon Small: a.btn--link .small

Shop Now

Rounded Buttons

X-Small Button Default: .btn--x-small .btn--rounded .btn--primary--dark

X-Small Button Default: .btn--x-small .btn--rounded .btn--secondary--dark

Dark Background

X-Small Button Active: .btn--x-small .btn--rounded .active-hover-button

X-Small Button Active: .btn--x-small .btn--rounded .active-white

Dark Background

Badge Default: .btn--x-small .btn--rounded .btn--badge .default

Badge Sale: .btn--x-small .btn--rounded .btn--badge .sale

Number: .btn--x-small .btn--rounded .btn--number

Label: .btn--x-small .btn--rounded .default-label

X-Small Filter Default: .btn--x-small .btn--rounded .btn--secondary--light

X-Small Filter Default: .btn--x-small .btn--rounded .btn--secondary--alternate

Dark Background

X-Small Filter Active: .btn--x-small .btn--rounded .active-sea

X-Small Filter Active: .btn--x-small .btn--rounded .active-white

Dark Background

X-Small Filter Disabled: .btn--x-small .btn--rounded disabled

X-Small Filter Beige: .btn--x-small .btn--secondary--beige

Small Button Default: .btn--small .btn--rounded .btn--secondary--light

Small Button Default: .btn--small .btn--rounded .btn--secondary--dark

Dark Background

Small Button Active: .btn--small .btn--rounded .active-sea

Small Button Active: .btn--small .btn--rounded .active-white

Dark Background

Filter Default: .btn--small .btn--rounded .btn--secondary--light > span.circle

Filter Active: .btn--small .btn--rounded .active-sea > span.circle

Filter Disabled: .btn--small .btn--rounded disabled > span.circle

Inputs

Custom float label inputs. TODO: Define library for validations. (Vuetify has a built-in validation)

Select

Libraries like Vuetify & Vue-multiselect could save us time building the forms, needs discussion with the team.