Colors, Units & Typography

Colour Formats

color: #6366F1;                    /* hex — most common */
color: #6366F180;                  /* hex with alpha (50%) */
color: rgb(99 102 241);
color: rgb(99 102 241 / 0.5);      /* modern space syntax + alpha */
color: hsl(239 84% 67%);           /* hue saturation lightness — easy to tweak */
color: oklch(0.68 0.16 277);       /* perceptually uniform — the new standard */
color: transparent;
color: currentColor;               /* "whatever color is" — great for SVG icons */

HSL and OKLCH shine for systematic palettes: keep hue fixed, vary lightness for shades.

Units — When to Use Which

• px — absolute. Borders, shadows, fine details.
• rem — relative to the root font size (16px default). Your default for font sizes and spacing — respects user accessibility settings.
• em — relative to the current font size. Padding that should scale with its text (e.g. buttons).
• % — relative to the parent. Widths.
• vw / vh — 1% of viewport width/height. Hero sections: min-height: 100vh (prefer 100dvh on mobile).
• ch — width of the “0” glyph. Line lengths: max-width: 65ch for readable text.

html { font-size: 16px; }      /* 1rem = 16px */
h1   { font-size: 2.5rem; }    /* 40px, scales with user settings */
.btn { padding: 0.5em 1em; }   /* scales if the button text grows */

Web Fonts

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

body {
  font-family: 'Inter', system-ui, sans-serif;   /* always provide fallbacks */
}
code {
  font-family: 'JetBrains Mono', monospace;
}

The Typography Properties

p {
  font-size: 1rem;
  font-weight: 400;          /* 400 normal, 700 bold; variable fonts: any value */
  line-height: 1.6;          /* unitless multiplier — best practice */
  letter-spacing: -0.01em;   /* tighten headings, never body text */
  text-align: left;
}
h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);   /* fluid type — scales with viewport */
  line-height: 1.1;                       /* big text needs tighter leading */
}
a {
  text-decoration: none;
  text-decoration: underline 2px;          /* or style the underline */
  text-underline-offset: 3px;
}

Readable Text Checklist

• Body: 1rem minimum, line-height 1.5–1.7.
• Line length: 45–75 characters (max-width: 65ch).
• Contrast: 4.5:1 minimum for body text (check with DevTools).
• Real text, not images of text.