<header class="border-b border-outline bg-surface-primary">
  <nav class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
    <a href="/" class="font-logo text-title-l text-brand">Roosevelt</a>
    <ul class="flex items-center gap-6">
      <li>
        <a href="/services" class="text-body text-label-secondary
                                    transition-colors duration-150
                                    hover:text-label-primary">
          Services
        </a>
      </li>
      <li>
        <a href="/about" class="text-body text-label-secondary
                                 transition-colors duration-150
                                 hover:text-label-primary">
          About
        </a>
      </li>
      <li>
        <a href="/contact" class="inline-flex items-center rounded-s
                                   bg-brand px-4 py-2 text-body font-medium
                                   text-label-on-color transition-colors
                                   duration-150 hover:opacity-90">
          Contact
        </a>
      </li>
    </ul>
  </nav>
</header>

<a href="/services" class="text-body font-medium text-label-primary"
   aria-current="page">
  Services
</a>