@risqbase-inc/ui-components · v2.2.0

Tokens

One source of truth for colour, dimension, motion.

323 entries across primitive → semantic → component → theme. W3C Design Tokens Format. Every entry carries $value, $type, $description, role, and Figma binding with scopes[]. Click any swatch to copy the hex.

Primitive - brand & neutral

Indigo-600 is the brand. Stone is the neutral. Teal-600 is Iris (the AI / intelligence accent).

color.brand.indigo
Brand · CTAs, logo, links
50#EEF2FF
100#E0E7FF
200#C7D2FE
300#A5B4FC
400#818CF8
500#6366F1
600#4F46E5
700#4338CA
800#3730A3
900#312E81
color.neutral.stone
Warm-stone neutral
50#FAFAF9
100#F5F5F4
200#E7E5E4
300#D6D3D1
400#A8A29E
500#78716C
600#57534E
700#44403C
800#292524
900#1C1917
color.palette.teal
Iris accent · gauge arc default · IRIS identity
50#F0FDFA
100#CCFBF1
200#99F6E4
300#5EEAD4
400#2DD4BF
500#14B8A6
600#0D9488
700#0F766E
800#115E59
900#134E4A

Chart-domain ramps NEW · BRIEF-401

38 hex values landed in v1.4.0 - three sequential ramps (10 stops each) + two diverging extensions (4 stops each). OKLCH perceptually equal-stepped. Read the full rationale →

color.palette.risk
Risk severity · cool→warm hue rotation
50#E9F9FD
100#D0F0F8
200#B0E0F2
300#93C3E5
400#9B9BBA
500#C36051
600#B82927
700#990011
800#6A000B
900#380104
color.palette.financial
Currency, revenue, fines · monochromatic emerald
50#EAFBF1
100#D4F2DF
200#B3E6C4
300#83D09F
400#4CB779
500#009C56
600#007F40
700#006432
800#004323
900#002110
color.palette.operational
Uptime, throughput, capacity · desaturated indigo
50#F0F6FF
100#DEE9FF
200#C5D7FF
300#A2BAFA
400#7A9AF2
500#5578E9
600#395CCD
700#2746A3
800#15306F
900#05173B
color.palette.diverging-warm
n4#670000
n3#8D0000
p3#7B2900
p4#502000
color.palette.diverging-cool
n4#670000
n3#7B2900
p3#005456
p4#002570

Semantic - what each role resolves to

Semantic tokens alias primitives. Components alias semantic tokens. Override-only theme files re-bind the semantic layer per mode.

Light · default9 canonical roles
surface.default
→ neutral.white · #FFFFFF
text.default
→ stone.800 · #292524
text.subtle
→ stone.500 · #78716C
action.primary
→ indigo.600 · #4F46E5
action.primary-hover
→ indigo.700 · #4338CA
action.primary-subtle
→ indigo.100 · #E0E7FF
border.default
→ stone.200 · #E7E5E4
border.focus
→ indigo.500 · #6366F1
surface.inverse
→ stone.900 · #1C1917
Darksame roles, re-bound
surface.default
#101214 · L\* 0.18
text.default
#E3E7E9 · 15:1 vs surface
text.subtle
#A2A7AB · 7.7:1
action.primary
#4768DB · indigo brightens
action.primary-hover
#678AF6
action.primary-subtle
#182241
border.default
#5E6266 · 3:1 vs surface
border.focus
#818CF8 · indigo-400
surface.inverse
#F3F5F7 · light on dark

Themes

3 runtime themes (light · dark · HC) plus a print stylesheet. The dark and HC themes are override-only: they re-bind keys at the semantic tier; unbound keys inherit light. The print stylesheet uses pure white surfaces, 80/60% black text tiers, and four pattern-fill assets per band.

Dark

~47 overrides. Surfaces L\* 0.18 (never #000); brand brightens to indigo-500-equivalent; risk bands lift-and-flip.

stable

High contrast (forced-colors)

CSS system keywords (Canvas, CanvasText, Highlight…). Chart marks differentiate via shape, dash, pattern only - colour cannot carry meaning.

stable

Print

Pure white surfaces. Seven-tier black ladder. Four pattern-fill SVG-data-URI tokens; pattern density tracks band severity inversely.

stable

Light

The baseline. v4.1+ stable.

stable

Dimension & density

Base unit 4px. Spacing scale 0–48px. Three density modes: compact (0.75×) · default (1×) · comfortable (1.25×). Global data-density cascades.

Spacing

4 · 8 · 12 · 16 · 24 · 32 · 48 px

dimension.spacing.{1..8}

Radius

4 · 8 · 12 · 16 · full

dimension.radius.{sm..full}
compact
default
comfortable

Density

0.75× · 1× · 1.25× scalars

dimension.density.scale.{...}

How to consume

Tokens emit to CSS custom properties via Style Dictionary. Consume them through Tailwind arbitrary values or vanilla CSS.

From Tailwind

// Component code - never reach past the role-token layer.
<button className="bg-[var(--color-action-primary)] text-[var(--color-text-on-action)] hover:bg-[var(--color-action-primary-hover)] rounded-[var(--dimension-radius-button-default)]">
  Sign up
</button>

From vanilla CSS

.my-button {
  background: var(--color-action-primary);
  color: var(--color-text-on-action);
}
.my-button:hover {
  background: var(--color-action-primary-hover);
}

/* Themes auto-apply when data-theme is set on the root */
[data-theme="dark"] .my-button { /* values auto-inherit overrides */ }

From the JSON tree

import tokens from '@risqbase-inc/ui-components/tokens';

console.log(tokens.color.action.primary);
// { $value: '#4F46E5', $type: 'color', $description: 'Primary action surface - CTAs, primary buttons', ... }

Methodology

Every chart-domain hex was computed in OKLCH (Björn Ottosson, 2020) - the only perceptual space where equal L\* steps look equally far apart. Every AA pair was verified against WCAG 2.2 §1.4.3 / 1.4.11. Diverging extensions clear 7:1 vs surface.default.

See the BRIEF-401 changelog entry for full per-ramp rationale and rejected alternatives (≥2 per ramp).