# 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.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 |
| `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.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 |
| `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` | `2.5rem` | Vertical padding inside sections (py-10) |
| `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, ui-sans-serif, system-ui, sans-serif` | UI labels, buttons, nav, forms — Aspekta self-hosted |
| `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 |