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(150, 152, 162) text-secondary

--text-muted rgb(142, 142, 155) text-muted

--text-ghost rgb(133, 133, 154) 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(148, 102, 255) 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

Accents also ship -rgb channel triplets (--accent-primary-rgb, --accent-secondary-rgb) that glows, gradients, and focus rings compose via var() — override the base pair and the rest follows. See Theming.

Charts

Categorical series palette for arc-chart and data visualization. Assign hues in fixed order by series position — never cycle or reshuffle them. The set is validated for color-vision-deficiency separation and contrast against --bg-card in both themes (series 1, 4, and 6 shift automatically in light mode). Status colors are reserved for state and are not part of this palette.

--chart-1 #4d7ef7 chart-1

--chart-2 #ea580c chart-2

--chart-3 #0d9488 chart-3

--chart-4 #8b5cf6 chart-4

--chart-5 #db2777 chart-5

--chart-6 #65a30d chart-6

Spacing

--space-xs 4px

--space-sm 8px

--space-md 16px

--space-lg 24px

--space-xl 40px

--space-2xl 64px

--space-3xl 96px

Typography

ARC UI ships no font files — only role slots. Assign a face to each role via --font-<role>-family and every component follows. The samples below render live from the slots; --font-accent is a back-compat alias of --font-label.

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

--font-label The quick brown fox

--font-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

--opacity-disabled 0.5

--opacity-muted 0.6

--opacity-hover 0.8

--opacity-visible 1

Motion

Motion is two base scales — four curves and five durations — that the --transition-* tokens compose. The curve carries the meaning: pick it by what the element is doing, not by taste.

Token	Value	Usage
`--ease-standard`	cubic-bezier(0.4, 0, 0.2, 1)	A state change on an element that stays put — hover recolor, border shift
`--ease-out`	cubic-bezier(0.16, 1, 0.3, 1)	Something entering or expanding
`--ease-in`	cubic-bezier(0.7, 0, 0.84, 0)	Something leaving — paired with a shorter duration
`--ease-spring`	cubic-bezier(0.34, 1.56, 0.64, 1)	A control confirming a discrete action — toggle landing, checkbox filling
`--duration-fast`	120ms	Micro state changes
`--duration-base`	200ms	Default for most transitions
`--duration-slow`	400ms	Large surfaces
`--duration-enter`	500ms	Entrances
`--duration-exit`	300ms	Exits
`--ease-out-expo`	var(--ease-out)	Back-compat alias
`--ease-in-out`	var(--ease-standard)	Back-compat alias

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

Transitions

Each transition token composes a duration and a curve from the motion scales. Override the base --duration-* and --ease-* tokens and the compositions follow.

Token	Composition
`--transition-fast`	var(--duration-fast) var(--ease-standard)
`--transition-base`	var(--duration-base) var(--ease-standard)
`--transition-slow`	var(--duration-slow) var(--ease-standard)
`--transition-enter`	var(--duration-enter) var(--ease-out)
`--transition-exit`	var(--duration-exit) var(--ease-in)

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