Reference

Tokens

Every CSS custom property in the Entangle Design System. Use these tokens to build theme-aware interfaces that stay in sync with the system.

01 · Theme

Colour — Theme

Dynamic tokens that switch between dark and light mode automatically.

TokenDescriptionPreview
--bgBackground canvas
--bg-cardCard surface (translucent)
--fgPrimary text
--fg-mutedSecondary text
--fg-dimmedTertiary text
--borderDefault border
--border-hoverHover border
--primaryBrand accent (#635bff)
--primary-tint-subtle4% accent wash
--primary-tint-medium10% accent wash
--primary-tint-strong20% accent wash

02 · Brand

Colour — Brand palette

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

03 · Status

Colour — Status

Positive

--color-status-positive-50
--color-status-positive-500
--color-status-positive-700

Warning

--color-status-warning-50
--color-status-warning-500
--color-status-warning-700

Critical

--color-status-critical-50
--color-status-critical-500
--color-status-critical-700

Info

--color-status-info-50
--color-status-info-500
--color-status-info-700

04 · Spacing

Spacing

--space-14px
--space-28px
--space-312px
--space-416px
--space-520px
--space-624px
--space-832px
--space-1040px
--space-1248px
--space-1664px
--space-2080px
--space-2496px
--space-32128px

05 · Radii

Radii

--radius-xs2px
--radius-sm4px
--radius-md8px
--radius-lg12px
--radius-xl16px
--radius-full9999px

06 · Shadows

Shadows

--shadow-sm0 1px 2px rgba(0,0,0,0.3)
--shadow-md0 4px 6px rgba(0,0,0,0.3)
--shadow-lg0 10px 15px rgba(0,0,0,0.3)
--shadow-xl0 20px 25px rgba(0,0,0,0.3)

07 · Typography

Font families, sizes, metrics

Families

--font-family-displayHeadlines, display type
"Suisse Intl", system-ui, sans-serif
--font-family-sansBody text, UI labels
"Suisse Intl", system-ui, sans-serif
--font-family-monoCode, tokens, eyebrows
"Suisse Intl Mono", ui-monospace, monospace

Font sizes

--font-size-xs12pxAa
--font-size-sm14pxAa
--font-size-md16pxAa
--font-size-lg18pxAa
--font-size-xl20pxAa
--font-size-2xl24pxAa
--font-size-3xl32pxAa
--font-size-4xl40pxAa
--font-size-5xl56pxAa
--font-size-6xl72pxAa
--font-size-7xl96pxAa

Line heights

--font-lineHeight-tight1.1
--font-lineHeight-snug1.25
--font-lineHeight-relaxed1.6

Letter spacing

--font-letterSpacing-tight-0.02em
--font-letterSpacing-normal0em
--font-letterSpacing-wide0.04em

08 · Motion

Motion

See the Motion foundations page for the full easing and duration reference.

--motion-duration-sm150ms
--motion-duration-md250ms
--motion-easing-standardcubic-bezier(0.4, 0, 0.2, 1)