Style Guide

Color Palette

Hale Groves Brand

Leaf
Grass
Citrus
Sky
Red Hale

Mapped to User Interface

Primary
Secondary
Tertiary
Accent
Call to Action
Typography

Roboto Slab

h1 Heading

h2 Heading

h3 Heading

h4 Heading

Cras sed tortor metus. Aliquam feugiat semper purus mattis auctor. Sed placerat tempor eros sed feugiat. In massa ipsum, venenatis sit amet ligula in, congue tincidunt risus. Proin et ornare tortor. Etiam egestas, ligula ac molestie malesuada, risus neque interdum elit, suscipit molestie risus ligula eu leo. Nulla facilisi. Curabitur pulvinar rhoncus laoreet. Proin id porta odio. Vivamus pulvinar bibendum est id imperdiet.

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. Mauris molestie malesuada nisi, et semper enim varius ut.

Buttons

Large Buttons

Standard Buttons

Standard Anchor as Button

Link Button Default Primary Secondary Accent Add to Cart

Small Buttons

Extra Small Buttons

Panels

Default

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-default

Default Borderless

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-default .panel-borderless

Default Borderless Clean

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-default .panel-borderless .panel-underline

Primary

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-primary

Primary Borderless

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-primary .panel-borderless

Primary Borderless Clean

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-primary .panel-borderless .panel-clean

Secondary

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-secondary

Secondary Borderless

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-secondary .panel-borderless

Secondary Borderless Clean

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-secondary .panel-borderless .panel-clean

Tertiary

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-tertiary

Tertiary Borderless

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-tertiary .panel-borderless

Tertiary Borderless Clean

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-tertiary .panel-borderless .panel-clean

Accent

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-accent

Accent Borderless

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-accent .panel-borderless

Accent Borderless Clean

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-accent .panel-borderless .panel-clean
Tables

