Reference · CSS variables

Canonical list of --nrn-* variables exposed by the widget inside the Shadow DOM. Source of truth: the CSS bundle embedded in https://cdn.neuroon.ai/widget@0.9.10/widget.js (the values here match that version). To verify a specific value, inspect the shadow root with DevTools and look at the .neuroon-widget block.

Conventions

• Colors use the RGB-triplet format (6 182 212, not #06b6d4). The widget composes them with rgb(var(--nrn-primary)) and supports runtime alpha: rgb(var(--nrn-primary) / 0.18).
• Spacings, radii, shadows, motion are standard CSS values (rem, ms, cubic-bezier(...)).
• Z-index values are integers.
• Variables are injected on .neuroon-widget (the shadow host). To override from outside, anchor the rule to the host: .neuroon-widget { --nrn-primary: 16 206 199; }.

Surfaces

Variable	Light default
--nrn-surface-base	255 255 255 (white)
--nrn-surface-elevated	248 250 252 (slate-50)
--nrn-surface-overlay	241 245 249 (slate-100)
--nrn-surface-hover	226 232 240 (slate-200)
--nrn-surface-subtle	241 245 249 (slate-100)
--nrn-surface-sunken	241 245 249 (slate-100)
--nrn-surface-float	250 251 252 (floating elements)

Text

Variable	Light default
--nrn-text-primary	15 23 42 (slate-900)
--nrn-text-secondary	30 41 59 (slate-800)
--nrn-text-tertiary	51 65 85 (slate-700)
--nrn-text-muted	71 85 105 (slate-600 — WCAG AA)
--nrn-text-disabled	148 163 184 (slate-400)

Border

Variable	Light default
--nrn-border-default	226 232 240 (slate-200)
--nrn-border-emphasis	203 213 225 (slate-300)
--nrn-border-subtle	241 245 249 (slate-100)

Brand primary

Variable	Default	Comment
--nrn-primary	8 145 178	cyan-600 (4.5:1 on white)
--nrn-primary-light	6 182 212	cyan-500
--nrn-primary-dark	14 116 144	cyan-700
--nrn-primary-hover	6 182 212	cyan-500 (hover state)
--nrn-primary-text	255 255 255	text on primary

Full scale (for backgrounds, hover, borders):

Variable	Default	Typical use
--nrn-primary-50	236 254 255	subtle backgrounds
--nrn-primary-100	207 250 254	hover backgrounds
--nrn-primary-200	165 243 252	active backgrounds
--nrn-primary-300	103 232 249	light borders
--nrn-primary-400	34 211 238	decorative
--nrn-primary-500	6 182 212	= primary-light
--nrn-primary-600	8 145 178	= primary
--nrn-primary-700	14 116 144	= primary-dark
--nrn-primary-800	21 94 117	heavy accents
--nrn-primary-900	22 78 99	very dark
--nrn-primary-950	8 51 68	near black

Brand secondary

Variable	Default
--nrn-secondary	37 99 235 (blue-600)
--nrn-secondary-light	59 130 246 (blue-500)
--nrn-secondary-dark	29 78 216 (blue-700)

Accent

Variable	Default	Use
--nrn-accent-purple	147 51 234 (purple-600)	AI suggestions, image search
--nrn-accent-emerald	4 120 87 (emerald-700, WCAG AA)	AI-applied filters, success
--nrn-accent-amber	217 119 6 (amber-600)	warnings, medium confidence
--nrn-accent-purple-strong	109 40 217 (violet-700)	purple emphasis
--nrn-accent-emerald-strong	6 95 70 (emerald-800)	emerald emphasis
--nrn-accent-amber-strong	180 83 9 (amber-700)	amber emphasis

Semantic

Variable	Default
--nrn-success	22 163 74 (green-600)
--nrn-success-strong	21 128 61 (green-700)
--nrn-warning	202 138 4 (yellow-600)
--nrn-warning-strong	161 98 7 (yellow-700)
--nrn-error	220 38 38 (red-600)
--nrn-error-strong	185 28 28 (red-700)
--nrn-info	37 99 235 (blue-600)

Decorative & status

Variable	Default	Use
--nrn-rating	245 158 11 (amber-500)	stars/ratings
--nrn-rating-light	251 191 36 (amber-400)	rating background
--nrn-trending	236 72 153 (pink-500)	trending badges
--nrn-premium	139 92 246 (violet-500)	premium badges
--nrn-winner	245 158 11 (amber-500)	comparator winner
--nrn-importance-essential	244 63 94 (rose-500)	essential importance
--nrn-importance-high	245 158 11 (amber-500)	high importance
--nrn-importance-medium	6 182 212 (cyan-500)	medium importance
--nrn-importance-low	100 116 139 (slate-500)	low importance

Glass / overlay

Variable	Default
--nrn-overlay	0 0 0
--nrn-overlay-opacity	0.5
--nrn-glass-background	255 255 255
--nrn-glass-border	226 232 240
--nrn-ring-offset	255 255 255
--nrn-glass-blur	20px
--nrn-glass-blur-lg	32px
--nrn-glass-bg	rgba(255, 255, 255, 0.65)
--nrn-glass-bg-hover	rgba(255, 255, 255, 0.85)

Typography

Variable	Default
--nrn-font-size-xs	0.75rem
--nrn-font-size-sm	0.875rem
--nrn-font-size-base	1rem
--nrn-font-size-lg	1.125rem
--nrn-font-size-xl	1.25rem
--nrn-font-weight-normal	400
--nrn-font-weight-medium	500
--nrn-font-weight-semibold	600
--nrn-font-weight-bold	700
--nrn-font-weight-display	800
--nrn-font-letter-spacing-tight	-0.02em
--nrn-font-letter-spacing-display	-0.03em

Spacing

Variable	Default
--nrn-spacing-xs	0.25rem
--nrn-spacing-sm	0.5rem
--nrn-spacing-md	0.75rem
--nrn-spacing-lg	1rem
--nrn-spacing-xl	1.5rem

Radius

Variable	Default
--nrn-radius-sm	0.25rem
--nrn-radius-md	0.375rem
--nrn-radius-lg	0.5rem
--nrn-radius-xl	0.75rem
--nrn-radius-2xl	1rem

Shadow

Variable	Default
--nrn-shadow-xs	0 1px 2px rgb(0 0 0 / 0.05)
--nrn-shadow-sm	0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06)
--nrn-shadow-md	0 4px 6px rgb(0 0 0 / 0.07), 0 2px 4px rgb(0 0 0 / 0.06)
--nrn-shadow-lg	0 10px 15px rgb(0 0 0 / 0.1), 0 4px 6px rgb(0 0 0 / 0.05)
--nrn-shadow-xl	0 20px 25px rgb(0 0 0 / 0.1), 0 10px 10px rgb(0 0 0 / 0.04)
--nrn-shadow-2xl	0 25px 50px rgb(0 0 0 / 0.25)
--nrn-shadow-primary	0 4px 14px rgb(8 145 178 / 0.25)
--nrn-shadow-primary-lg	0 8px 24px rgb(8 145 178 / 0.35)

