Day 3: Colors & Typography

Daily Objective

Apply cohesive color palettes and integrate custom web fonts using Google Fonts.

1. Color Notations

• Named colors: red, teal, navy.
• HEX: #3b82f6 (6-digit hexadecimal for RGB).
• RGB / RGBA: rgb(59, 130, 246) or rgba(59, 130, 246, 0.5) with alpha transparency.
• HSL / HSLA: hsl(217, 91%, 60%) (Hue, Saturation, Lightness).

2. Typography & Google Fonts

<!-- Link font in <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1e293b;
}

h1 {
  font-weight: 700;
  text-align: center;
}

Daily Hands-on Practice (70%)

1. Browse Google Fonts and pick two complementary fonts (one for headings, one for body).
2. Embed the fonts in your page and apply matching color schemes using HEX or HSL.