Barefoot Dreams 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
mine-shaft
tundora
silver-chalice
alabaster
fog
slate-gray
regent-gray
submarine
porcelain
athens-gray
pampas

Typography

.txt-category

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

.txt-section-title

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

.txt-section-subtitle

Fusce facilisis accumsan lectus, eu ornare tellus venenatis id.

.txt-hero-internal

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

.txt-hero-description

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

.txt-product-name

Nunc euismod, felis in pharetra

.txt-product-card-title

Mauris aliquam ultrices felis, vitae auctor

.txt-cta

Nulla aclorem

.txt-eyebrow

Nulla sapien orci, euismod at massa

.txt-article-lg

Quisque vitae rutrum nibh. Suspendisse eget interdum nisl. In non odio elit. Nam in erat eu orci hendrerit tristique id ac eros. Donec molestie sed elit at tristique.

.txt-article-main

Quisque vitae rutrum nibh. Suspendisse eget interdum nisl. In non odio elit. Nam in erat eu orci hendrerit tristique id ac eros. Donec molestie sed elit at tristique. Suspendisse vel felis iaculis, semper nunc vel, posuere purus. Nulla facilisi.

.txt-cta-minor

Quisque vitae rutrum nibh.

Buttons

.btn .btn-solid .btn-size-standard

Submit

.btn--underline

Click Here

Buttons (reverse)

.btn .btn-solid .btn-size-standard .reverse

Submit

Select

Select elements leverage the Vue-multiselect package.

United States
1

Inputs

Custom float label inputs. TODO: Add Simple Vue Validator validation.

Inputs

Custom float label inputs. TODO: Add Simple Vue Validator validation.