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-primary-02">
      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
#78be20
scss
$color-font-primary-01
ios
ColorFontPrimary01
andr
color_font_primary_01
es6
ColorFontPrimary01
val
#007574
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
#222020
scss
$color-font-darker
ios
ColorFontDarker
andr
color_font_darker
es6
ColorFontDarker
val
#3c3738
scss
$color-font-dark
ios
ColorFontDark
andr
color_font_dark
es6
ColorFontDark
val
#6f676c
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
#2282a8
scss
$color-font-info
ios
ColorFontInfo
andr
color_font_info
es6
ColorFontInfo
val
#41a017
scss
$color-font-success
ios
ColorFontSuccess
andr
color_font_success
es6
ColorFontSuccess
val
#c86f21
scss
$color-font-warning
ios
ColorFontWarning
andr
color_font_warning
es6
ColorFontWarning
val
#b42a27
scss
$color-font-danger
ios
ColorFontDanger
andr
color_font_danger
es6
ColorFontDanger