Text Color
Learn about paragraph, and how to best use them in the Base System
1.0 Typography Colors
Typography colors and be managed on an element through the adding of a combo class. By default, the Base System includes a 0-1000 weighted color scale, providing
2.0 Paragraph Classes
| Name | Hex Code |
|---|---|
Text Color White | #FFFFFF |
Text Color Black | #000000 |
Text Color Gray 100 | #000000 |
Text Color Gray 200 | #000000 |
Text Color Gray 300 | #000000 |
Text Color Gray 400 | #000000 |
Text Color Gray 500 | #000000 |
Text Color Gray 600 | #000000 |
Text Color Gray 700 | #000000 |
Text Color Gray 800 | #000000 |
Text Color Gray 900 | #000000 |
3.0 General Usage
3.1 Element Type
Use the default html styles if they make sense for SEO purposes. Otherwise, use heading classes when the typography style doesn't match the default HTML tag. This means that heading classes and HMTL tags should match each other
Has semantic
<section>tag applied to aid web crawlers and improve accessibility and SEO.Prevents accidental nesting of sections within each other
Provides a clear and distinct visual icon within navigator panel
Provides a clear and distinct heirachy within the webpage
3.2 Class Naming
By default the base system includes a number of common sections that should be used when possible. For example, if most of your sections need 72px top and bottom padding, you should apply these styles to your 'Section Regular' class, since this is the class you will most commonly use through thhe project.
If your layout has unique requirements, like different spacing, colors or positioning, you can easily create a custom class. For example, if you are building an FAQ section with unique spacing requirements, just create the class 'Section FAQ'
Last updated
