greyhaven-design-system/app/tokens/TOKENS.md

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	#2f2f2c	Dark muted — grey.8 (distinct from grey.7 border so outlines on bg-muted surfaces remain visible)
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