Style Guide

Adherence to this guide and assets page will ensure that Yabla web products retain a cohesive design language and brand image remains consistent.

Primary Font

Roboto is the primary typeface used on Yabla. It is used globally, on buttons, and for paragraph text.

Roboto

View on Google fonts

Grumpy wizards make toxic brew for the evil Queen and Jack.

ABCDEFGHIJKLM

NOPQRSTUVWXYZ

abcdefjhijklm

nopqurestuvwxyz

1234567890

Roboto A-Z and numerals

Secondary Font

Quicksand is the secondary typeface used on Yabla. It is used for headings and subsections. It is also matched to the Yabla Logo

Quicksand

View on Google fonts

Grumpy wizards make toxic brew for the evil Queen and Jack.

ABCDEFGHIJKLM

NOPQRSTUVWXYZ

abcdefjhijklm

nopqurestuvwxyz

1234567890

Quicksand A-Z and numerals

Headers

Quicksand Regular is the standard font used for headers on Yabla.

h1

font-size: 32px;

font-weight: 400;

letter-spacing: 0.02em;

color: #4D61D4;

h2

font-size: 24px;

font-weight: 400;

letter-spacing: 0.02em;

color: #F78226;

h3

font-size: 20px;

font-weight: 400;

letter-spacing: 0.02em;

color: not specified;

h4

font-size: 16px;

font-weight: 400;

letter-spacing: 0.02em;

color: not specified;

Paragraphs and Captions

Roboto is the standard font used for paragraph text on Yabla.

Paragraph Text

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.

font-size: 20px;

font-weight: 400;

line-height: 1.6;

letter-spacing: 0.02em;

Captions

Grumpy wizards make toxic brew for the evil Queen and Jack.

font-size: 16px;

letter-spacing: 0.02em;

Buttons and Labels

Roboto is also used for buttons and subheading Labels.

Sub-Heading

font-family: 'Roboto', sans-serif;

font-size: 16px;

font-style: normal;

font-weight: 400;

letter-spacing: 0.08em;

Roboto is also used for special title texts or italicized descriptions.

font-family: 'Roboto', sans-serif;

font-size: 16px;

font-style: italic;

font-weight: 400;

color: #224A9A;

letter-spacing: 0.04em;

Color

The Yabla color palette is white and blue, supported by shades of grey, and complimented by orange. Secondary colors are used for emphasis and to create a sense of curiosity and play. The overall tone is quirky and educational.

These are the primary colors used

These are the secondary colors used

These are the gradients used

These are the background styles used

Icons

Custom icons have been developed to visually represent Yabla and its language offerings.

Language Icons

Version 1

Version 2

Dashboard Icons

Videoplayer Bottom Controls

Videoplayer Bottom Controls Active

Simple Filter Applied with active class | filter: hue-rotate( 164deg) saturate(1.2);

Videoplayer Top Icons

Videoplayer Top Icons active

Simple Filter Applied with active class | filter: hue-rotate( 164deg) saturate(1.2);

Other Icons

Other Icons Active

Simple Filter Applied with active class | filter: hue-rotate( 164deg) saturate(1.2);

Change Icons Green

Simple Filter Applied to non-active (blue icon) with green class | filter: hue-rotate(260deg) contrast(1.64) saturate(0.72);

...or custom icon with css | background: linear-gradient(135deg, #E4F5A3 0%, #3DA741 100%);

Buttons

There are three standard button types on Yabla.

Feature Button — Use the feature button for sections with multiple CTAs that showcase different features and either change page, input information, or initiate a pop-up (eg. "Dashboard" "Review Vocabulary", "Assign To Class")

Small Button — Use the small button for minor actions that are often informational, such as disclosing existing information or linking from one source to another, or change an existing action, such as save progress or exit. (eg. "view more", "Save").

Important Button — Use large fill buttons for bold call-to-actions that change the page or showcase a single *important call to action. (eg. "Purchase", "Submit Assignment")

Navigation, Search, Toggles

    Inactive
    Toggles

Form Elements