Every page on your site is framed by two persistent elements: the header at the top and the footer at the bottom. Their color treatment creates the structural scaffolding that contains your content and navigation.
Header Color Patterns
Transparent/blend header: The header uses the same background as the content area, creating a seamless, modern feel. Navigation items are differentiated by typography and spacing, not by a distinct header background. Common on portfolio and editorial sites.
Contrasting header: The header uses a distinct background (your dark base, a tinted surface, or a solid brand color) that clearly separates navigation from content. Common on corporate, ecommerce, and SaaS sites where the navigation needs to be immediately findable.
Sticky glass header: A backdrop-blur effect that lets content scroll underneath while maintaining legibility. This requires a semi-transparent version of your surface color. Works beautifully but requires careful contrast testing because the background is partially transparent.
Footer Color Treatment
Footers are almost universally dark or strongly contrasting. A dark footer (using your dark base) signals "this is the end of the page" and provides a clear boundary. It also creates a strong backdrop for footer links, contact information, and secondary navigation.
Matching Header and Footer
There is no rule that says headers and footers must match, but they should feel like they belong to the same system. Using the same dark base for both creates bookend consistency. Using a light header and dark footer creates a natural top-to-bottom flow from light to dark.