NATIVE

STYLE TILE

WHAT TO EXPECT

A “Style Tile” is a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the storefront user interface. Creative concepts shown in this Style Tile are opportunities that foster dialogue and feedback loops between stakeholders. These elements may or may not be utilized in high-fidelity mockups.

Imagery & content in this document are not property of BVAccel. This document is to remain confidential and used for internal presentation only.

Primary Colors

#00237e
$color-primary
$color-blue
#9be5f3
$color-tertiary
$color-aqua
#e63235
$color-secondary
$color-red
#fffaf7
$color-light
$color-sand

Neutral Colors

#2e3133
$color-grey-dark
#9ca0a6
$color-grey
#e6e9eb
$color-grey-light
#f7f7f7
$color-off-white

Typography

HEADLINE TYPEFACE

AABBCC123!&

BRANDON GROTESQUE
$global-font-secondary
BODY TYPEFACE

AABBCC123!&

SF PRO (-apple-system}
$global-font-primary
DESKTOP
H1

Headline One

H2

HEADLINE TWO

H3

Headline Three

H4

Headline Four

CTA TEXT
BUTTON STYLE
BODY LARGE

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis.

BODY

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis.

MOBILE
H1

Headline One

H2

HEADLINE TWO

H3

Headline Three

H4

Headline Four

CTA TEXT
BUTTON STYLE
BODY LARGE

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis.

BODY

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis.

Buttons

PRIMARY
.btn.btn--primary

:hover / .is-hovered

:focus / :active / .is-pressed

[disabled] / .is-disabled

.is-loading

.is-success

.is-error

SECONDARY
.btn.btn--secondary

:hover / .is-hovered

:focus / :active / .is-pressed

[disabled] / .is-disabled

.is-loading

.is-success

.is-error

LIGHT
.btn.btn--light

:hover / .is-hovered

:focus / :active / .is-pressed

[disabled] / .is-disabled

.is-loading

.is-success

.is-error

TEXT LINK
.btn.text-link

:hover / .is-hovered

:focus / :active / .is-pressed

[disabled] / .is-disabled

Field variants


:active / :hover / .is-active


.is-error

[disabled] / .is-disabled

Select variants




  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
<div class="select" data-dropdown>
  <input class="select__input" data-dropdown-trigger readonly />
  <ul class="select__list" data-dropdown-content>
    {%- for i in (1..5) -%}
      <li class="select__item" data-dropdown-value="List item {{ i }}">List item {{ i }}</li>
    {%- endfor -%}
  </ul>
</div>

Checkbox variants


:hover / .is-hovered

[checked] / .is-active

[disabled] / .is-disabled

[disabled][checked] / .is-disabled.is-active

<div class="checkbox">
  <input class="checkbox__input" type="checkbox" name="checkbox-1">
  <label class="checkbox__label" for="checkbox-1">Checkbox</label>
</div>

Toggle variants


:hover / .is-hovered

[checked] / .is-active

[disabled] / .is-disabled

[disabled][checked] / .is-disabled.is-active

<div class="radio">
  <input class="radio__input" type="radio" name="radio-1">
  <label class="radio__label" for="radio-1">Radio / Toggle</label>
</div>

Tooltip variants



Top tooltip
Bottom tooltip


<div class="tooltip__container is-hovered">
  <div class="tooltip tooltip--top bg-primary text-white">Top tooltip</div>
</div>
<div class="tooltip__container is-hovered">
  <div class="tooltip tooltip--bottom bg-primary text-white">Bottom tooltip</div>
</div>


Symbols

{% include 'icon-search', class: '...' %}
{% include 'icon-question', class: '...' %}
{% include 'icon-checkmark', class: '...' %}
{% include 'icon-checkmark-small', class: '...' %}
{% include 'icon-x', class: '...' %}
{% include 'icon-select', class: '...' %}
{% include 'icon-caret-left', class: '...' %}
{% include 'icon-caret-right', class: '...' %}
{% include 'icon-plus', class: '...' %}
{% include 'icon-minus', class: '...' %}

BVACCEL