Foundations

Colour

Entangle uses a multi-hue palette system with 11-step scales. Each hue is hand-tuned for perceptual uniformity and WCAG contrast compliance.

Brand

Primary brand colour. Indigo-violet with energy.
50#eef2ff
100#e0e7ff
200#c7d2fe
300#a5b4fc
400#818cf8
500#635bff
600#5046e5
700#4338ca
800#3730a3
900#312e81
950#1e1b4b

Coral

Warm accent for CTAs, highlights, and emphasis.
50#fff7ed
100#ffedd5
200#fed7aa
300#fdba74
400#fb923c
500#f97316
600#ea580c
700#c2410c
800#9a3412
900#7c2d12
950#431407

Mint

Cool accent for success states and positive signals.
50#ecfdf5
100#d1fae5
200#a7f3d0
300#6ee7b7
400#34d399
500#10b981
600#059669
700#047857
800#065f46
900#064e3b
950#022c22

Sand

Warm neutral accent for warmth and earthiness.
50#fefce8
100#fef9c3
200#fef08a
300#fde047
400#facc15
500#eab308
600#ca8a04
700#a16207
800#854d0e
900#713f12
950#422006

Neutral

Neutral scale

Warm grey scale with subtle olive undertone.

50#fafafa
100#f5f5f5
200#e5e5e5
300#d4d4d4
400#a3a3a3
500#737373
600#525252
700#404040
800#262626
900#171717
950#0a0a0a

Status

Status colours

Three-stop scales for critical, warning, positive, and info states.

Critical
50500700
Warning
50500700
Positive
50500700
Info
50500700

Mapping

Semantic tokens

Semantic tokens map to primitives and switch automatically between themes.

SwatchTokenRole
--color-bg-canvasPage background
--color-bg-surfaceCard / panel background
--color-bg-surface-mutedMuted surface background
--color-bg-elevatedElevated surface (modals, popovers)
--color-fg-primaryPrimary text
--color-fg-secondarySecondary text
--color-fg-mutedMuted / placeholder text
--color-fg-disabledDisabled text
--color-border-defaultDefault border
--color-border-subtleSubtle / hairline border
--color-border-focusFocus ring border
--color-action-primary-defaultPrimary action (button)
--color-action-primary-hoverPrimary action hover
--color-action-critical-defaultCritical / destructive action