Components

Links & Navigation

The nav link is a ghost button with an underline that grows in from the left on hover — not a static underline that's merely revealed.

Live

Hover to grow the underline

The underline is a small yellow-to-red gradient, animated with scaleX and Ease Settle.

AboutBrandCareersCurrent page

The underline-grow treatment

.nav-link { position: relative; padding-bottom: 4px; }
.nav-link::before {
  content: ""; position: absolute; left: 0; top: 100%;
  width: 100%; height: 2px;
  background-image: linear-gradient(#F7D440, #ED1F1F);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(0, .61, .28, .92);
}
.nav-link:hover::before { transform: scaleX(1); }

Disabled state

Structurally inert, not just dimmed

A disabled or current-page link removes the hover colour change and the underline entirely (height: 0; no background-image) rather than just lowering its opacity. Hover the disabled link above — nothing happens, by design.

Usage

Do / Don't

Do

Animate the underline with transform: scaleX, not width — it composites on the GPU and doesn't trigger layout.
Use Ease Settle (cubic-bezier(0, .61, .28, .92)) for this specific interaction — it's the system's token for nav underline-grow and panel slide-up.
Remove affordance structurally for disabled/current items.

Don’t

Give a disabled nav item a dimmed-but-present underline — remove it entirely.
Reuse the yellow-to-red underline gradient as a generic accent elsewhere — it's specific to this interaction.
Animate width or left/right instead of transform: scaleX.