Solice UI
Back to the curriculum

Chapter 3 · CSS & Layout

Color and typography

Color and type should help readers understand priority, relationship, and state. A small, consistent set of roles is easier to read and maintain than many almost-identical values.

Beginner · Lesson 3 of 6 in this chapter

Typography creates reading rhythm

Font size, weight, line height, and line length work together. Body text needs comfortable spacing and a reasonable measure, while headings should clearly separate sections without overwhelming the content.

Color should carry a truthful role

Use text, muted, surface, border, accent, and status roles consistently. Important meaning should not depend on color alone, and foreground/background pairs need enough contrast in every supported appearance.

Designing an article page

  1. Use one body role for paragraphs and a stronger role for headings.
  2. Limit line length so the eye can find the next line easily.
  3. Use accent color for links and focus, not for every decorative detail.
  • Readable body text is the baseline, not an afterthought.
  • Use semantic color roles instead of scattered hex values.
  • Check contrast in Light and Dark appearances.