// A base value used to responsively scale all typography, applied to the `` element $font-size-root: 16px; // Font face // Based on https://material.google.com/style/typography.html#typography-typeface // N.B. Although some values are not used in this project // we leave them here just in case they may be required by your project // stylelint-disable value-keyword-case $font-family-sans-serif: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; $font-family-monospace: 'Quicksand', Georgia, "Times New Roman", Times, serif; $font-family-base: $font-family-sans-serif; // stylelint-enable // Font styles // Based on https://material.google.com/style/typography.html#typography-styles $font-size-base: 1rem; // 16px $font-size-display-4: ($font-size-base * 4); $font-size-display-3: ($font-size-base * 3); $font-size-display-2: ($font-size-base * 2); $font-size-display-1: ($font-size-base * 1.74); $font-size-headline: ($font-size-base * 1.51); $font-size-title: ($font-size-base * 1.32); $font-size-caption: 1rem; $font-size-auto: auto; // Material icons default size $material-icon-size: 1.71rem; // $material-icon-size: (24 / strip-unit($font-size-root) * 1rem); // Text Muted Opacity $black-hint-opacity: 0.5; $text-light: #babfc7;