Typography
Scale and Weight
The set of styles is based on a typographic scale 12, 14, 16, 20, and 34. Vertical spacing is set on an 8px baseline. The only typeface used is Rubik Regular (400) and Medium (500).
.ftds-type--display-4
Light 112px
.ftds-type--display-3
Regular 56px
.ftds-type--display-2
Regular 45px
.ftds-type--display-1
Regular 34px
.ftds-type--headline
Regular 24px
.ftds-type--title
Medium 20px
.ftds-type--body-standard
Body standard 16px
.ftds-type--subheading
Regular 16px
.ftds-type--body-2
Medium 14px
.ftds-type--body-1
Regular 14px
.ftds-type--caption
Regular 12px
Additional Adjustments
Use opacity of different degrees to convey information hierarchy. The level of opacity used for text depends on whether your background is darker or lighter.
Dark text on light backgrounds
Bold text
class="ftds-text--bold"
#000000
87%
Primary text
#000000
87%
Secondary text
class="ftds-text--light"
#000000
54%
Disabled / Hint text
class="ftds-text--x-light"
#000000
38%
Icons
class="ftds-text--x-light"
#000000
38%
Light text on dark backgrounds
Bold text
class="ftds-text--white ftds-text--bold"
#FFFFFF
100%
Primary text
class="ftds-text--white"
#FFFFFF
100%
Secondary text
class="ftds-text--light-on-dark"
#FFFFFF
70%
Disabled & hint text, and icons
class="ftds-text--x-light-on-dark"
#FFFFFF
50%
Icons
class="ftds-text--x-light-on-dark"
#FFFFFF
50%