9.6 KiB
9.6 KiB
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 |