The brand mark in the top nav was rendered in the default UI font
(Inter Bold at text-lg). Swap it for the same typographic recipe the
CampaignsPage hero uses — Bebas Neue (font-display), uppercase, tracked,
with a 0.022em currentColor text-stroke that fattens the weight-400
letterforms without the fuzz a synthetic-bold would produce. The size
is bumped to text-3xl and the bolt icon to size-9 so the wordmark reads
as a deliberate logo lockup instead of a piece of UI chrome.
Two deviations from the hero recipe, tuned for the nav-bar context:
- The hero uses Bebas Neue's native italic (~12° skew). Here we
render the roman face and apply a softer skewX(-6deg) transform.
Sharp italics at nav-bar size start to read as a glitch rather
than personality; a gentle oblique keeps the family identity
without sacrificing legibility next to the four right-leaning
nav links.
- A scaleX(1.1) widens the letterforms slightly. Bebas is naturally
tall+narrow, which gets visually crowded at this size next to the
chunky bolt mark — the horizontal scale rebalances the proportions
so the wordmark sits as a peer to the icon instead of receding.
transform-origin: 0 100% anchors the skew to the baseline so the icon-
to-text relationship stays stable, and -ml-0.5 tucks the wordmark
tight against the bolt to read as a single lockup.
While here, change the active page indicator in the same nav from
text-foreground (white in dark / black in light) to text-primary so
the current page reads in brand orange. The mobile drawer's active
state already had a bg-primary/10 wash but kept text-foreground on
top; switch its text to text-primary as well so the orange wash and
the orange label reinforce each other instead of fighting.
Chad Curtis
d31397f60b