From c1d4d55333d9ed9b606c86d4f5185ae436561089 Mon Sep 17 00:00:00 2001
From: Juan <juandgoc@gmail.com>
Date: Mon, 13 Apr 2026 17:46:30 -0500
Subject: [PATCH] design system token v0.4

---
 app/globals.css               |  1 +
 app/tokens/TOKENS.md          |  2 ++
 app/tokens/tokens-dark.css    |  2 ++
 app/tokens/tokens-light.css   |  2 ++
 app/tokens/tokens.ts          |  2 ++
 components/ui/hero.tsx        |  2 +-
 components/ui/navbar.tsx      | 18 +++++++++---------
 components/ui/page-layout.tsx |  2 +-
 components/ui/section.tsx     |  2 +-
 skill/SKILL.md                |  2 ++
 tokens/color.json             | 10 ++++++++++
 11 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 57d21c2..abcc99e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -75,6 +75,7 @@
   --radius-md: var(--radius);
   --radius-lg: calc(var(--radius) + 2px);
   --radius-xl: calc(var(--radius) + 4px);
+  --color-hero-bg: rgb(var(--hero-bg));
   --color-sidebar: rgb(var(--sidebar));
   --color-sidebar-foreground: rgb(var(--sidebar-foreground));
   --color-sidebar-primary: rgb(var(--sidebar-primary));
diff --git a/app/tokens/TOKENS.md b/app/tokens/TOKENS.md
index 76956f3..9d0d4f5 100644
--- a/app/tokens/TOKENS.md
+++ b/app/tokens/TOKENS.md
@@ -37,6 +37,7 @@
 | `color.semantic.border` | `#c4c4bd` | Default border |
 | `color.semantic.input` | `#c4c4bd` | Input border |
 | `color.semantic.ring` | `#d95e2a` | Focus ring |
+| `color.semantic.hero-bg` | `#ddddd7` | Hero banner background |
 | `color.semantic.chart.1` | `#d95e2a` | Chart accent |
 | `color.semantic.chart.2` | `#575753` | Chart secondary |
 | `color.semantic.chart.3` | `#7f7f79` | Chart tertiary |
@@ -69,6 +70,7 @@
 | `color.dark.border` | `#575753` | Dark border |
 | `color.dark.input` | `#575753` | Dark input border |
 | `color.dark.ring` | `#d95e2a` | Dark focus ring |
+| `color.dark.hero-bg` | `#2f2f2c` | Dark hero banner background |
 | `color.dark.chart.1` | `#d95e2a` | Dark chart accent |
 | `color.dark.chart.2` | `#c4c4bd` | Dark chart secondary |
 | `color.dark.chart.3` | `#a6a69f` | Dark chart tertiary |
diff --git a/app/tokens/tokens-dark.css b/app/tokens/tokens-dark.css
index 9bdd5f2..c16bf01 100644
--- a/app/tokens/tokens-dark.css
+++ b/app/tokens/tokens-dark.css
@@ -41,6 +41,8 @@
   --input: 87 87 83;
   /* Dark focus ring */
   --ring: 217 94 42;
+  /* Dark hero banner background */
+  --hero-bg: 47 47 44;
   /* Dark chart accent */
   --chart-1: 217 94 42;
   /* Dark chart secondary */
diff --git a/app/tokens/tokens-light.css b/app/tokens/tokens-light.css
index 14f2bed..7debb89 100644
--- a/app/tokens/tokens-light.css
+++ b/app/tokens/tokens-light.css
@@ -41,6 +41,8 @@
   --input: 196 196 189;
   /* Focus ring */
   --ring: 217 94 42;
+  /* Hero banner background */
+  --hero-bg: 221 221 215;
   /* Chart accent */
   --chart-1: 217 94 42;
   /* Chart secondary */
