design system token v0.1
This commit is contained in:
Juan
168
tokens/build/TOKENS.md
Normal file
168
tokens/build/TOKENS.md
Normal 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
tokens/build/tokens-dark.css
Normal file
70
tokens/build/tokens-dark.css
Normal 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
tokens/build/tokens-light.css
Normal file
70
tokens/build/tokens-light.css
Normal 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
tokens/build/tokens.ts
Normal file
144
tokens/build/tokens.ts
Normal 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;
|
||||
399
tokens/color.json
Normal file
399
tokens/color.json
Normal file
@@ -0,0 +1,399 @@
|
||||
{
|
||||
"color": {
|
||||
"$description": "Greyhaven Design System — Color Tokens",
|
||||
"primitive": {
|
||||
"$description": "Raw color values — reference only, use semantic tokens in components",
|
||||
"off-white": {
|
||||
"$type": "color",
|
||||
"$value": "#F9F9F7",
|
||||
"$description": "Primary light surface — cards, elevated areas"
|
||||
},
|
||||
"off-black": {
|
||||
"$type": "color",
|
||||
"$value": "#161614",
|
||||
"$description": "Primary dark — foreground text, dark mode background"
|
||||
},
|
||||
"orange": {
|
||||
"$type": "color",
|
||||
"$value": "#D95E2A",
|
||||
"$description": "Only accent color — used sparingly for primary actions and emphasis"
|
||||
},
|
||||
"destructive-red": {
|
||||
"$type": "color",
|
||||
"$value": "#B43232",
|
||||
"$description": "Error/danger states"
|
||||
},
|
||||
"grey": {
|
||||
"1": {
|
||||
"$type": "color",
|
||||
"$value": "#F0F0EC",
|
||||
"$description": "5% — Subtle backgrounds, secondary, muted"
|
||||
},
|
||||
"2": {
|
||||
"$type": "color",
|
||||
"$value": "#DDDDD7",
|
||||
"$description": "10% — Accent hover, light borders"
|
||||
},
|
||||
"3": {
|
||||
"$type": "color",
|
||||
"$value": "#C4C4BD",
|
||||
"$description": "20% — Border, input"
|
||||
},
|
||||
"4": {
|
||||
"$type": "color",
|
||||
"$value": "#A6A69F",
|
||||
"$description": "50% — Mid-tone"
|
||||
},
|
||||
"5": {
|
||||
"$type": "color",
|
||||
"$value": "#7F7F79",
|
||||
"$description": "60% — Mid-dark"
|
||||
},
|
||||
"7": {
|
||||
"$type": "color",
|
||||
"$value": "#575753",
|
||||
"$description": "70% — Secondary foreground, muted foreground"
|
||||
},
|
||||
"8": {
|
||||
"$type": "color",
|
||||
"$value": "#2F2F2C",
|
||||
"$description": "80% — Dark mode card, dark surfaces"
|
||||
}
|
||||
}
|
||||
},
|
||||
"semantic": {
|
||||
"$description": "Semantic color assignments for light theme",
|
||||
"background": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.1}",
|
||||
"$description": "Page background"
|
||||
},
|
||||
"foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-black}",
|
||||
"$description": "Primary text"
|
||||
},
|
||||
"card": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-white}",
|
||||
"$description": "Card/elevated surface background"
|
||||
},
|
||||
"card-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-black}",
|
||||
"$description": "Card text"
|
||||
},
|
||||
"popover": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-white}",
|
||||
"$description": "Popover background"
|
||||
},
|
||||
"popover-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-black}",
|
||||
"$description": "Popover text"
|
||||
},
|
||||
"primary": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.orange}",
|
||||
"$description": "Primary accent — buttons, links, focus rings"
|
||||
},
|
||||
"primary-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-white}",
|
||||
"$description": "Text on primary accent"
|
||||
},
|
||||
"secondary": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.1}",
|
||||
"$description": "Secondary button/surface"
|
||||
},
|
||||
"secondary-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.8}",
|
||||
"$description": "Text on secondary surface"
|
||||
},
|
||||
"muted": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.1}",
|
||||
"$description": "Muted/subdued background"
|
||||
},
|
||||
"muted-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.7}",
|
||||
"$description": "Muted/subdued text"
|
||||
},
|
||||
"accent": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.2}",
|
||||
"$description": "Subtle hover state"
|
||||
},
|
||||
"accent-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-black}",
|
||||
"$description": "Text on accent hover"
|
||||
},
|
||||
"destructive": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.destructive-red}",
|
||||
"$description": "Destructive/error actions"
|
||||
},
|
||||
"destructive-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-white}",
|
||||
"$description": "Text on destructive"
|
||||
},
|
||||
"border": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.3}",
|
||||
"$description": "Default border"
|
||||
},
|
||||
"input": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.3}",
|
||||
"$description": "Input border"
|
||||
},
|
||||
"ring": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.orange}",
|
||||
"$description": "Focus ring"
|
||||
},
|
||||
"chart": {
|
||||
"1": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.orange}",
|
||||
"$description": "Chart accent"
|
||||
},
|
||||
"2": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.7}",
|
||||
"$description": "Chart secondary"
|
||||
},
|
||||
"3": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.5}",
|
||||
"$description": "Chart tertiary"
|
||||
},
|
||||
"4": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.4}",
|
||||
"$description": "Chart quaternary"
|
||||
},
|
||||
"5": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.8}",
|
||||
"$description": "Chart quinary"
|
||||
}
|
||||
},
|
||||
"sidebar": {
|
||||
"background": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.1}",
|
||||
"$description": "Sidebar background"
|
||||
},
|
||||
"foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-black}",
|
||||
"$description": "Sidebar text"
|
||||
},
|
||||
"primary": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.orange}",
|
||||
"$description": "Sidebar primary accent"
|
||||
},
|
||||
"primary-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-white}",
|
||||
"$description": "Sidebar primary text"
|
||||
},
|
||||
"accent": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.3}",
|
||||
"$description": "Sidebar accent/hover"
|
||||
},
|
||||
"accent-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-black}",
|
||||
"$description": "Sidebar accent text"
|
||||
},
|
||||
"border": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.3}",
|
||||
"$description": "Sidebar border"
|
||||
},
|
||||
"ring": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.orange}",
|
||||
"$description": "Sidebar focus ring"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dark": {
|
||||
"$description": "Dark theme overrides — inverted warm greys, same orange accent",
|
||||
"background": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-black}",
|
||||
"$description": "Dark page background"
|
||||
},
|
||||
"foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-white}",
|
||||
"$description": "Dark primary text"
|
||||
},
|
||||
"card": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.8}",
|
||||
"$description": "Dark card surface"
|
||||
},
|
||||
"card-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-white}",
|
||||
"$description": "Dark card text"
|
||||
},
|
||||
"popover": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.8}",
|
||||
"$description": "Dark popover"
|
||||
},
|
||||
"popover-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-white}",
|
||||
"$description": "Dark popover text"
|
||||
},
|
||||
"primary": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.orange}",
|
||||
"$description": "Same orange in dark mode"
|
||||
},
|
||||
"primary-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-white}",
|
||||
"$description": "Dark primary foreground"
|
||||
},
|
||||
"secondary": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.7}",
|
||||
"$description": "Dark secondary"
|
||||
},
|
||||
"secondary-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-white}",
|
||||
"$description": "Dark secondary text"
|
||||
},
|
||||
"muted": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.7}",
|
||||
"$description": "Dark muted"
|
||||
},
|
||||
"muted-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.3}",
|
||||
"$description": "Dark muted text"
|
||||
},
|
||||
"accent": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.7}",
|
||||
"$description": "Dark accent/hover"
|
||||
},
|
||||
"accent-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-white}",
|
||||
"$description": "Dark accent text"
|
||||
},
|
||||
"destructive": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.destructive-red}",
|
||||
"$description": "Same destructive in dark mode"
|
||||
},
|
||||
"destructive-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-white}",
|
||||
"$description": "Dark destructive text"
|
||||
},
|
||||
"border": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.7}",
|
||||
"$description": "Dark border"
|
||||
},
|
||||
"input": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.7}",
|
||||
"$description": "Dark input border"
|
||||
},
|
||||
"ring": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.orange}",
|
||||
"$description": "Dark focus ring"
|
||||
},
|
||||
"chart": {
|
||||
"1": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.orange}",
|
||||
"$description": "Dark chart accent"
|
||||
},
|
||||
"2": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.3}",
|
||||
"$description": "Dark chart secondary"
|
||||
},
|
||||
"3": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.4}",
|
||||
"$description": "Dark chart tertiary"
|
||||
},
|
||||
"4": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.5}",
|
||||
"$description": "Dark chart quaternary"
|
||||
},
|
||||
"5": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.1}",
|
||||
"$description": "Dark chart quinary"
|
||||
}
|
||||
},
|
||||
"sidebar": {
|
||||
"background": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.8}",
|
||||
"$description": "Dark sidebar background"
|
||||
},
|
||||
"foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-white}",
|
||||
"$description": "Dark sidebar text"
|
||||
},
|
||||
"primary": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.orange}",
|
||||
"$description": "Dark sidebar primary"
|
||||
},
|
||||
"primary-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-white}",
|
||||
"$description": "Dark sidebar primary text"
|
||||
},
|
||||
"accent": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.7}",
|
||||
"$description": "Dark sidebar accent"
|
||||
},
|
||||
"accent-foreground": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.off-white}",
|
||||
"$description": "Dark sidebar accent text"
|
||||
},
|
||||
"border": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.grey.7}",
|
||||
"$description": "Dark sidebar border"
|
||||
},
|
||||
"ring": {
|
||||
"$type": "color",
|
||||
"$value": "{color.primitive.orange}",
|
||||
"$description": "Dark sidebar ring"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
72
tokens/motion.json
Normal file
72
tokens/motion.json
Normal file
@@ -0,0 +1,72 @@
|
||||
{
|
||||
"motion": {
|
||||
"$description": "Greyhaven Design System — Animation & Motion Tokens",
|
||||
"duration": {
|
||||
"fast": {
|
||||
"$type": "duration",
|
||||
"$value": "150ms",
|
||||
"$description": "Quick transitions — tooltips, hover states"
|
||||
},
|
||||
"normal": {
|
||||
"$type": "duration",
|
||||
"$value": "200ms",
|
||||
"$description": "Default transitions — most UI interactions"
|
||||
},
|
||||
"slow": {
|
||||
"$type": "duration",
|
||||
"$value": "300ms",
|
||||
"$description": "Deliberate transitions — modals, drawers, accordions"
|
||||
}
|
||||
},
|
||||
"easing": {
|
||||
"default": {
|
||||
"$type": "cubicBezier",
|
||||
"$value": [0.4, 0, 0.2, 1],
|
||||
"$description": "Standard ease-in-out"
|
||||
},
|
||||
"in": {
|
||||
"$type": "cubicBezier",
|
||||
"$value": [0.4, 0, 1, 1],
|
||||
"$description": "Ease-in for exits"
|
||||
},
|
||||
"out": {
|
||||
"$type": "cubicBezier",
|
||||
"$value": [0, 0, 0.2, 1],
|
||||
"$description": "Ease-out for entrances"
|
||||
}
|
||||
},
|
||||
"keyframes": {
|
||||
"$description": "Named animation patterns used by components",
|
||||
"accordion-down": {
|
||||
"$description": "Accordion open — height 0 to auto"
|
||||
},
|
||||
"accordion-up": {
|
||||
"$description": "Accordion close — height auto to 0"
|
||||
},
|
||||
"spin": {
|
||||
"$description": "Spinner rotation — 360deg continuous"
|
||||
},
|
||||
"pulse": {
|
||||
"$description": "Skeleton loading — opacity fade in/out"
|
||||
},
|
||||
"fade-in": {
|
||||
"$description": "Generic entrance — opacity 0 to 1"
|
||||
},
|
||||
"fade-out": {
|
||||
"$description": "Generic exit — opacity 1 to 0"
|
||||
},
|
||||
"slide-in-from-top": {
|
||||
"$description": "Dropdown entrance — translate-y negative to 0"
|
||||
},
|
||||
"slide-in-from-bottom": {
|
||||
"$description": "Drawer entrance — translate-y positive to 0"
|
||||
},
|
||||
"zoom-in": {
|
||||
"$description": "Dialog entrance — scale 0.95 to 1 + fade"
|
||||
},
|
||||
"zoom-out": {
|
||||
"$description": "Dialog exit — scale 1 to 0.95 + fade"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
35
tokens/radii.json
Normal file
35
tokens/radii.json
Normal file
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"radii": {
|
||||
"$description": "Greyhaven Design System — Border Radius Tokens (tightened, no playful rounding)",
|
||||
"base": {
|
||||
"$type": "dimension",
|
||||
"$value": "0.375rem",
|
||||
"$description": "6px — base radius"
|
||||
},
|
||||
"sm": {
|
||||
"$type": "dimension",
|
||||
"$value": "calc(0.375rem - 2px)",
|
||||
"$description": "4px — small variant"
|
||||
},
|
||||
"md": {
|
||||
"$type": "dimension",
|
||||
"$value": "0.375rem",
|
||||
"$description": "6px — medium (same as base)"
|
||||
},
|
||||
"lg": {
|
||||
"$type": "dimension",
|
||||
"$value": "calc(0.375rem + 2px)",
|
||||
"$description": "8px — large variant"
|
||||
},
|
||||
"xl": {
|
||||
"$type": "dimension",
|
||||
"$value": "calc(0.375rem + 4px)",
|
||||
"$description": "10px — extra large variant (cards)"
|
||||
},
|
||||
"full": {
|
||||
"$type": "dimension",
|
||||
"$value": "9999px",
|
||||
"$description": "Fully round (pills, avatars)"
|
||||
}
|
||||
}
|
||||
}
|
||||
49
tokens/shadows.json
Normal file
49
tokens/shadows.json
Normal file
@@ -0,0 +1,49 @@
|
||||
{
|
||||
"shadow": {
|
||||
"$description": "Greyhaven Design System — Shadow Tokens (subtle, warm-neutral)",
|
||||
"xs": {
|
||||
"$type": "shadow",
|
||||
"$value": {
|
||||
"offsetX": "0",
|
||||
"offsetY": "1px",
|
||||
"blur": "2px",
|
||||
"spread": "0",
|
||||
"color": "rgba(22, 22, 20, 0.05)"
|
||||
},
|
||||
"$description": "Subtle shadow for buttons, inputs"
|
||||
},
|
||||
"sm": {
|
||||
"$type": "shadow",
|
||||
"$value": {
|
||||
"offsetX": "0",
|
||||
"offsetY": "1px",
|
||||
"blur": "3px",
|
||||
"spread": "0",
|
||||
"color": "rgba(22, 22, 20, 0.1)"
|
||||
},
|
||||
"$description": "Small shadow for cards"
|
||||
},
|
||||
"md": {
|
||||
"$type": "shadow",
|
||||
"$value": {
|
||||
"offsetX": "0",
|
||||
"offsetY": "4px",
|
||||
"blur": "6px",
|
||||
"spread": "-1px",
|
||||
"color": "rgba(22, 22, 20, 0.1)"
|
||||
},
|
||||
"$description": "Medium shadow for dropdowns, popovers"
|
||||
},
|
||||
"lg": {
|
||||
"$type": "shadow",
|
||||
"$value": {
|
||||
"offsetX": "0",
|
||||
"offsetY": "10px",
|
||||
"blur": "15px",
|
||||
"spread": "-3px",
|
||||
"color": "rgba(22, 22, 20, 0.1)"
|
||||
},
|
||||
"$description": "Large shadow for dialogs, modals"
|
||||
}
|
||||
}
|
||||
}
|
||||
113
tokens/spacing.json
Normal file
113
tokens/spacing.json
Normal file
@@ -0,0 +1,113 @@
|
||||
{
|
||||
"spacing": {
|
||||
"$description": "Greyhaven Design System — Spacing Tokens (derived from component usage patterns)",
|
||||
"0": {
|
||||
"$type": "dimension",
|
||||
"$value": "0",
|
||||
"$description": "None"
|
||||
},
|
||||
"0.5": {
|
||||
"$type": "dimension",
|
||||
"$value": "0.125rem",
|
||||
"$description": "2px — micro spacing"
|
||||
},
|
||||
"1": {
|
||||
"$type": "dimension",
|
||||
"$value": "0.25rem",
|
||||
"$description": "4px — tight gaps"
|
||||
},
|
||||
"1.5": {
|
||||
"$type": "dimension",
|
||||
"$value": "0.375rem",
|
||||
"$description": "6px"
|
||||
},
|
||||
"2": {
|
||||
"$type": "dimension",
|
||||
"$value": "0.5rem",
|
||||
"$description": "8px — card header gap, form description spacing"
|
||||
},
|
||||
"3": {
|
||||
"$type": "dimension",
|
||||
"$value": "0.75rem",
|
||||
"$description": "12px"
|
||||
},
|
||||
"4": {
|
||||
"$type": "dimension",
|
||||
"$value": "1rem",
|
||||
"$description": "16px — form field gap, button padding"
|
||||
},
|
||||
"5": {
|
||||
"$type": "dimension",
|
||||
"$value": "1.25rem",
|
||||
"$description": "20px"
|
||||
},
|
||||
"6": {
|
||||
"$type": "dimension",
|
||||
"$value": "1.5rem",
|
||||
"$description": "24px — card padding, card internal gap"
|
||||
},
|
||||
"8": {
|
||||
"$type": "dimension",
|
||||
"$value": "2rem",
|
||||
"$description": "32px — section margin-bottom"
|
||||
},
|
||||
"10": {
|
||||
"$type": "dimension",
|
||||
"$value": "2.5rem",
|
||||
"$description": "40px"
|
||||
},
|
||||
"12": {
|
||||
"$type": "dimension",
|
||||
"$value": "3rem",
|
||||
"$description": "48px"
|
||||
},
|
||||
"16": {
|
||||
"$type": "dimension",
|
||||
"$value": "4rem",
|
||||
"$description": "64px — major section padding (py-16)"
|
||||
},
|
||||
"20": {
|
||||
"$type": "dimension",
|
||||
"$value": "5rem",
|
||||
"$description": "80px"
|
||||
},
|
||||
"24": {
|
||||
"$type": "dimension",
|
||||
"$value": "6rem",
|
||||
"$description": "96px — hero padding"
|
||||
},
|
||||
"component": {
|
||||
"$description": "Component-specific spacing patterns",
|
||||
"card-padding": {
|
||||
"$type": "dimension",
|
||||
"$value": "1.5rem",
|
||||
"$description": "Card internal padding (px-6)"
|
||||
},
|
||||
"card-gap": {
|
||||
"$type": "dimension",
|
||||
"$value": "1.5rem",
|
||||
"$description": "Gap between cards (gap-6)"
|
||||
},
|
||||
"section-padding": {
|
||||
"$type": "dimension",
|
||||
"$value": "4rem",
|
||||
"$description": "Vertical padding between major sections (py-16)"
|
||||
},
|
||||
"form-gap": {
|
||||
"$type": "dimension",
|
||||
"$value": "1rem",
|
||||
"$description": "Gap between form fields (gap-4)"
|
||||
},
|
||||
"button-padding-x": {
|
||||
"$type": "dimension",
|
||||
"$value": "1rem",
|
||||
"$description": "Button horizontal padding (px-4)"
|
||||
},
|
||||
"navbar-height": {
|
||||
"$type": "dimension",
|
||||
"$value": "4rem",
|
||||
"$description": "Navbar height (h-16)"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
155
tokens/typography.json
Normal file
155
tokens/typography.json
Normal file
@@ -0,0 +1,155 @@
|
||||
{
|
||||
"typography": {
|
||||
"$description": "Greyhaven Design System — Typography Tokens",
|
||||
"fontFamily": {
|
||||
"sans": {
|
||||
"$type": "fontFamily",
|
||||
"$value": ["Aspekta", "Inter", "ui-sans-serif", "system-ui", "sans-serif"],
|
||||
"$description": "UI labels, buttons, nav, forms — Aspekta primary, Inter fallback"
|
||||
},
|
||||
"serif": {
|
||||
"$type": "fontFamily",
|
||||
"$value": ["Source Serif 4", "Source Serif Pro", "Georgia", "serif"],
|
||||
"$description": "Headings, body content, reading — Source Serif primary"
|
||||
},
|
||||
"mono": {
|
||||
"$type": "fontFamily",
|
||||
"$value": ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "monospace"],
|
||||
"$description": "Code blocks and monospaced content"
|
||||
}
|
||||
},
|
||||
"fontSize": {
|
||||
"xs": {
|
||||
"$type": "dimension",
|
||||
"$value": "0.75rem",
|
||||
"$description": "12px — metadata, fine print"
|
||||
},
|
||||
"sm": {
|
||||
"$type": "dimension",
|
||||
"$value": "0.875rem",
|
||||
"$description": "14px — captions, nav, labels, buttons"
|
||||
},
|
||||
"base": {
|
||||
"$type": "dimension",
|
||||
"$value": "1rem",
|
||||
"$description": "16px — body text"
|
||||
},
|
||||
"lg": {
|
||||
"$type": "dimension",
|
||||
"$value": "1.125rem",
|
||||
"$description": "18px — large body, subtitles"
|
||||
},
|
||||
"xl": {
|
||||
"$type": "dimension",
|
||||
"$value": "1.25rem",
|
||||
"$description": "20px — H3"
|
||||
},
|
||||
"2xl": {
|
||||
"$type": "dimension",
|
||||
"$value": "1.5rem",
|
||||
"$description": "24px — H2"
|
||||
},
|
||||
"3xl": {
|
||||
"$type": "dimension",
|
||||
"$value": "1.875rem",
|
||||
"$description": "30px — large H2"
|
||||
},
|
||||
"4xl": {
|
||||
"$type": "dimension",
|
||||
"$value": "2.25rem",
|
||||
"$description": "36px — H1"
|
||||
},
|
||||
"5xl": {
|
||||
"$type": "dimension",
|
||||
"$value": "3rem",
|
||||
"$description": "48px — hero heading"
|
||||
}
|
||||
},
|
||||
"fontWeight": {
|
||||
"normal": {
|
||||
"$type": "fontWeight",
|
||||
"$value": 400,
|
||||
"$description": "Regular body text"
|
||||
},
|
||||
"medium": {
|
||||
"$type": "fontWeight",
|
||||
"$value": 500,
|
||||
"$description": "H3, labels, nav items"
|
||||
},
|
||||
"semibold": {
|
||||
"$type": "fontWeight",
|
||||
"$value": 600,
|
||||
"$description": "H1, H2, buttons"
|
||||
},
|
||||
"bold": {
|
||||
"$type": "fontWeight",
|
||||
"$value": 700,
|
||||
"$description": "Strong emphasis"
|
||||
}
|
||||
},
|
||||
"lineHeight": {
|
||||
"tight": {
|
||||
"$type": "dimension",
|
||||
"$value": "1.25",
|
||||
"$description": "Headings"
|
||||
},
|
||||
"normal": {
|
||||
"$type": "dimension",
|
||||
"$value": "1.5",
|
||||
"$description": "Default"
|
||||
},
|
||||
"relaxed": {
|
||||
"$type": "dimension",
|
||||
"$value": "1.625",
|
||||
"$description": "Body content for readability"
|
||||
}
|
||||
},
|
||||
"letterSpacing": {
|
||||
"tight": {
|
||||
"$type": "dimension",
|
||||
"$value": "-0.025em",
|
||||
"$description": "Headings — tracking-tight"
|
||||
},
|
||||
"normal": {
|
||||
"$type": "dimension",
|
||||
"$value": "0em",
|
||||
"$description": "Body text"
|
||||
},
|
||||
"wide": {
|
||||
"$type": "dimension",
|
||||
"$value": "0.05em",
|
||||
"$description": "Uppercase labels"
|
||||
}
|
||||
},
|
||||
"composite": {
|
||||
"$description": "Pre-composed typography styles for common use cases",
|
||||
"h1": {
|
||||
"$description": "Page heading — serif, text-4xl, font-semibold, tracking-tight"
|
||||
},
|
||||
"h2": {
|
||||
"$description": "Section heading — serif, text-2xl, font-semibold, tracking-tight"
|
||||
},
|
||||
"h3": {
|
||||
"$description": "Subsection heading — serif, text-xl, font-medium"
|
||||
},
|
||||
"body": {
|
||||
"$description": "Body text — serif, text-base, leading-relaxed"
|
||||
},
|
||||
"caption": {
|
||||
"$description": "Caption text — sans, text-sm"
|
||||
},
|
||||
"nav": {
|
||||
"$description": "Navigation — sans, text-sm, font-medium"
|
||||
},
|
||||
"button": {
|
||||
"$description": "Button label — sans, text-sm, font-semibold"
|
||||
},
|
||||
"label": {
|
||||
"$description": "Form label — sans, text-sm, font-medium"
|
||||
},
|
||||
"metadata": {
|
||||
"$description": "Metadata — sans, text-xs, font-medium"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user