171 lines
9.7 KiB
Markdown
171 lines
9.7 KiB
Markdown
# 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 |
|