Color Palette
Background Colors
Cyan (Brand)
#6CEFCE · ×11
Light Purple 3
#A569FF · ×2
Text Colors
Light Purple
#BF7AF0 · ×64
Light Gray 2
#B7B4B4 · ×37
Product Semantic Colors (from :root)
Each color has 4 shades + 4 alpha variants — the richest semantic color system in the series. These power feature-specific UI: multiplayer cursors, comment threads, AI copilot panels, and presence indicators.
Shadow & Gradient Colors
Dark Gray 3 (Shadow)
#272626 · ×25
White 2 (Fill)
rgba(247,247,248,.12)
Light Gray 3
rgba(247,247,248,.08)
Typography
Primary · Suisse (suisse)
Suisse
Build multiplayer apps in minutes. Real-time presence, comments, AI copilots and collaborative editing.
Regular · 400
Medium · 500
Mono · JetBrains Mono + Apple Color Emoji
JetBrains Mono
const room = client.enterRoom("my-room");
Code font
Apple Color Emoji 🎨
Realtime.
64px · Medium · line-height: 70.4px · tracking: −1.28px (tightest)
Multiplayer infrastructure
52px · Medium · line-height: 57.2px · tracking: −1.04px
Build faster with Liveblocks
36px · Medium · line-height: 38.4px · tracking: −0.32px
Add comments, multiplayer cursors, presence, and AI co-pilots to your product with just a few lines of code.
20px · Regular · line-height: 33px · tracking: +0.056px
Now in public beta · 5,000+ teams · Linear, Loom, Vercel
16px · Regular · line-height: 24px · tracking: +0.064px
14px · Medium · tracking: +0.14px
14px · Medium · line-height: 20px · tracking: +0.14px
REALTIME · PRESENCE · COMMENTS
11px · Medium · tracking: +0.35px (widest positive)
Letter Spacing — 9 tokens (−1.28px → +0.35px)
Live
Tight (−1.28px)
Display hero — most compressed
Multiplayer
Wide (−0.32px)
Section headings
REALTIME
ls-9 (+0.35px)
Labels, caps — widest positive
Spacing
Spacing Scale
35 tokens — 1px → 280px
Borders
Border Radii
r9 (~∞ Pill)
1.67772e+07px
--radius-sm and --radius-full are asymmetric shorthands — unique in the series — used for left-flush and right-flush tab shapes. --radius-r9 is the 4th appearance of the ~16.7M px mega-pill across the 67-brand series.
Shadows / Elevation
Shadow Tokens
6 tokens — inset rings to 6-layer depth blur
md
×21
rgb(39,38,38) 0 0 0 1px — near-invisible 1px ring border substitute
xl
×3
Inset light ring srgb(0.925…) — subtle inner stroke for input highlight
shadow-5
×1
Popover: 8px 12px blur + 1px edge — floating panels
shadow-6
×1
6-layer natural blur (2.77px → 100px) — deep modal elevation
Z-Index
| Layer | Value | Usage |
|---|
| z-1 | 10 | Navigation, sticky headers — starts at 10, not 1 or −10 (unique in series) |
| z-2 | 20 | Dropdowns, tooltips, popovers |
| z-3 | 30 | Overlays, drawers |
| z-4 | 40 | Modals, dialogs |
| z-5 | 999,999 | Absolute top — matches --z-index-higher in :root custom properties |
The :root also defines: --z-index-high: 99999, --z-index-higher: 999999, --z-index-highest: 10000000.
Breakpoints
📐
No breakpoint tokens detected
No --breakpoint-* CSS custom properties were found. Responsive behavior is handled through other means — likely Tailwind breakpoints or component-level media queries not captured in the token extraction.
Opacity
Opacity Tokens
4 tokens — 20%, 30%, 40%, 50%
4 semantic tokens only. The system relies primarily on rgba alpha channels in the rich product semantic color families rather than global opacity tokens.
Accessibility — Contrast Ratios
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
⚠️ Mid-gray text tokens (#918D8D, #A3A3A3) fail on white and cyan — calibrated for near-black surfaces only.
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| Dark Gray (#111111) | White (#FFF) | 18.88:1 | AAA |
| Dark Gray (#111111) | Cyan (#6CEFCE) | 13.38:1 | AAA |
| Dark Gray (#111111) | Blue (#0090FF) | 5.78:1 | AA |
| Light Gray (#EDECEE) | Dark Gray 5 (#100F0F) | 16.25:1 | AAA |
| Light Gray (#EDECEE) | Black (#000) | 17.83:1 | AAA |
| Light Gray (#EDECEE) | White (#FFF) | 1.18:1 | Fail |
| Mid Gray 2 (#A3A3A3) | Black (#000) | 8.33:1 | AAA |
| Mid Gray 2 (#A3A3A3) | Dark Gray 5 (#100F0F) | 7.59:1 | AAA |
| Mid Gray 2 (#A3A3A3) | White (#FFF) | 2.52:1 | Fail |
| Light Purple (#BF7AF0) | Black (#000) | 7.26:1 | AAA |
| Light Purple (#BF7AF0) | Dark Gray 5 (#100F0F) | 6.61:1 | AA |
| Mid Gray (#918D8D) | Black (#000) | 6.4:1 | AA |
| Mid Gray (#918D8D) | Dark Gray 5 (#100F0F) | 5.83:1 | AA |
| Mid Gray (#918D8D) | White (#FFF) | 3.28:1 | AA Large |
| Dark Gray (#111111) | Dark Gray 5 (#100F0F) | 1.01:1 | Fail |
CSS Variables Reference
White--color-white#FFFFFF
Black--color-black#000000
Cyan (Brand)--color-cyan#6CEFCE
Surface (near black)--color-dark-gray-5#100F0F
Dark Gray 3 (Shadow/Border)--color-dark-gray-3#272626
Dark Gray 6--color-dark-gray-6#21222B
Light Purple 3--color-light-purple-3#A569FF
White 2 (Fill)--color-white-2rgba(247,247,248,.12)
Black 2--color-black-2rgba(3,4,4,.36)
Light Gray--color-light-gray#EDECEE
Mid Gray--color-mid-gray#918D8D
Mid Gray 2--color-mid-gray-2#A3A3A3
Light Purple--color-light-purple#BF7AF0
Dark Gray--color-dark-gray#111111
Light Blue--color-light-blue#9F8DFC
Light Gray 2--color-light-gray-2#B7B4B4
Dark Gray 4--color-dark-gray-4#635F5F
Blue 2--color-blue-2#34A7FF
Cyan 3--color-cyan-3#00C1D6
Suisse--font-family-basesuisse
JetBrains Mono--font-family-2JetBrains Mono
Apple Color Emoji--font-family-3Apple Color Emoji
Regular--font-weight-regular400
Medium--font-weight-medium500
2xs (9.8px)--font-size-2xs9.8px
xl (14px)--font-size-xl14px
2xl (16px UI base)--font-size-2xl16px
3xl (20px)--font-size-3xl20px
6xl (36px)--font-size-6xl36px
64px (Display)--font-size-64px64px
Tight (−1.28px)--letter-spacing-tight−1.28px
Wide (−0.32px)--letter-spacing-wide−0.32px
ls-9 (+0.35px)--letter-spacing-ls-9+0.35px
Instant--duration-instant75ms
Fast--duration-fast100ms
Normal--duration-normal150ms
Slow--duration-slow200ms
Slower (×484)--duration-slower300ms
Duration 6--duration-6500ms
Duration 7--duration-71s
Linear--easing-linearlinear
opacity-20--opacity-2020%
opacity-30--opacity-3030%
opacity-40--opacity-4040%
opacity-50--opacity-5050%
Navigation--z-110 (starts at 10)
Popovers--z-220
Overlays--z-330
Dialogs--z-440
Absolute Top--z-5999,999
No breakpoints defined
Design System Preview · Liveblocks (Dark) · Generated 19/04/2026 · 40 color tokens · 14 font-size · 3 font-family · 2 font-weight · 18 line-height · 9 letter-spacing · 35 spacing · 9 radius · 1 border-width · 6 shadow · 7 duration · 1 easing · 5 z-index · 0 breakpoints · 4 opacity