nalarx-ui

Tokens

Every value the theme item ships, rendered from the installed CSS.

The swatches below read registry/styles/tokens.css, the same file @nalarx/theme installs. Values match nalarx-frontend apps/web at 6ece50f98 exactly.

Colour

Use the Tailwind names from base (bg-bg-elev, text-ink-3, border-line) or var(--name) in CSS. Each row shows the light and the dark value.

Surfaces

light
  • --bg#f7f7f8
  • --bg-content#f7f7f8
  • --bg-elev#ffffff
  • --bg-sunken#f0f0f2
  • --bg-hover#ebebee
  • --line#e4e4e8
  • --line-strong#d4d4da
dark
  • --bg#0d0d0d
  • --bg-content#131313
  • --bg-elev#171717
  • --bg-sunken#090909
  • --bg-hover#1f1f1f
  • --line#262626
  • --line-strong#383838

Ink

light
  • --ink#1a1a1c
  • --ink-2#3a3a3e
  • --ink-3#5f5f65
  • --ink-4#6a6a70
  • --ink-5#c4c4cb
dark
  • --ink#f5f5f6
  • --ink-2#cdcdd2
  • --ink-3#95959c
  • --ink-4#86868d
  • --ink-5#44444b

Action and focus

light
  • --on-fill#ffffff
  • --paper#ffffff
  • --paper-ink-3#6a6a70
  • --accent#E8500C
  • --accent-softcolor-mix(in oklab, #E8500C 14%, transparent)
  • --accent-cta-bg#E03400
  • --accent-cta-ink#ffffff
  • --accent-cta-hover#C22D00
  • --accent-inkoklch(0.47 0.16 40)
  • --danger-bg#D92D20
  • --danger-ink#ffffff
  • --danger-hover#B42318
  • --accent-calmcolor-mix(in oklab, var(--accent) 58%, var(--bg-elev))
  • --focus-ringvar(--ink)
  • --focus-ring-softcolor-mix(in oklab, var(--ink) 14%, transparent)
  • --select-bgoklch(0.85 0.07 250)
dark
  • --on-fill#ffffff
  • --paper#ffffff
  • --paper-ink-3#6a6a70
  • --accent#ED5A12
  • --accent-softoklch(0.33 0.08 42)
  • --accent-cta-bg#E03400
  • --accent-cta-ink#ffffff
  • --accent-cta-hover#C22D00
  • --accent-inkoklch(0.82 0.12 48)
  • --danger-bg#D92D20
  • --danger-ink#ffffff
  • --danger-hover#B42318
  • --accent-calmcolor-mix(in oklab, var(--accent) 58%, var(--bg-elev))
  • --focus-ringvar(--ink)
  • --focus-ring-softcolor-mix(in oklab, var(--ink) 14%, transparent)
  • --select-bgoklch(0.45 0.06 250)

Status

light
  • --status-active#00A251
  • --status-pending#FE6601
  • --status-error#CF4040
  • --status-completed#5126FC
  • --status-inactive#3B3B3B
  • --status-active-softcolor-mix(in oklab, #00A251 14%, transparent)
  • --status-pending-softcolor-mix(in oklab, #FE6601 14%, transparent)
  • --status-error-softcolor-mix(in oklab, #CF4040 14%, transparent)
  • --status-completed-softcolor-mix(in oklab, #5126FC 14%, transparent)
  • --status-inactive-softcolor-mix(in oklab, #3B3B3B 14%, transparent)
  • --okvar(--status-active)
  • --ok-softvar(--status-active-soft)
  • --ok-ink#046B36
  • --warnvar(--status-pending)
  • --warn-softvar(--status-pending-soft)
  • --errvar(--status-error)
  • --err-softvar(--status-error-soft)
  • --err-ink#A32B2B
  • --warn-ink#8A3A00
  • --delta-posoklch(72% 0.15 148)
  • --delta-negvar(--brand-red)
  • --donevar(--status-completed)
  • --done-softvar(--status-completed-soft)
  • --offvar(--status-inactive)
  • --off-softvar(--status-inactive-soft)
dark
  • --status-active#00A251
  • --status-pending#FE6601
  • --status-error#EF6661
  • --status-completed#5126FC
  • --status-inactive#3B3B3B
  • --status-active-softcolor-mix(in oklab, #00A251 14%, transparent)
  • --status-pending-softcolor-mix(in oklab, #FE6601 14%, transparent)
  • --status-error-softcolor-mix(in oklab, #CF4040 14%, transparent)
  • --status-completed-softcolor-mix(in oklab, #5126FC 14%, transparent)
  • --status-inactive-softcolor-mix(in oklab, #3B3B3B 14%, transparent)
  • --okvar(--status-active)
  • --ok-softcolor-mix(in oklab, var(--status-active) 22%, transparent)
  • --ok-ink#3DD98A
  • --warnvar(--status-pending)
  • --warn-softcolor-mix(in oklab, var(--status-pending) 22%, transparent)
  • --errvar(--status-error)
  • --err-softcolor-mix(in oklab, var(--status-error) 22%, transparent)
  • --err-ink#F58A85
  • --warn-ink#FFA366
  • --delta-posoklch(76% 0.16 148)
  • --delta-negoklch(0.68 0.17 25)
  • --donevar(--status-completed)
  • --done-softcolor-mix(in oklab, var(--status-completed) 22%, transparent)
  • --offvar(--status-inactive)
  • --off-softcolor-mix(in oklab, var(--status-inactive) 30%, transparent)

Data

light
  • --chart-1#2182fb
  • --chart-2#e34b00
  • --chart-3#009696
  • --chart-4#8c57ff
  • --chart-5#bd7400
  • --chart-6#c75d87
  • --seq-0#f1f6fd
  • --seq-1#dbe9fb
  • --seq-2#b7d3f6
  • --seq-3#86b6ef
  • --seq-4#3987e5
  • --seq-5#256abf
  • --seq-6#184f95
  • --seq-strong-ink#fff
dark
  • --chart-1#2686ff
  • --chart-2#e8500c
  • --chart-3#009696
  • --chart-4#8c57ff
  • --chart-5#ca8000
  • --chart-6#d56a93
  • --seq-0#182233
  • --seq-1#1d3352
  • --seq-2#234a7a
  • --seq-3#2b62a3
  • --seq-4#3987e5
  • --seq-5#6fa8ef
  • --seq-6#a9cbf6
  • --seq-strong-ink#0b1220

Brand (marketing only)

light
  • --brand-red#FF2427
  • --brand-flame#FF3300
  • --brand-orange#FF6200
  • --brand-black#171717
  • --brand-parchment#F4F1EA
  • --brand-white#FFFFFF
  • --brand-purple#8C57FF
  • --brand-blue#2686FF
  • --brand-mint#10C084
  • --brand-gradient-primarylinear-gradient(135deg, #FF2427 26%, #FF3300 63%, #FF6200 91%)
  • --brand-gradient-purplelinear-gradient(135deg, #8C57FF 0%, #A081FF 100%)
  • --brand-gradient-teallinear-gradient(135deg, #10C084 0%, #00D3B8 100%)
  • --brand-gradient-bluelinear-gradient(135deg, #2A9FFF 0%, #2686FF 100%)
  • --brand-gradient-purple-revlinear-gradient(135deg, #A081FF 0%, #8C57FF 100%)
  • --brand-gradient-teal-revlinear-gradient(135deg, #00D3B8 0%, #10C084 100%)
  • --brand-gradient-blue-revlinear-gradient(135deg, #2686FF 0%, #2A9FFF 100%)
  • --brand-gradientvar(--brand-gradient-primary)
dark
  • --brand-red#FF2427
  • --brand-flame#FF3300
  • --brand-orange#FF6200
  • --brand-black#171717
  • --brand-parchment#F4F1EA
  • --brand-white#FFFFFF
  • --brand-purple#8C57FF
  • --brand-blue#2686FF
  • --brand-mint#10C084
  • --brand-gradient-primarylinear-gradient(135deg, #FF2427 26%, #FF3300 63%, #FF6200 91%)
  • --brand-gradient-purplelinear-gradient(135deg, #8C57FF 0%, #A081FF 100%)
  • --brand-gradient-teallinear-gradient(135deg, #10C084 0%, #00D3B8 100%)
  • --brand-gradient-bluelinear-gradient(135deg, #2A9FFF 0%, #2686FF 100%)
  • --brand-gradient-purple-revlinear-gradient(135deg, #A081FF 0%, #8C57FF 100%)
  • --brand-gradient-teal-revlinear-gradient(135deg, #00D3B8 0%, #10C084 100%)
  • --brand-gradient-blue-revlinear-gradient(135deg, #2686FF 0%, #2A9FFF 100%)
  • --brand-gradientvar(--brand-gradient-primary)

Hover

light
  • --hover-bgvar(--bg-hover)
  • --hover-inkvar(--ink)
  • --hover-bordervar(--line-strong)
  • --hover-strong-bgvar(--ink-2)
  • --hover-strong-ink#ffffff
dark
  • --hover-bgvar(--bg-hover)
  • --hover-inkvar(--ink)
  • --hover-bordervar(--line-strong)
  • --hover-strong-bgvar(--line-strong)
  • --hover-strong-inkvar(--ink)

Aliases (migrate away)

light
  • --surfacevar(--bg-elev)
  • --on-accent#ffffff
  • --linkvar(--ink)
  • --z-toast100
  • --z-tooltip1030
  • --z-dialog1100
  • --z-app-dialog1200
  • --z-popover1400
dark
  • --surfacevar(--bg-elev)
  • --on-accent#ffffff
  • --linkvar(--ink)
  • --z-toast100
  • --z-tooltip1030
  • --z-dialog1100
  • --z-app-dialog1200
  • --z-popover1400

Type

text-displayNet sales this month36 / 300 / 1.15, Plex Serif. Empty-chat greeting only
text-title-1Net sales this month22 / 500 / 1.4. Page title
text-title-2Net sales this month17 / 600 / 1.35. Panel and dialog title
text-title-3Net sales this month14 / 600 / 1.4. Card and row title
text-bodyNet sales this month13 / 400 / 1.55. Default text
text-body-smNet sales this month12 / 400 / 1.5. Secondary text, table cells
text-metaNet sales this month11 / 500 / 1.4. Chips, times, captions
text-labelNet sales this month11 / 600 / 1.4, uppercase, 0.06em. Group labels
text-kpiRp132.4M28 / 600 / 1.1, tabular. Main KPI number

text-label sets size, weight and tracking; add uppercase yourself. text-kpi needs tnum for tabular digits.

Radius

rounded-nx-sm6px. Small icon controls, xs buttons, keyboard hints
rounded-nx8px. Buttons, inputs, selects, menu items
rounded-nx-md10px. Cards, rows, popovers
rounded-nx-lg14px. Dialogs, chat composer, large panels
rounded-nx-full999px. Pills, status chips, avatars, switches

Motion

TokenValueTailwind
--dur-fast120ms: hover, pressduration-nx-fast
--dur220ms: tab indicator, enterduration-nx
--dur-slow340ms: larger panelsduration-nx-slow
--ease-outcubic-bezier(.2, .8, .2, 1)ease-nx

Durations become 0ms under prefers-reduced-motion: reduce.

Sizes

TailwindValueUse
h-control-xs24pxRow actions in dense lists
h-control-sm28pxToolbars, filters, actions inside a card
h-control-md32pxDefault: page header, dialogs, forms
h-control-lg40pxFull-screen submit only
h-row--d-row: 36px, 30px compact, 42px comfyTable and list rows
px-row-pad--d-pad: 14px, 10px compact, 18px comfyRow padding

Spacing otherwise uses Tailwind's default 4px steps (p-1 is 4px, p-3 is 12px).

Why the new names

rounded-nx-*, ease-nx and the type roles are new Tailwind names instead of overrides of rounded-md or ease-out. Apps already use the Tailwind defaults, so redefining them would change screens that nobody touched.

Foundations

The product UI rules every item follows, condensed from nalarx-frontend DESIGN.md.

Versioning and drift

How items are versioned, how an app pins a release, and how the lockfile catches silent edits.

On this page

ColourTypeRadiusMotionSizesWhy the new names