Dark Nav

About this block

Dark Nav is a solid primary colored header. The logo chip inverts to a light square, the links render in primary foreground at slightly reduced opacity until hovered, and the single CTA uses the secondary button so it stands off the saturated bar. On mobile the links and CTA collapse into the standard slide in sheet, which stays on the default surface for readability.

The links are one array shared with the sheet. Because every color in the bar is a token pair, primary and primary foreground, the header holds its contrast in light and dark themes without any conditional classes. Keep the CTA on the secondary variant, a primary button would vanish into the bar.

When to use

Reach for this block when the brand should arrive before the content does. A saturated header sets tone faster than any hero, which suits confident brands and works especially well above light, airy pages where the bar provides the only block of color. Prefer standard-sticky-nav when the page already opens with a dark hero or band, two saturated layers stack poorly.

A natural flow around it on a Marketing Pro page:

Before

• Nothing. This is the first block on the page.

After

• Heroes kept light so the bar stays the accent
• Features continuing on the default surface

What you can display

One strong use is a brand strong consumer facing SaaS. Other fits:

• Launch microsite. The saturated bar gives a single page launch its identity without a custom design.
• Agency or studio. A confident color decision in the first pixels, with work shown on white below.
• Seasonal campaign. Swap the primary token at the theme level and the bar carries the campaign color everywhere.

Tip: this header works hardest when nothing else above the fold is saturated, audit the hero before pairing.