____ Yeah-Mobi Style Guide ____

Base colors Pallets

$white : #fff;
$black: #0000;
$turquoise-blue: #00acc8;
$deep-sea-blue: #00567d;
$water-blue: #0d9ddb;
$orangey-yellow: #feb819;
$greyish-brown: #414141;
$warm-grey: #737373;
$greyish: #aaaaaa;
$pinkish-grey: #c8c8c8;
$cool-grey: #e6e6e6;
$pale-grey: #f1f5f7;
$tealish: #3fcec4;
$manatee: #939598;


Font families


@extend .extend_ff_aktiv;


@extend .extend_ff_poppins;

Font Weights

$aktiv-light: 300; $aktiv-regular: 400; $aktiv-medium: 500; $aktiv-bold: 700;
$poppins-light: 300; $poppins-regular: 400; $poppins-medium: 500; $poppins-bold: 700;


Body / Paragaraphs

Lorem Ipsum passage and generate your own text using any number of characters, words, sentences or paragraphs. Commonly used as placeholder text in the graphic and print industries, Lorem Ipsum's origins extend far back to a scrambled Latin passage from Cicero in the middle ages.

Heading 1

    Selectors :: .H1Left-Dark

Heading 2

    Selectors :: .H2Left-Dark

Heading 3

    Selectors :: .H3Left-Dark

Heading 4

    Selectors :: .H4Left-Dark


    Selectors :: .H5Left-Dark

List Style Type

Selector:: .list-item-correct
  • Vestibulum id ligula porta felis euismod semper
  • Vestibulum id ligula porta felis euismod semper

____Buttons and Button type Links____

Selectors :: .banner-pink-button

____Form Elements____

Input/ Select/ Textarea fields

Form field's validation states

Selectors :: .mage-error

Selectors :: .valid

Form field's Disabled state

Selectors :: .disabled
Html Attribute disabled="true" / disabled

Form Checkbox & Radio Button