Foundations

Text colors

scss:Ready
Usage
Code

Common text colors :

For common usage the following text color are allowed

Note that it is not forbiden to use any color you want specific use cases but be extra carefull with accessibility, and reserve non-standard colors for non-standard uses cases


Viewport: px 
<div class="example">
  <div class="example__container">
    <div class="example__font-color-primary-01">Font color</div>
  </div>
  <div class="example__container">
    <div class="example__font-color-darkest">Font color</div>
  </div>
  <div class="example__container">
    <div class="example__font-color-darker">Font color</div>
  </div>
  <div class="example__container">
    <div class="example__font-color-dark">Font color</div>
  </div>
  <div class="example__container">
    <div class="example__font-color-light">Font color</div>
  </div>
  <div class="example__container example__container--reverted">
    <div class="example__font-color-lightest">Font color</div>
  </div>
  <div class="example__container">
    <div class="example__font-color-danger">Font color</div>
  </div>
  <div class="example__container">
    <div class="example__font-color-warning">Font color</div>
  </div>
  <div class="example__container">
    <div class="example__font-color-info">Font color</div>
  </div>
  <div class="example__container">
    <div class="example__font-color-success">Font color</div>
  </div>
</div>


val
#188803
scss
$color-font-primary-01
ios
ColorFontPrimary01
andr
color_font_primary_01
es6
ColorFontPrimary01
val
#6a7081
scss
$color-font-primary-02
ios
ColorFontPrimary02
andr
color_font_primary_02
es6
ColorFontPrimary02
val
#000000
scss
$color-font-darkest
ios
ColorFontDarkest
andr
color_font_darkest
es6
ColorFontDarkest
val
#191919
scss
$color-font-darker
ios
ColorFontDarker
andr
color_font_darker
es6
ColorFontDarker
val
#333333
scss
$color-font-dark
ios
ColorFontDark
andr
color_font_dark
es6
ColorFontDark
val
#666666
scss
$color-font-light
ios
ColorFontLight
andr
color_font_light
es6
ColorFontLight
val
#ffffff
scss
$color-font-lightest
ios
ColorFontLightest
andr
color_font_lightest
es6
ColorFontLightest
val
#007bb4
scss
$color-font-info
ios
ColorFontInfo
andr
color_font_info
es6
ColorFontInfo
val
#188803
scss
$color-font-success
ios
ColorFontSuccess
andr
color_font_success
es6
ColorFontSuccess
val
#c65200
scss
$color-font-warning
ios
ColorFontWarning
andr
color_font_warning
es6
ColorFontWarning
val
#c61112
scss
$color-font-danger
ios
ColorFontDanger
andr
color_font_danger
es6
ColorFontDanger