Motion (duration + easing)

Variable	Default	Use
--nrn-duration-instant	50ms	tap feedback
--nrn-duration-fast	150ms	hover states
--nrn-duration-normal	250ms	standard transitions
--nrn-duration-slow	400ms	modal entrance
--nrn-duration-slower	600ms	heavier entrances
--nrn-ease-out	cubic-bezier(0.16, 1, 0.3, 1)	smooth entrance
--nrn-ease-in	cubic-bezier(0.4, 0, 1, 1)	quick exit
--nrn-ease-in-out	cubic-bezier(0.65, 0, 0.35, 1)	balanced
--nrn-ease-spring	cubic-bezier(0.34, 1.56, 0.64, 1)	subtle bounce
--nrn-ease-bounce	cubic-bezier(0.68, -0.6, 0.32, 1.6)	playful bounce
--nrn-motion-entrance	300ms var(--nrn-ease-out)	entrance preset
--nrn-motion-exit	200ms var(--nrn-ease-in)	exit preset
--nrn-motion-hover	150ms var(--nrn-ease-out)	hover preset
--nrn-motion-stagger	40ms	delay between items

Z-index

Variable	Default
--nrn-z-dropdown	1000
--nrn-z-sticky	1020
--nrn-z-fixed	1030
--nrn-z-drawer	1040
--nrn-z-modal	1050
--nrn-z-popover	1060
--nrn-z-tooltip	1070
--nrn-z-toast	1080
--nrn-z-modal-fullscreen	9999

Override from your host

Override directly using the RGB-triplet syntax:

.neuroon-widget {
  --nrn-primary: 16 206 199;       /* your brand color */
  --nrn-primary-hover: 13 165 159;
  --nrn-radius-md: 0.5rem;
}

Don't use #06b6d4 or rgb(6, 182, 212) — the widget wraps the variable in rgb(var(--nrn-primary) / <alpha>) and needs the function-less form. If your design system only exposes hex, convert to triplet before injecting.

Dark mode

The widget detects the theme via data-theme="dark" (manual) or prefers-color-scheme (auto, when theme="auto"). The variables above are the light-mode defaults. To see dark-mode defaults, inspect the shadow root with DevTools and look at the .neuroon-widget[data-theme="dark"] block. The most portable way to adapt your brand to both modes is to define both at the host:

.neuroon-widget { --nrn-primary: 16 206 199; }
.neuroon-widget[data-theme="dark"] { --nrn-primary: 102 240 234; }

Further reading

• Widget → Theming
• Widget → Configuration