Give the page a background, not a floodlight
Use a restrained off-white as the largest field. A page background around #F2F2EE to #F7F7F4 still reads unmistakably as light mode while providing room for brighter surfaces.
Let content surfaces explain hierarchy
Place the main reading or working area on a near-white surface. Reserve pure white for elevated cards, dialogs, or controls that need additional prominence. A difference of only a few RGB steps can be enough when borders and spacing support it.
Do not turn every paragraph into a card. Surface hierarchy works because it is selective.
Use borders before summoning enormous shadows
A neutral border such as #DEDED9 often creates enough separation. If an element is genuinely raised, add a restrained shadow. If everything casts a shadow, the interface starts hovering and the hierarchy disappears again.
Text colors carry the actual reading experience
Near-black text can feel less severe than absolute black while maintaining strong contrast on a light background. Use muted text only for supporting information, never for essential content that happens to be inconvenient.
Check contrast between every foreground and its real background. “Off-white” does not automatically mean accessible, and neither does “dark gray.” Test the pair.
prefers-color-scheme is a preference, not a command
If your product offers both light and dark themes, the media query is a sensible default signal. It does not remove the need to design either theme carefully. This project deliberately demonstrates a comfortable light theme; it is not a campaign to force light mode on everyone.