Stop Using #FFFFFF Everywhere: Copy-Paste CSS

:root {
    color-scheme: light;
    --page-bg: #f5f5f2;
    --surface: #fbfbf9;
    --surface-raised: #ffffff;
    --text: #202020;
    --text-muted: #5f625f;
    --border: #deded9;
    --focus: #b8351d;
}

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
}

.content {
    background: var(--surface);
    border: 1px solid var(--border);
}

.card {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    box-shadow: 0 0.5rem 1.5rem rgb(20 20 18 / 0.06);
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

What the layers are doing

--page-bg covers the largest area, so it is deliberately calm. --surface separates the main content without looking like a floating sheet of printer paper. --surface-raised uses actual white where elevation is useful.

Adjust the system, not one lonely token

If you warm or cool the page background, review the surface, border, muted text, and shadow alongside it. A coherent neutral family usually looks more intentional than a single tinted background surrounded by unrelated grays.

Contrast still needs testing

These values are a practical foundation, not a substitute for testing. Check normal text, large text, controls, focus indicators, error states, and disabled states against the backgrounds on which they actually appear.