design system token v0.4

components/ui/hero.tsx

@@ -11,7 +11,7 @@ const heroVariants = cva('py-24 px-6', {
       split: 'text-left',
     },
     background: {
-      default: 'bg-background',
+      default: 'bg-hero-bg',
       muted: 'bg-muted',
       accent: 'bg-primary/5',
       dark: 'bg-foreground text-background',

components/ui/navbar.tsx

@@ -6,13 +6,13 @@ import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 
 const navbarVariants = cva(
-  'fixed top-0 left-0 right-0 z-50 h-16 font-sans',
+  'fixed top-0 left-0 right-0 z-50 h-[65px] font-sans',
   {
     variants: {
       variant: {
-        solid: 'bg-background border-b border-border',
+        solid: 'bg-card dark:bg-background border-b border-border',
         transparent: 'bg-transparent',
-        minimal: 'bg-background/80 backdrop-blur-sm border-b border-border/50',
+        minimal: 'bg-card/80 dark:bg-background/80 backdrop-blur-sm border-b border-border/50',
       },
     },
     defaultVariants: {
@@ -47,7 +47,7 @@ function Navbar({
       <div className="container mx-auto px-6 h-full flex items-center justify-between">
         {/* Logo slot — left */}
         {logo && (
-          <div data-slot="navbar-logo" className="flex-shrink-0">
+          <div data-slot="navbar-logo" className="shrink-0">
             {logo}
           </div>
         )}
@@ -55,7 +55,7 @@ function Navbar({
         {/* Desktop nav — center */}
         <nav
           data-slot="navbar-nav"
-          className="hidden md:flex items-center gap-1 text-sm font-medium"
+          className="hidden md:flex items-center gap-1 text-sm font-semibold"
         >
           {children}
         </nav>
@@ -93,9 +93,9 @@ function Navbar({
       {mobileOpen && (
         <div
           data-slot="navbar-mobile"
-          className="md:hidden border-b border-border bg-background"
+          className="md:hidden border-b border-border bg-card dark:bg-background"
         >
-          <nav className="container mx-auto px-6 py-4 flex flex-col gap-2 text-sm font-medium">
+          <nav className="container mx-auto px-6 py-4 flex flex-col gap-2 text-sm font-semibold">
             {children}
           </nav>
           {actions && (
@@ -119,8 +119,8 @@ function NavbarLink({
       data-slot="navbar-link"
       data-active={active || undefined}
       className={cn(
-        'px-3 py-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors',
-        'data-[active]:text-foreground data-[active]:font-semibold',
+        'px-3 py-2 text-foreground transition-opacity hover:opacity-70',
+        'data-active:opacity-100',
         className,
       )}
       {...props}

components/ui/page-layout.tsx

@@ -26,7 +26,7 @@ function PageLayout({
       <div
         className={cn(
           'flex flex-1',
-          navbar && 'pt-16', // offset for fixed navbar
+          navbar && 'pt-16.25', // offset for fixed 65px navbar
         )}
       >
         {sidebar && (

components/ui/section.tsx

@@ -7,7 +7,7 @@ const sectionVariants = cva('py-16', {
   variants: {
     variant: {
       default: '',
-      highlighted: 'bg-muted',
+      highlighted: 'bg-card dark:bg-muted',
       accent: 'bg-primary/5',
     },
     width: {