diff --git a/components/ui/navbar.tsx b/components/ui/navbar.tsx
index 5883d4e..fe98753 100644
--- a/components/ui/navbar.tsx
+++ b/components/ui/navbar.tsx
@@ -120,7 +120,7 @@ function NavbarLink({
       data-active={active || undefined}
       className={cn(
         'px-3 py-2 text-foreground transition-opacity hover:opacity-70',
-        'data-active:opacity-100',
+        'data-active:text-primary data-active:opacity-100',
         className,
       )}
       {...props}
diff --git a/lib/catalog.ts b/lib/catalog.ts
index 6adc02e..30486e8 100644
--- a/lib/catalog.ts
+++ b/lib/catalog.ts
@@ -266,9 +266,9 @@ export const COMPONENT_CATALOG: ComponentSpec[] = [
     file: 'components/ui/navbar.tsx',
     category: 'navigation',
     exports: ['Navbar', 'NavbarLink', 'navbarVariants'],
-    description: 'Top navigation bar. Fixed top, z-50, h-16. Variants: solid, transparent, minimal. Logo left, nav center, actions right. Mobile hamburger.',
-    props: 'variant?: "solid" | "transparent" | "minimal"; logo?: ReactNode; actions?: ReactNode',
-    example: '<Navbar variant="solid" logo={<Logo size="sm" />}><NavbarLink href="/">Home</NavbarLink></Navbar>',
+    description: 'Top navigation bar. Fixed top, z-50, h-[65px]. Off-white bg (light) / off-black (dark). Font-semibold menu items. Hover: opacity-70 (no bg). Active links: orange (text-primary), full opacity. Variants: solid, transparent, minimal. Logo left, nav center, actions right. Mobile hamburger.',
+    props: 'variant?: "solid" | "transparent" | "minimal"; logo?: ReactNode; actions?: ReactNode. NavbarLink: active?: boolean',
+    example: '<Navbar variant="solid" logo={<Logo size="sm" />}><NavbarLink href="/" active>Home</NavbarLink><NavbarLink href="/about">About</NavbarLink></Navbar>',
   },
   {
     name: 'Breadcrumb',
diff --git a/skill/SKILL.md b/skill/SKILL.md
index fdf666e..2276282 100644
--- a/skill/SKILL.md
+++ b/skill/SKILL.md
@@ -440,11 +440,11 @@ All components live in `components/ui/`. Import with `@/components/ui/<name>`.
 #### Navbar
 - **File**: `components/ui/navbar.tsx`
 - **Exports**: `Navbar`, `NavbarLink`, `navbarVariants`
-- **Description**: Top navigation bar. Fixed top, z-50, h-16. Variants: solid, transparent, minimal. Logo left, nav center, actions right. Mobile hamburger.
-- **Props**: `variant?: "solid" | "transparent" | "minimal"; logo?: ReactNode; actions?: ReactNode`
+- **Description**: Top navigation bar. Fixed top, z-50, h-[65px]. Off-white bg (light) / off-black (dark). Font-semibold menu items. Hover: opacity-70 (no bg). Active links: orange (text-primary), full opacity. Variants: solid, transparent, minimal. Logo left, nav center, actions right. Mobile hamburger.
+- **Props**: `variant?: "solid" | "transparent" | "minimal"; logo?: ReactNode; actions?: ReactNode. NavbarLink: active?: boolean`
 - **Example**:
 ```tsx
-<Navbar variant="solid" logo={<Logo size="sm" />}><NavbarLink href="/">Home</NavbarLink></Navbar>
+<Navbar variant="solid" logo={<Logo size="sm" />}><NavbarLink href="/" active>Home</NavbarLink><NavbarLink href="/about">About</NavbarLink></Navbar>
 ```
 
 #### Breadcrumb