Use styles for colors and typography
Styles are a common feature in design tools that help designers use consistent colors and typography. Developers appreciate seeing styles too, because it’s easier to map the styles to variables and existing styles in the codebase or design system.
Colors
For every color used, add it as a style and give it a descriptive name. There are a few techniques for naming colors.
Numerical values
The Material Design color palette uses numbers to signify the saturation of a color.
| Purple Colors |
| Purple 50 |
| Purple 100 |
| Purple 200 |
| Purple 300 |
Descriptive names
GitHub’s color palette generally follows the numerical logic but also translates the colors into descriptive names.
| Descriptive Name | Numerical Value |
| text-gray-light | gray-500 |
| text-gray | gray-600 |
| text-gray-dark | gray-900 |
✨ Project Check-in:
In the project file, add color styles.
New terms:
- Color styles: A color or gradient can be defined and reused across your designs.
Resources:
- Manage and share Styles – Figma
- How to add and style text in your mockup – Figma
- Save Colors, Character Styles, and Components – Adobe XD
Typography
It’s good practice to name heading styles to match the HTML elements developers will use in production. You do not need to know HTML! This is all you need to know:
| HTML Name | Description |
|---|---|
| H1 | Heading level 1. The largest and most important text on a page, usually for titles |
| H2 | Heading level 2. For subtitles. |
| H3 | Heading level 3. For subheaders below an H2. |
| H4 | Heading level 4. For subheaders below an H3. |
| H5 | Heading level 5. For subheaders below an H4. |
| H6 | Heading level 6. For subheaders below an H5. |
For other text, you can use a descriptive naming system that explains the styles’ intended use. Remember, there are no hard rules.
| Name | Description |
|---|---|
| Body text or Paragraph | Body text |
| Caption | Descriptive text shown below an image |
| Modal Header | A title that appears on a modal (a box that appears with an overlay in the background, requiring the user to interact with it before the underlying page becomes active) |
| Text Input Label | Text that appears next to a text input field |
| H5 | Heading level 5. For subheaders below an H4. |
| H6 | Heading level 6. For subheaders below an H5. |
Note: This is not a comprehensive list.
✨ Project Check-in:
In the project file, add text styles.
✨ Exercise: Styles
Task Summary:
- Add color styles
- Add text styles