design system token v0.4

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));

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 |

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 */

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 */

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',