diff --git a/app/tokens/tokens.ts b/app/tokens/tokens.ts
index 4a8db66..291fd20 100644
--- a/app/tokens/tokens.ts
+++ b/app/tokens/tokens.ts
@@ -32,6 +32,7 @@ export const ColorTokens = {
   'semantic.border': '#c4c4bd',
   'semantic.input': '#c4c4bd',
   'semantic.ring': '#d95e2a',
+  'semantic.hero-bg': '#ddddd7',
   'semantic.chart.1': '#d95e2a',
   'semantic.chart.2': '#575753',
   'semantic.chart.3': '#7f7f79',
@@ -64,6 +65,7 @@ export const ColorTokens = {
   'dark.border': '#575753',
   'dark.input': '#575753',
   'dark.ring': '#d95e2a',
+  'dark.hero-bg': '#2f2f2c',
   'dark.chart.1': '#d95e2a',
   'dark.chart.2': '#c4c4bd',
   'dark.chart.3': '#a6a69f',
diff --git a/components/ui/hero.tsx b/components/ui/hero.tsx
index b3a232e..7dcdffd 100644
--- a/components/ui/hero.tsx
+++ b/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',
diff --git a/components/ui/navbar.tsx b/components/ui/navbar.tsx
index 503cf79..5883d4e 100644
--- a/components/ui/navbar.tsx
+++ b/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}
diff --git a/components/ui/page-layout.tsx b/components/ui/page-layout.tsx
index f74ef68..f1bd2cc 100644
--- a/components/ui/page-layout.tsx
+++ b/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 && (
diff --git a/components/ui/section.tsx b/components/ui/section.tsx
index 8181d54..0b4b099 100644
--- a/components/ui/section.tsx
+++ b/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: {
diff --git a/skill/SKILL.md b/skill/SKILL.md
index 7c9da35..fdf666e 100644
--- a/skill/SKILL.md
+++ b/skill/SKILL.md
@@ -101,6 +101,7 @@ Source of truth: `tokens/*.json` (W3C DTCG format).
 | `color.semantic.border` | `{color.primitive.grey.3}` | Default border |
 | `color.semantic.input` | `{color.primitive.grey.3}` | Input border |
 | `color.semantic.ring` | `{color.primitive.orange}` | Focus ring |
+| `color.semantic.hero-bg` | `{color.primitive.grey.2}` | Hero banner background |
 | `color.semantic.chart.1` | `{color.primitive.orange}` | Chart accent |
 | `color.semantic.chart.2` | `{color.primitive.grey.7}` | Chart secondary |
 | `color.semantic.chart.3` | `{color.primitive.grey.5}` | Chart tertiary |
@@ -133,6 +134,7 @@ Source of truth: `tokens/*.json` (W3C DTCG format).
 | `color.dark.border` | `{color.primitive.grey.7}` | Dark border |
 | `color.dark.input` | `{color.primitive.grey.7}` | Dark input border |
 | `color.dark.ring` | `{color.primitive.orange}` | Dark focus ring |
+| `color.dark.hero-bg` | `{color.primitive.grey.8}` | Dark hero banner background |
 | `color.dark.chart.1` | `{color.primitive.orange}` | Dark chart accent |
 | `color.dark.chart.2` | `{color.primitive.grey.3}` | Dark chart secondary |
 | `color.dark.chart.3` | `{color.primitive.grey.4}` | Dark chart tertiary |
diff --git a/tokens/color.json b/tokens/color.json
index 9699e36..f7f45b7 100644
--- a/tokens/color.json
+++ b/tokens/color.json
@@ -158,6 +158,11 @@
         "$value": "{color.primitive.orange}",
         "$description": "Focus ring"
       },
+      "hero-bg": {
+        "$type": "color",
+        "$value": "{color.primitive.grey.2}",
+        "$description": "Hero banner background"
+      },
       "chart": {
         "1": {
           "$type": "color",
@@ -325,6 +330,11 @@
         "$value": "{color.primitive.orange}",
         "$description": "Dark focus ring"
       },
+      "hero-bg": {
+        "$type": "color",
+        "$value": "{color.primitive.grey.8}",
+        "$description": "Dark hero banner background"
+      },
       "chart": {
         "1": {
           "$type": "color",