Default

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Default with Borders

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Default with Borders and Stripes

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Primary with Borders and Stripes

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Secondary with Borders and Stripes

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Alerts
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Icons
fa-adjust []
fa-adn []
fa-align-center []
fa-align-justify []
fa-align-left []
fa-align-right []
fa-ambulance []
fa-anchor []
fa-android []
fa-angle-double-down []
fa-angle-double-left []
fa-angle-double-right []
fa-angle-double-up []
fa-angle-down []
fa-angle-left []
fa-angle-right []
fa-angle-up []
fa-apple []
fa-archive []
fa-arrow-circle-down []
fa-arrow-circle-left []
fa-arrow-circle-o-down []
fa-arrow-circle-o-left []
fa-arrow-circle-o-right []
fa-arrow-circle-o-up []
fa-arrow-circle-right []
fa-arrow-circle-up []
fa-arrow-down []
fa-arrow-left []
fa-arrow-right []
fa-arrow-up []
fa-arrows []
fa-arrows-alt []
fa-arrows-h []
fa-arrows-v []
fa-asterisk []
fa-automobile (alias) []
fa-backward []
fa-ban []
fa-bank (alias) []
fa-bar-chart-o []
fa-barcode []
fa-bars []
fa-beer []
fa-behance []
fa-behance-square []
fa-bell []
fa-bell-o []
fa-bitbucket []
fa-bitbucket-square []
fa-bitcoin (alias) []
fa-bold []
fa-bolt []
fa-bomb []
fa-book []
fa-bookmark []
fa-bookmark-o []
fa-briefcase []
fa-btc []
fa-bug []
fa-building []
fa-building-o []
fa-bullhorn []
fa-bullseye []
fa-cab (alias) []
fa-calendar []
fa-calendar-o []
fa-camera []
fa-camera-retro []
fa-car []
fa-caret-down []
fa-caret-left []
fa-caret-right []
fa-caret-square-o-down []
fa-caret-square-o-left []
fa-caret-square-o-right []
fa-caret-square-o-up []
fa-caret-up []
fa-certificate []
fa-chain (alias) []
fa-chain-broken []
fa-check []
fa-check-circle []
fa-check-circle-o []
fa-check-square []
fa-check-square-o []
fa-chevron-circle-down []
fa-chevron-circle-left []
fa-chevron-circle-right []
fa-chevron-circle-up []
fa-chevron-down []
fa-chevron-left []
fa-chevron-right []
fa-chevron-up []
fa-child []
fa-circle []
fa-circle-o []
fa-circle-o-notch []
fa-circle-thin []
fa-clipboard []
fa-clock-o []
fa-cloud []
fa-cloud-download []
fa-cloud-upload []
fa-cny (alias) []
fa-code []
fa-code-fork []
fa-codepen []
fa-coffee []
fa-cog []
fa-cogs []
fa-columns []
fa-comment []
fa-comment-o []
fa-comments []
fa-comments-o []
fa-compass []
fa-compress []
fa-copy (alias) []
fa-credit-card []
fa-crop []
fa-crosshairs []
fa-css3 []
fa-cube []
fa-cubes []
fa-cut (alias) []
fa-cutlery []
fa-dashboard (alias) []
fa-database []
fa-dedent (alias) []
fa-delicious []
fa-desktop []
fa-deviantart []
fa-digg []
fa-dollar (alias) []
fa-dot-circle-o []
fa-download []
fa-dribbble []
fa-dropbox []
fa-drupal []
fa-edit (alias) []
fa-eject []
fa-ellipsis-h []
fa-ellipsis-v []
fa-empire []
fa-envelope []
fa-envelope-o []
fa-envelope-square []
fa-eraser []
fa-eur []
fa-euro (alias) []
fa-exchange []
fa-exclamation []
fa-exclamation-circle []
fa-exclamation-triangle []
fa-expand []
fa-external-link []
fa-external-link-square []
fa-eye []
fa-eye-slash []
fa-facebook []
fa-facebook-square []
fa-fast-backward []
fa-fast-forward []
fa-fax []
fa-female []
fa-fighter-jet []
fa-file []
fa-file-archive-o []
fa-file-audio-o []
fa-file-code-o []
fa-file-excel-o []
fa-file-image-o []
fa-file-movie-o (alias) []
fa-file-o []
fa-file-pdf-o []
fa-file-photo-o (alias) []
fa-file-picture-o (alias) []
fa-file-powerpoint-o []
fa-file-sound-o (alias) []
fa-file-text []
fa-file-text-o []
fa-file-video-o []
fa-file-word-o []
fa-file-zip-o (alias) []
fa-files-o []
fa-film []
fa-filter []
fa-fire []
fa-fire-extinguisher []
fa-flag []
fa-flag-checkered []
fa-flag-o []
fa-flash (alias) []
fa-flask []
fa-flickr []
fa-floppy-o []
fa-folder []
fa-folder-o []
fa-folder-open []
fa-folder-open-o []
fa-font []
fa-forward []
fa-foursquare []
fa-frown-o []
fa-gamepad []
fa-gavel []
fa-gbp []
fa-ge (alias) []
fa-gear (alias) []
fa-gears (alias) []
fa-gift []
fa-git []
fa-git-square []
fa-github []
fa-github-alt []
fa-github-square []
fa-gittip []
fa-glass []
fa-globe []
fa-google []
fa-google-plus []
fa-google-plus-square []
fa-graduation-cap []
fa-group (alias) []
fa-h-square []
fa-hacker-news []
fa-hand-o-down []
fa-hand-o-left []
fa-hand-o-right []
fa-hand-o-up []
fa-hdd-o []
fa-header []
fa-headphones []
fa-heart []
fa-heart-o []
fa-history []
fa-home []
fa-hospital-o []
fa-html5 []
fa-image (alias) []
fa-inbox []
fa-indent []
fa-info []
fa-info-circle []
fa-inr []
fa-instagram []
fa-institution (alias) []
fa-italic []
fa-joomla []
fa-jpy []
fa-jsfiddle []
fa-key []
fa-keyboard-o []
fa-krw []
fa-language []
fa-laptop []
fa-leaf []
fa-legal (alias) []
fa-lemon-o []
fa-level-down []
fa-level-up []
fa-life-bouy (alias) []
fa-life-ring []
fa-life-saver (alias) []
fa-lightbulb-o []
fa-link []
fa-linkedin []
fa-linkedin-square []
fa-linux []
fa-list []
fa-list-alt []
fa-list-ol []
fa-list-ul []
fa-location-arrow []
fa-lock []
fa-long-arrow-down []
fa-long-arrow-left []
fa-long-arrow-right []
fa-long-arrow-up []
fa-magic []
fa-magnet []
fa-mail-forward (alias) []
fa-mail-reply (alias) []
fa-mail-reply-all (alias) []
fa-male []
fa-map-marker []
fa-maxcdn []
fa-medkit []
fa-meh-o []
fa-microphone []
fa-microphone-slash []
fa-minus []
fa-minus-circle []
fa-minus-square []
fa-minus-square-o []
fa-mobile []
fa-mobile-phone (alias) []
fa-money []
fa-moon-o []
fa-mortar-board (alias) []
fa-music []
fa-navicon (alias) []
fa-openid []
fa-outdent []
fa-pagelines []
fa-paper-plane []
fa-paper-plane-o []
fa-paperclip []
fa-paragraph []
fa-paste (alias) []
fa-pause []
fa-paw []
fa-pencil []
fa-pencil-square []
fa-pencil-square-o []
fa-phone []
fa-phone-square []
fa-photo (alias) []
fa-picture-o []
fa-pied-piper []
fa-pied-piper-alt []
fa-pied-piper-square (alias) []
fa-pinterest []
fa-pinterest-square []
fa-plane []
fa-play []
fa-play-circle []
fa-play-circle-o []
fa-plus []
fa-plus-circle []
fa-plus-square []
fa-plus-square-o []
fa-power-off []
fa-print []
fa-puzzle-piece []
fa-qq []
fa-qrcode []
fa-question []
fa-question-circle []
fa-quote-left []
fa-quote-right []
fa-ra (alias) []
fa-random []
fa-rebel []
fa-recycle []
fa-reddit []
fa-reddit-square []
fa-refresh []
fa-renren []
fa-reorder (alias) []
fa-repeat []
fa-reply []
fa-reply-all []
fa-retweet []
fa-rmb (alias) []
fa-road []
fa-rocket []
fa-rotate-left (alias) []
fa-rotate-right (alias) []
fa-rouble (alias) []
fa-rss []
fa-rss-square []
fa-rub []
fa-ruble (alias) []
fa-rupee (alias) []
fa-save (alias) []
fa-scissors []
fa-search []
fa-search-minus []
fa-search-plus []
fa-send (alias) []
fa-send-o (alias) []
fa-share []
fa-share-alt []
fa-share-alt-square []
fa-share-square []
fa-share-square-o []
fa-shield []
fa-shopping-cart []
fa-sign-in []
fa-sign-out []
fa-signal []
fa-sitemap []
fa-skype []
fa-slack []
fa-sliders []
fa-smile-o []
fa-sort []
fa-sort-alpha-asc []
fa-sort-alpha-desc []
fa-sort-amount-asc []
fa-sort-amount-desc []
fa-sort-asc []
fa-sort-desc []
fa-sort-down (alias) []
fa-sort-numeric-asc []
fa-sort-numeric-desc []
fa-sort-up (alias) []
fa-soundcloud []
fa-space-shuttle []
fa-spinner []
fa-spoon []
fa-spotify []
fa-square []
fa-square-o []
fa-stack-exchange []
fa-stack-overflow []
fa-star []
fa-star-half []
fa-star-half-empty (alias) []
fa-star-half-full (alias) []
fa-star-half-o []
fa-star-o []
fa-steam []
fa-steam-square []
fa-step-backward []
fa-step-forward []
fa-stethoscope []
fa-stop []
fa-strikethrough []
fa-stumbleupon []
fa-stumbleupon-circle []
fa-subscript []
fa-suitcase []
fa-sun-o []
fa-superscript []
fa-support (alias) []
fa-table []
fa-tablet []
fa-tachometer []
fa-tag []
fa-tags []
fa-tasks []
fa-taxi []
fa-tencent-weibo []
fa-terminal []
fa-text-height []
fa-text-width []
fa-th []
fa-th-large []
fa-th-list []
fa-thumb-tack []
fa-thumbs-down []
fa-thumbs-o-down []
fa-thumbs-o-up []
fa-thumbs-up []
fa-ticket []
fa-times []
fa-times-circle []
fa-times-circle-o []
fa-tint []
fa-toggle-down (alias) []
fa-toggle-left (alias) []
fa-toggle-right (alias) []
fa-toggle-up (alias) []
fa-trash-o []
fa-tree []
fa-trello []
fa-trophy []
fa-truck []
fa-try []
fa-tumblr []
fa-tumblr-square []
fa-turkish-lira (alias) []
fa-twitter []
fa-twitter-square []
fa-umbrella []
fa-underline []
fa-undo []
fa-university []
fa-unlink (alias) []
fa-unlock []
fa-unlock-alt []
fa-unsorted (alias) []
fa-upload []
fa-usd []
fa-user []
fa-user-md []
fa-users []
fa-video-camera []
fa-vimeo-square []
fa-vine []
fa-vk []
fa-volume-down []
fa-volume-off []
fa-volume-up []
fa-warning (alias) []
fa-wechat (alias) []
fa-weibo []
fa-weixin []
fa-wheelchair []
fa-windows []
fa-won (alias) []
fa-wordpress []
fa-wrench []
fa-xing []
fa-xing-square []
fa-yahoo []
fa-yen (alias) []
fa-youtube []
fa-youtube-play []
fa-youtube-square []