Refining Colors: From Basic Black to Sophisticated Neutrals

When building a typography-focused website, color might seem secondary—after all, we’re mostly dealing with black text on white backgrounds. But the devil is in the details, and those details can make the difference between a harsh reading experience and one that feels refined and comfortable.

The Problem with Pure Black

Most websites default to pure black (#000000) text on pure white (#ffffff) backgrounds. It’s simple, it’s high contrast, and it works. But it’s also harsh. On modern high-resolution screens, this maximum contrast can cause eye strain during extended reading sessions.

/* The default approach - harsh but functional */
body {
  color: #000000;
  background: #ffffff;
}

The Initial Solution: Warm Grays

My first attempt at refinement added warmth to the entire palette:

/* First refinement - too warm */
:root {--theme-fg: 40deg 8% 8%; /* Warm black #0a0908 */--theme-bg: 40deg 20% 99%; /* Warm white #fdfcfb */
}

This created a cozy, book-like feeling, but feedback revealed an issue: the “white” background looked gray on many screens. The warmth that felt sophisticated in isolation appeared dingy when compared to other websites.

Finding the Balance

The current solution strikes a careful balance:

/* Current refinement - pure white, subtle warm black */
:root {
  /* Pure white background */--bg-brightness: 100%; /* #ffffff */
 
  /* Very subtle warm black text */--fg-hue: 30deg; /* Slight warmth */--fg-saturation: 2%; /* Barely perceptible */--fg-brightness: 10%; /* #1a1918 */
}

This gives us:

• Pure white backgrounds that feel clean and modern
• Subtly warm black text that’s 98% neutral but 100% easier on the eyes
• High contrast (13:1 ratio) that exceeds WCAG AAA standards

The Architecture: CSS Custom Properties

The color system uses CSS variables as a single source of truth:

/* Generate a 19-step opacity scale */--theme-color-900: hsl(var(--theme-fg) / 1.0);--theme-color-850: hsl(var(--theme-fg) / 0.9675);
/*... down to... */--theme-color-50: hsl(var(--theme-fg) / 0.0225);

This creates consistent shading throughout the design while maintaining a minimal color palette.

Sophisticated Link Colors

Rather than default web blue, links use a refined steel blue:

Combined with subtle underlines that darken on hover:

.inline-link {
  text-decoration-color: hsl(0deg 0% 70%);
}
.inline-link:hover {
  text-decoration-color: hsl(0deg 0% 40%);
}

Micro-Adjustments Matter

Small details enhance readability:

Optical Corrections

Headers appear slightly lighter than body text for visual balance:

h1, h2 {
  color: hsl(0deg 0% 12%); /* 2% lighter than body */
}

Context-Aware Contrast

Small text gets darker for better readability:

.text-sm,.caption {
  color: hsl(0deg 0% 30%); /* Higher contrast */
}

Refined Selection Colors

Instead of harsh system blues, text selection uses a muted blue:

::selection {
  background: hsl(220deg 40% 92%);
  color: hsl(0deg 0% 10%);
}

Dark Mode Considerations

Dark mode inverts the approach with warm whites on warm blacks:

:root[data-theme="dark"] {--bg-brightness: 6%; /* Warm black background */--fg-brightness: 88%; /* Warm white text */
}

Text opacity is reduced to 90% to prevent halation on OLED screens.

Implementation Guide

To adjust the color system:

1. For warmer tones: Increase --hue to 40-60deg
2. For cooler tones: Set --hue to 200-220deg
3. For pure grayscale: Set --saturation to 0%
4. For off-white backgrounds: Reduce --bg-brightness to 98-99%

All changes cascade automatically through the component system.

The Result

These refinements create a reading experience that feels:

• Professional without being stark
• Comfortable without being dull
• Sophisticated through restraint, not complexity

Sometimes the best design decisions are the ones readers don’t consciously notice—they just feel right.

Quick Reference

Current color values:

• Background: #ffffff (pure white)
• Text: #1a1918 (subtle warm black)
• Secondary: #595959 (neutral gray)
• Links: #365880 (steel blue)
• Focus: 1.5px outline matching link color

All defined in src/styles/global.css as the single source of truth.