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-deeprgb(3, 3, 7)bg-deep

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

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

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

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

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

--text-secondaryrgb(150, 152, 162)text-secondary

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

--text-ghostrgb(133, 133, 154)text-ghost

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

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

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

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

--accent-secondaryrgb(149, 103, 255)accent-secondary

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

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

--color-errorrgb(240, 69, 69)color-error

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

Accents also ship -rgb channel triplets (--accent-primary-rgb,--accent-secondary-rgb) that glows, gradients, and focus rings compose viavar(). 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.

Each series also ships its channels, --chart-1-rgb through--chart-6-rgb, for tints of the same series (a band, an area fill, a highlighted range): rgba(var(--chart-2-rgb), 0.35). They follow the light-mode shifts with their solids, so a tint never falls out of step with its line.

--chart-1#4d7ef7chart-1

--chart-2#ea580cchart-2

--chart-3#0d9488chart-3

--chart-4#8b5cf6chart-4

--chart-5#db2777chart-5

--chart-6#65a30dchart-6

Spacing

--space-xs4px

--space-sm8px

--space-md16px

--space-lg24px

--space-xl40px

--space-2xl64px

--space-3xl96px

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-bodyThe quick brown fox jumps over the lazy dog

--font-labelThe quick brown fox

--font-monoconst x = 42;

Token	Value
`--body-size`	var(--text-md) (17px)
`--body-lh`	1.7
`--body-weight`	500
`--heading-size`	var(--text-xl) (clamp(22px, 2.5vw, 26px))
`--heading-weight`	500
`--ui-size`	14px
`--ui-lh`	1.4
`--code-size`	14px
`--code-lh`	1.8

--ui-size is for dense interface text such as a chip, a toolbar button or a meta line, where 16px body text is too loud and the 12px label step too small. It is a role rather than a scale step, so there is no .arc-text-ui utility.

Borders & Radius

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

Shadows

--shadow-xs0 1px 2px

--shadow-sm0 2px 4px

--shadow-md0 4px 12px

--shadow-lg0 8px 24px

--shadow-xl0 16px 48px

--shadow-overlay0 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-textPrimary → muted text fade

--gradient-accent-textBlue → violet accent

--gradient-dividerSubtle content separator

--gradient-divider-glowAccent-tinted divider glow

--gradient-border-glowSubtle border glow effect

Focus

Transitions

Each transition token composes a duration and a curve from themotion 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