Design Tokens

CSS custom properties that power every ARC UI component. Import @arclux/arc-ui/base.css to use them in your own styles.

Colors

--bg-deep rgb(3, 3, 7) bg-deep

--bg-surface rgb(10, 10, 15) bg-surface

--bg-base rgb(10, 10, 15) bg-base

--bg-card rgb(13, 13, 18) bg-card

--bg-elevated rgb(17, 17, 22) bg-elevated

--text-primary rgb(232, 232, 236) text-primary

--text-secondary rgb(138, 138, 150) text-secondary

--text-muted rgb(124, 124, 137) text-muted

--text-ghost rgb(107, 107, 128) text-ghost

--border-subtle rgb(24, 24, 30) border-subtle

--border-default rgb(34, 34, 41) border-default

--border-bright rgb(51, 51, 64) border-bright

--accent-primary rgb(77, 126, 247) accent-primary

--accent-secondary rgb(139, 92, 246) accent-secondary

--color-success rgb(52, 211, 153) color-success

--color-warning rgb(245, 158, 11) color-warning

--color-error rgb(239, 68, 68) color-error

--color-info rgb(59, 130, 246) color-info

Spacing

--space-xs 4px

--space-sm 8px

--space-md 16px

--space-lg 24px

--space-xl 40px

--space-2xl 64px

--space-3xl 96px

Typography

font-body Host Grotesk — The quick brown fox jumps over the lazy dog

font-accent Tektur — The quick brown fox

font-mono JetBrains Mono — const x = 42;

Token	Value
`--body-size`	clamp(15px, 1.2vw, 16px)
`--body-lh`	1.7
`--body-weight`	500
`--heading-size`	clamp(22px, 2.5vw, 26px)
`--heading-weight`	500
`--code-size`	13px
`--code-lh`	1.8

Borders & Radius

Token	Value
`--radius-sm`	4px
`--radius-md`	10px
`--radius-lg`	14px
`--radius-xl`	20px
`--radius-full`	9999px

Shadows

--shadow-xs 0 1px 2px

--shadow-sm 0 2px 4px

--shadow-md 0 4px 12px

--shadow-lg 0 8px 24px

--shadow-xl 0 16px 48px

--shadow-overlay 0 8px 32px

Z-Index

Token	Value	Usage
`--z-base`	0	Default stacking
`--z-dropdown`	100	Dropdown menus
`--z-sticky`	200	Sticky headers
`--z-drawer`	300	Side drawers
`--z-modal`	400	Modal dialogs
`--z-popover`	500	Popovers
`--z-toast`	600	Toast notifications
`--z-tooltip`	700	Tooltips
`--z-max`	9999	Emergency override

Breakpoints

Token	Value
`--breakpoint-xs`	480px
`--breakpoint-sm`	640px
`--breakpoint-md`	768px
`--breakpoint-lg`	1024px
`--breakpoint-xl`	1280px
`--breakpoint-2xl`	1536px

Opacity

Token	Value
`--opacity-disabled`	0.5
`--opacity-muted`	0.6
`--opacity-hover`	0.8
`--opacity-visible`	1

disabled (0.5)

muted (0.6)

hover (0.8)

visible (1)

Motion

Token	Value
`--ease-out-expo`	cubic-bezier(0.16, 1, 0.3, 1)
`--ease-in-out`	cubic-bezier(0.4, 0, 0.2, 1)
`--duration-enter`	500ms
`--duration-exit`	300ms

Display & Text Sizing

Token	Value
`--display-xl-size`	clamp(36px, 5vw, 52px)
`--display-xl-weight`	500
`--display-xl-spacing`	-1px
`--text-3xl`	clamp(28px, 3vw, 36px)
`--text-lg`	clamp(18px, 1.5vw, 20px)
`--wordmark-size`	clamp(20px, 2.5vw, 28px)
`--wordmark-weight`	500
`--wordmark-spacing`	clamp(8px, 1.2vw, 14px)
`--section-title-size`	12px
`--section-title-weight`	600
`--section-title-spacing`	4px
`--ui-accent-size`	16px
`--ui-accent-weight`	600
`--ui-accent-spacing`	1px
`--label-inline-size`	10px
`--label-inline-spacing`	3px

Glows

--glow-primary

--glow-secondary

--glow-white

--focus-glow

Glow Lines

--glow-line-white

--glow-line-blue

--glow-line-gradient

Gradients

--gradient-display-text Primary → muted text fade

--gradient-accent-text Blue → violet accent

--gradient-divider Subtle content separator

--gradient-divider-glow Accent-tinted divider glow

--gradient-border-glow Subtle border glow effect

Focus

Tab to these cards to see focus styles in action.

Transitions

Token	Value
`--transition-fast`	120ms ease
`--transition-base`	200ms ease
`--transition-slow`	400ms ease

Utility

Token	Value	Usage
`--bg-hover`	rgba(255, 255, 255, 0.04)	Hover background tint
`--bg-base`	rgb(10, 10, 15)	Page base background
`--overlay-backdrop`	rgba(0, 0, 0, 0.6)	Modal/drawer overlay
`--max-width`	1120px	Content max width
`--max-width-sm`	720px	Narrow content max width
`--nav-height`	64px	Navigation bar height