monadical/greyhaven-design-system
14
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

design system token v0.1

Browse Source
This commit is contained in:
Juan
2026-04-13 15:33:00 -05:00
parent 52b4156653
commit c3215945f2
63 changed files with 11562 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
app/globals.css
View File

@@ -1,12 +1,17 @@
@import 'tailwindcss';
@import 'tw-animate-css';
@import './tokens/tokens-light.css';
@import './tokens/tokens-dark.css';
@custom-variant dark (&:is(.dark *));
/* =============================================================================
GREYHAVEN DESIGN TOKENS
Based on Greyhaven Brand Guidelines v1.0
Token values are auto-generated by Style Dictionary from tokens/*.json
(W3C DTCG format). DO NOT hand-edit :root or .dark — edit the source
token files and run `pnpm tokens:build` instead.
Color Philosophy:
- Neutral and minimal scheme
- Off-black, warm grey, and white form the base
@@ -14,142 +19,23 @@
- No gradients, no decorative color
============================================================================= */
/* Radius — not color, kept inline */
:root {
/* Background & Foreground */
--background: 240 240 236; /* Grey 1 #F0F0EC */
--foreground: 22 22 20; /* Off-black #161614 */
/* Card */
--card: 249 249 247; /* Off-white #F9F9F7 - elevated from background */
--card-foreground: 22 22 20;
/* Popover */
--popover: 249 249 247;
--popover-foreground: 22 22 20;
/* Primary - Orange accent (used sparingly) */
--primary: 217 94 42; /* Orange #D95E2A */
--primary-foreground: 249 249 247; /* Off-white */
/* Secondary */
--secondary: 240 240 236; /* Grey 1 #F0F0EC */
--secondary-foreground: 47 47 44; /* Grey 8 #2F2F2C */
/* Muted */
--muted: 240 240 236; /* Grey 1 #F0F0EC */
--muted-foreground: 87 87 83; /* Grey 7 #575753 */
/* Accent - Subtle grey for hover states */
--accent: 221 221 215; /* Grey 2 #DDDDD7 */
--accent-foreground: 22 22 20; /* Off-black */
/* Destructive */
--destructive: 180 50 50; /* Muted red for destructive actions */
--destructive-foreground: 249 249 247;
/* Borders & Inputs */
--border: 196 196 189; /* Grey 3 #C4C4BD */
--input: 196 196 189; /* Grey 3 #C4C4BD */
/* Focus Ring */
--ring: 217 94 42; /* Orange for focus states */
/* Charts - Warm neutral palette with orange accent */
--chart-1: 217 94 42; /* Orange accent */
--chart-2: 87 87 83; /* Grey 7 */
--chart-3: 127 127 121; /* Grey 5 */
--chart-4: 166 166 159; /* Grey 4 */
--chart-5: 47 47 44; /* Grey 8 */
/* Radius - Tightened, no playful rounding */
--radius: 0.375rem;
/* Sidebar */
--sidebar: 240 240 236;
--sidebar-foreground: 22 22 20;
--sidebar-primary: 217 94 42;
--sidebar-primary-foreground: 249 249 247;
--sidebar-accent: 196 196 189;
--sidebar-accent-foreground: 22 22 20;
--sidebar-border: 196 196 189;
--sidebar-ring: 217 94 42;
}
/* =============================================================================
DARK THEME
Guidelines: Negative/reverse usage via off-black and greys
============================================================================= */
.dark {
/* Background & Foreground */
--background: 22 22 20; /* Off-black #161614 */
--foreground: 249 249 247; /* Off-white #F9F9F7 */
/* Card */
--card: 47 47 44; /* Grey 8 #2F2F2C */
--card-foreground: 249 249 247;
/* Popover */
--popover: 47 47 44;
--popover-foreground: 249 249 247;
/* Primary - Orange accent (same in dark mode) */
--primary: 217 94 42; /* Orange #D95E2A */
--primary-foreground: 249 249 247;
/* Secondary */
--secondary: 87 87 83; /* Grey 7 #575753 */
--secondary-foreground: 249 249 247;
/* Muted */
--muted: 87 87 83; /* Grey 7 #575753 */
--muted-foreground: 196 196 189; /* Grey 3 #C4C4BD */
/* Accent - Subtle grey for hover states */
--accent: 87 87 83; /* Grey 7 #575753 */
--accent-foreground: 249 249 247;
/* Destructive */
--destructive: 180 50 50;
--destructive-foreground: 249 249 247;
/* Borders & Inputs */
--border: 87 87 83; /* Grey 7 */
--input: 87 87 83;
/* Focus Ring */
--ring: 217 94 42;
/* Charts */
--chart-1: 217 94 42;
--chart-2: 196 196 189;
--chart-3: 166 166 159;
--chart-4: 127 127 121;
--chart-5: 240 240 236;
/* Sidebar */
--sidebar: 47 47 44;
--sidebar-foreground: 249 249 247;
--sidebar-primary: 217 94 42;
--sidebar-primary-foreground: 249 249 247;
--sidebar-accent: 87 87 83;
--sidebar-accent-foreground: 249 249 247;
--sidebar-border: 87 87 83;
--sidebar-ring: 217 94 42;
}
/* =============================================================================
THEME CONFIGURATION
Typography: Source Serif Pro (primary) + Aspekta (secondary/UI)
Typography: Source Serif Pro (primary/serif) + Aspekta (secondary/UI/sans)
============================================================================= */
@theme inline {
/* Typography - Using CSS variables from Next.js font loading */
--font-sans: var(--font-inter), 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-serif: var(--font-source-serif), 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
/* Typography — Aspekta is the canonical sans font, Inter is fallback */
--font-sans: 'Aspekta', var(--font-inter, 'Inter'), ui-sans-serif, system-ui, sans-serif;
--font-serif: var(--font-source-serif, 'Source Serif 4'), 'Source Serif Pro', Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Color mappings */
/* Color mappings — maps CSS var RGB triplets to Tailwind utility classes */
--color-background: rgb(var(--background));
--color-foreground: rgb(var(--foreground));
--color-card: rgb(var(--card));
@@ -186,7 +72,7 @@
--color-sidebar-accent-foreground: rgb(var(--sidebar-accent-foreground));
--color-sidebar-border: rgb(var(--sidebar-border));
--color-sidebar-ring: rgb(var(--sidebar-ring));
/* Greyhaven-specific colors for direct use */
--color-greyhaven-orange: #D95E2A;
--color-greyhaven-offblack: #161614;

168
app/tokens/TOKENS.md Normal file
View File

@@ -0,0 +1,168 @@
# Greyhaven Design Tokens Reference
> Auto-generated by Style Dictionary — DO NOT EDIT
> Source: `tokens/*.json` (W3C DTCG format)
## Color
| Token | Value | Description |
|-------|-------|-------------|
| `color.primitive.off-white` | `#f9f9f7` | Primary light surface — cards, elevated areas |
| `color.primitive.off-black` | `#161614` | Primary dark — foreground text, dark mode background |
| `color.primitive.orange` | `#d95e2a` | Only accent color — used sparingly for primary actions and emphasis |
| `color.primitive.destructive-red` | `#b43232` | Error/danger states |
| `color.primitive.grey.1` | `#f0f0ec` | 5% — Subtle backgrounds, secondary, muted |
| `color.primitive.grey.2` | `#ddddd7` | 10% — Accent hover, light borders |
| `color.primitive.grey.3` | `#c4c4bd` | 20% — Border, input |
| `color.primitive.grey.4` | `#a6a69f` | 50% — Mid-tone |
| `color.primitive.grey.5` | `#7f7f79` | 60% — Mid-dark |
| `color.primitive.grey.7` | `#575753` | 70% — Secondary foreground, muted foreground |
| `color.primitive.grey.8` | `#2f2f2c` | 80% — Dark mode card, dark surfaces |
| `color.semantic.background` | `#f0f0ec` | Page background |
| `color.semantic.foreground` | `#161614` | Primary text |
| `color.semantic.card` | `#f9f9f7` | Card/elevated surface background |
| `color.semantic.card-foreground` | `#161614` | Card text |
| `color.semantic.popover` | `#f9f9f7` | Popover background |
| `color.semantic.popover-foreground` | `#161614` | Popover text |
| `color.semantic.primary` | `#d95e2a` | Primary accent — buttons, links, focus rings |
| `color.semantic.primary-foreground` | `#f9f9f7` | Text on primary accent |
| `color.semantic.secondary` | `#f0f0ec` | Secondary button/surface |
| `color.semantic.secondary-foreground` | `#2f2f2c` | Text on secondary surface |
| `color.semantic.muted` | `#f0f0ec` | Muted/subdued background |
| `color.semantic.muted-foreground` | `#575753` | Muted/subdued text |
| `color.semantic.accent` | `#ddddd7` | Subtle hover state |
| `color.semantic.accent-foreground` | `#161614` | Text on accent hover |
| `color.semantic.destructive` | `#b43232` | Destructive/error actions |
| `color.semantic.destructive-foreground` | `#f9f9f7` | Text on destructive |
| `color.semantic.border` | `#c4c4bd` | Default border |
| `color.semantic.input` | `#c4c4bd` | Input border |
| `color.semantic.ring` | `#d95e2a` | Focus ring |
| `color.semantic.chart.1` | `#d95e2a` | Chart accent |
| `color.semantic.chart.2` | `#575753` | Chart secondary |
| `color.semantic.chart.3` | `#7f7f79` | Chart tertiary |
| `color.semantic.chart.4` | `#a6a69f` | Chart quaternary |
| `color.semantic.chart.5` | `#2f2f2c` | Chart quinary |
| `color.semantic.sidebar.background` | `#f0f0ec` | Sidebar background |
| `color.semantic.sidebar.foreground` | `#161614` | Sidebar text |
| `color.semantic.sidebar.primary` | `#d95e2a` | Sidebar primary accent |
| `color.semantic.sidebar.primary-foreground` | `#f9f9f7` | Sidebar primary text |
| `color.semantic.sidebar.accent` | `#c4c4bd` | Sidebar accent/hover |
| `color.semantic.sidebar.accent-foreground` | `#161614` | Sidebar accent text |
| `color.semantic.sidebar.border` | `#c4c4bd` | Sidebar border |
| `color.semantic.sidebar.ring` | `#d95e2a` | Sidebar focus ring |
| `color.dark.background` | `#161614` | Dark page background |
| `color.dark.foreground` | `#f9f9f7` | Dark primary text |
| `color.dark.card` | `#2f2f2c` | Dark card surface |
| `color.dark.card-foreground` | `#f9f9f7` | Dark card text |
| `color.dark.popover` | `#2f2f2c` | Dark popover |
| `color.dark.popover-foreground` | `#f9f9f7` | Dark popover text |
| `color.dark.primary` | `#d95e2a` | Same orange in dark mode |
| `color.dark.primary-foreground` | `#f9f9f7` | Dark primary foreground |
| `color.dark.secondary` | `#575753` | Dark secondary |
| `color.dark.secondary-foreground` | `#f9f9f7` | Dark secondary text |
| `color.dark.muted` | `#575753` | Dark muted |
| `color.dark.muted-foreground` | `#c4c4bd` | Dark muted text |
| `color.dark.accent` | `#575753` | Dark accent/hover |
| `color.dark.accent-foreground` | `#f9f9f7` | Dark accent text |
| `color.dark.destructive` | `#b43232` | Same destructive in dark mode |
| `color.dark.destructive-foreground` | `#f9f9f7` | Dark destructive text |
| `color.dark.border` | `#575753` | Dark border |
| `color.dark.input` | `#575753` | Dark input border |
| `color.dark.ring` | `#d95e2a` | Dark focus ring |
| `color.dark.chart.1` | `#d95e2a` | Dark chart accent |
| `color.dark.chart.2` | `#c4c4bd` | Dark chart secondary |
| `color.dark.chart.3` | `#a6a69f` | Dark chart tertiary |
| `color.dark.chart.4` | `#7f7f79` | Dark chart quaternary |
| `color.dark.chart.5` | `#f0f0ec` | Dark chart quinary |
| `color.dark.sidebar.background` | `#2f2f2c` | Dark sidebar background |
| `color.dark.sidebar.foreground` | `#f9f9f7` | Dark sidebar text |
| `color.dark.sidebar.primary` | `#d95e2a` | Dark sidebar primary |
| `color.dark.sidebar.primary-foreground` | `#f9f9f7` | Dark sidebar primary text |
| `color.dark.sidebar.accent` | `#575753` | Dark sidebar accent |
| `color.dark.sidebar.accent-foreground` | `#f9f9f7` | Dark sidebar accent text |
| `color.dark.sidebar.border` | `#575753` | Dark sidebar border |
| `color.dark.sidebar.ring` | `#d95e2a` | Dark sidebar ring |
## Motion
| Token | Value | Description |
|-------|-------|-------------|
| `motion.duration.fast` | `150ms` | Quick transitions — tooltips, hover states |
| `motion.duration.normal` | `200ms` | Default transitions — most UI interactions |
| `motion.duration.slow` | `300ms` | Deliberate transitions — modals, drawers, accordions |
| `motion.easing.default` | `cubic-bezier(0.4, 0, 0.2, 1)` | Standard ease-in-out |
| `motion.easing.in` | `cubic-bezier(0.4, 0, 1, 1)` | Ease-in for exits |
| `motion.easing.out` | `cubic-bezier(0, 0, 0.2, 1)` | Ease-out for entrances |
## Radii
| Token | Value | Description |
|-------|-------|-------------|
| `radii.base` | `0.375rem` | 6px — base radius |
| `radii.sm` | `calc(0.375rem - 2px)` | 4px — small variant |
| `radii.md` | `0.375rem` | 6px — medium (same as base) |
| `radii.lg` | `calc(0.375rem + 2px)` | 8px — large variant |
| `radii.xl` | `calc(0.375rem + 4px)` | 10px — extra large variant (cards) |
| `radii.full` | `9999px` | Fully round (pills, avatars) |
## Shadow
| Token | Value | Description |
|-------|-------|-------------|
| `shadow.xs` | `0 1px 2px 0 rgba(22, 22, 20, 0.05)` | Subtle shadow for buttons, inputs |
| `shadow.sm` | `0 1px 3px 0 rgba(22, 22, 20, 0.1)` | Small shadow for cards |
| `shadow.md` | `0 4px 6px -1px rgba(22, 22, 20, 0.1)` | Medium shadow for dropdowns, popovers |
| `shadow.lg` | `0 10px 15px -3px rgba(22, 22, 20, 0.1)` | Large shadow for dialogs, modals |
## Spacing
| Token | Value | Description |
|-------|-------|-------------|
| `spacing.0` | `0` | None |
| `spacing.1` | `0.25rem` | 4px — tight gaps |
| `spacing.2` | `0.5rem` | 8px — card header gap, form description spacing |
| `spacing.3` | `0.75rem` | 12px |
| `spacing.4` | `1rem` | 16px — form field gap, button padding |
| `spacing.5` | `1.25rem` | 20px |
| `spacing.6` | `1.5rem` | 24px — card padding, card internal gap |
| `spacing.8` | `2rem` | 32px — section margin-bottom |
| `spacing.10` | `2.5rem` | 40px |
| `spacing.12` | `3rem` | 48px |
| `spacing.16` | `4rem` | 64px — major section padding (py-16) |
| `spacing.20` | `5rem` | 80px |
| `spacing.24` | `6rem` | 96px — hero padding |
| `spacing.0.5` | `0.125rem` | 2px — micro spacing |
| `spacing.1.5` | `0.375rem` | 6px |
| `spacing.component.card-padding` | `1.5rem` | Card internal padding (px-6) |
| `spacing.component.card-gap` | `1.5rem` | Gap between cards (gap-6) |
| `spacing.component.section-padding` | `4rem` | Vertical padding between major sections (py-16) |
| `spacing.component.form-gap` | `1rem` | Gap between form fields (gap-4) |
| `spacing.component.button-padding-x` | `1rem` | Button horizontal padding (px-4) |
| `spacing.component.navbar-height` | `4rem` | Navbar height (h-16) |
## Typography
| Token | Value | Description |
|-------|-------|-------------|
| `typography.fontFamily.sans` | `Aspekta, Inter, ui-sans-serif, system-ui, sans-serif` | UI labels, buttons, nav, forms — Aspekta primary, Inter fallback |
| `typography.fontFamily.serif` | `'Source Serif 4', 'Source Serif Pro', Georgia, serif` | Headings, body content, reading — Source Serif primary |
| `typography.fontFamily.mono` | `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace` | Code blocks and monospaced content |
| `typography.fontSize.xs` | `0.75rem` | 12px — metadata, fine print |
| `typography.fontSize.sm` | `0.875rem` | 14px — captions, nav, labels, buttons |
| `typography.fontSize.base` | `1rem` | 16px — body text |
| `typography.fontSize.lg` | `1.125rem` | 18px — large body, subtitles |
| `typography.fontSize.xl` | `1.25rem` | 20px — H3 |
| `typography.fontSize.2xl` | `1.5rem` | 24px — H2 |
| `typography.fontSize.3xl` | `1.875rem` | 30px — large H2 |
| `typography.fontSize.4xl` | `2.25rem` | 36px — H1 |
| `typography.fontSize.5xl` | `3rem` | 48px — hero heading |
| `typography.fontWeight.normal` | `400` | Regular body text |
| `typography.fontWeight.medium` | `500` | H3, labels, nav items |
| `typography.fontWeight.semibold` | `600` | H1, H2, buttons |
| `typography.fontWeight.bold` | `700` | Strong emphasis |
| `typography.lineHeight.tight` | `1.25rem` | Headings |
| `typography.lineHeight.normal` | `1.5rem` | Default |
| `typography.lineHeight.relaxed` | `1.625rem` | Body content for readability |
| `typography.letterSpacing.tight` | `-0.025em` | Headings — tracking-tight |
| `typography.letterSpacing.normal` | `0em` | Body text |
| `typography.letterSpacing.wide` | `0.05em` | Uppercase labels |

70
app/tokens/tokens-dark.css Normal file
View File

@@ -0,0 +1,70 @@
/* Greyhaven Design Tokens — Dark Theme
Auto-generated by Style Dictionary — DO NOT EDIT
Source: tokens/color.json */
.dark {
/* Dark page background */
--background: 22 22 20;
/* Dark primary text */
--foreground: 249 249 247;
/* Dark card surface */
--card: 47 47 44;
/* Dark card text */
--card-foreground: 249 249 247;
/* Dark popover */
--popover: 47 47 44;
/* Dark popover text */
--popover-foreground: 249 249 247;
/* Same orange in dark mode */
--primary: 217 94 42;
/* Dark primary foreground */
--primary-foreground: 249 249 247;
/* Dark secondary */
--secondary: 87 87 83;
/* Dark secondary text */
--secondary-foreground: 249 249 247;
/* Dark muted */
--muted: 87 87 83;
/* Dark muted text */
--muted-foreground: 196 196 189;
/* Dark accent/hover */
--accent: 87 87 83;
/* Dark accent text */
--accent-foreground: 249 249 247;
/* Same destructive in dark mode */
--destructive: 180 50 50;
/* Dark destructive text */
--destructive-foreground: 249 249 247;
/* Dark border */
--border: 87 87 83;
/* Dark input border */
--input: 87 87 83;
/* Dark focus ring */
--ring: 217 94 42;
/* Dark chart accent */
--chart-1: 217 94 42;
/* Dark chart secondary */
--chart-2: 196 196 189;
/* Dark chart tertiary */
--chart-3: 166 166 159;
/* Dark chart quaternary */
--chart-4: 127 127 121;
/* Dark chart quinary */
--chart-5: 240 240 236;
/* Dark sidebar background */
--sidebar: 47 47 44;
/* Dark sidebar text */
--sidebar-foreground: 249 249 247;
/* Dark sidebar primary */
--sidebar-primary: 217 94 42;
/* Dark sidebar primary text */
--sidebar-primary-foreground: 249 249 247;
/* Dark sidebar accent */
--sidebar-accent: 87 87 83;
/* Dark sidebar accent text */
--sidebar-accent-foreground: 249 249 247;
/* Dark sidebar border */
--sidebar-border: 87 87 83;
/* Dark sidebar ring */
--sidebar-ring: 217 94 42;
}

70
app/tokens/tokens-light.css Normal file
View File

@@ -0,0 +1,70 @@
/* Greyhaven Design Tokens — Light Theme
Auto-generated by Style Dictionary — DO NOT EDIT
Source: tokens/color.json */
:root {
/* Page background */
--background: 240 240 236;
/* Primary text */
--foreground: 22 22 20;
/* Card/elevated surface background */
--card: 249 249 247;
/* Card text */
--card-foreground: 22 22 20;
/* Popover background */
--popover: 249 249 247;
/* Popover text */
--popover-foreground: 22 22 20;
/* Primary accent — buttons, links, focus rings */
--primary: 217 94 42;
/* Text on primary accent */
--primary-foreground: 249 249 247;
/* Secondary button/surface */
--secondary: 240 240 236;
/* Text on secondary surface */
--secondary-foreground: 47 47 44;
/* Muted/subdued background */
--muted: 240 240 236;
/* Muted/subdued text */
--muted-foreground: 87 87 83;
/* Subtle hover state */
--accent: 221 221 215;
/* Text on accent hover */
--accent-foreground: 22 22 20;
/* Destructive/error actions */
--destructive: 180 50 50;
/* Text on destructive */
--destructive-foreground: 249 249 247;
/* Default border */
--border: 196 196 189;
/* Input border */
--input: 196 196 189;
/* Focus ring */
--ring: 217 94 42;
/* Chart accent */
--chart-1: 217 94 42;
/* Chart secondary */
--chart-2: 87 87 83;
/* Chart tertiary */
--chart-3: 127 127 121;
/* Chart quaternary */
--chart-4: 166 166 159;
/* Chart quinary */
--chart-5: 47 47 44;
/* Sidebar background */
--sidebar: 240 240 236;
/* Sidebar text */
--sidebar-foreground: 22 22 20;
/* Sidebar primary accent */
--sidebar-primary: 217 94 42;
/* Sidebar primary text */
--sidebar-primary-foreground: 249 249 247;
/* Sidebar accent/hover */
--sidebar-accent: 196 196 189;
/* Sidebar accent text */
--sidebar-accent-foreground: 22 22 20;
/* Sidebar border */
--sidebar-border: 196 196 189;
/* Sidebar focus ring */
--sidebar-ring: 217 94 42;
}

144
app/tokens/tokens.ts Normal file
View File

@@ -0,0 +1,144 @@
// Auto-generated by Style Dictionary — DO NOT EDIT
// Source: tokens/*.json (W3C DTCG format)
export const ColorTokens = {
'primitive.off-white': '#f9f9f7',
'primitive.off-black': '#161614',
'primitive.orange': '#d95e2a',
'primitive.destructive-red': '#b43232',
'primitive.grey.1': '#f0f0ec',
'primitive.grey.2': '#ddddd7',
'primitive.grey.3': '#c4c4bd',
'primitive.grey.4': '#a6a69f',
'primitive.grey.5': '#7f7f79',
'primitive.grey.7': '#575753',
'primitive.grey.8': '#2f2f2c',
'semantic.background': '#f0f0ec',
'semantic.foreground': '#161614',
'semantic.card': '#f9f9f7',
'semantic.card-foreground': '#161614',
'semantic.popover': '#f9f9f7',
'semantic.popover-foreground': '#161614',
'semantic.primary': '#d95e2a',
'semantic.primary-foreground': '#f9f9f7',
'semantic.secondary': '#f0f0ec',
'semantic.secondary-foreground': '#2f2f2c',
'semantic.muted': '#f0f0ec',
'semantic.muted-foreground': '#575753',
'semantic.accent': '#ddddd7',
'semantic.accent-foreground': '#161614',
'semantic.destructive': '#b43232',
'semantic.destructive-foreground': '#f9f9f7',
'semantic.border': '#c4c4bd',
'semantic.input': '#c4c4bd',
'semantic.ring': '#d95e2a',
'semantic.chart.1': '#d95e2a',
'semantic.chart.2': '#575753',
'semantic.chart.3': '#7f7f79',
'semantic.chart.4': '#a6a69f',
'semantic.chart.5': '#2f2f2c',
'semantic.sidebar.background': '#f0f0ec',
'semantic.sidebar.foreground': '#161614',
'semantic.sidebar.primary': '#d95e2a',
'semantic.sidebar.primary-foreground': '#f9f9f7',
'semantic.sidebar.accent': '#c4c4bd',
'semantic.sidebar.accent-foreground': '#161614',
'semantic.sidebar.border': '#c4c4bd',
'semantic.sidebar.ring': '#d95e2a',
'dark.background': '#161614',
'dark.foreground': '#f9f9f7',
'dark.card': '#2f2f2c',
'dark.card-foreground': '#f9f9f7',
'dark.popover': '#2f2f2c',
'dark.popover-foreground': '#f9f9f7',
'dark.primary': '#d95e2a',
'dark.primary-foreground': '#f9f9f7',
'dark.secondary': '#575753',
'dark.secondary-foreground': '#f9f9f7',
'dark.muted': '#575753',
'dark.muted-foreground': '#c4c4bd',
'dark.accent': '#575753',
'dark.accent-foreground': '#f9f9f7',
'dark.destructive': '#b43232',
'dark.destructive-foreground': '#f9f9f7',
'dark.border': '#575753',
'dark.input': '#575753',
'dark.ring': '#d95e2a',
'dark.chart.1': '#d95e2a',
'dark.chart.2': '#c4c4bd',
'dark.chart.3': '#a6a69f',
'dark.chart.4': '#7f7f79',
'dark.chart.5': '#f0f0ec',
'dark.sidebar.background': '#2f2f2c',
'dark.sidebar.foreground': '#f9f9f7',
'dark.sidebar.primary': '#d95e2a',
'dark.sidebar.primary-foreground': '#f9f9f7',
'dark.sidebar.accent': '#575753',
'dark.sidebar.accent-foreground': '#f9f9f7',
'dark.sidebar.border': '#575753',
'dark.sidebar.ring': '#d95e2a',
} as const;
export const MotionTokens = {
'duration.fast': '150ms',
'duration.normal': '200ms',
'duration.slow': '300ms',
} as const;
export const RadiiTokens = {
'base': '0.375rem',
'sm': 'calc(0.375rem - 2px)',
'md': '0.375rem',
'lg': 'calc(0.375rem + 2px)',
'xl': 'calc(0.375rem + 4px)',
'full': '9999px',
} as const;
export const ShadowTokens = {
} as const;
export const SpacingTokens = {
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'0.5': '0.125rem',
'1.5': '0.375rem',
'component.card-padding': '1.5rem',
'component.card-gap': '1.5rem',
'component.section-padding': '4rem',
'component.form-gap': '1rem',
'component.button-padding-x': '1rem',
'component.navbar-height': '4rem',
} as const;
export const TypographyTokens = {
'fontSize.xs': '0.75rem',
'fontSize.sm': '0.875rem',
'fontSize.base': '1rem',
'fontSize.lg': '1.125rem',
'fontSize.xl': '1.25rem',
'fontSize.2xl': '1.5rem',
'fontSize.3xl': '1.875rem',
'fontSize.4xl': '2.25rem',
'fontSize.5xl': '3rem',
'fontWeight.normal': '400',
'fontWeight.medium': '500',
'fontWeight.semibold': '600',
'fontWeight.bold': '700',
'lineHeight.tight': '1.25rem',
'lineHeight.normal': '1.5rem',
'lineHeight.relaxed': '1.625rem',
'letterSpacing.tight': '-0.025em',
'letterSpacing.normal': '0em',
'letterSpacing.wide': '0.05em',
} as const;