Realtime collaboration infrastructure as chromatic theatre — a pure #000000 stage, Suisse Intl premium grotesque, multi-accent rotation (purple #bf7af0, mint #6cefce, blue #0090ff, pink #f76e99) held together by compositional discipline. A Berghain flyer for developer infra.
This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Liveblocks’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Liveblocks's design language is chromatic theatre on a disciplined black stage. A pure #000000 ground anchors the brand; Suisse Intl carries every typographic moment; JetBrains Mono renders code with editorial weight; and a rotating multi-accent palette (purple/mint/blue/pink) gives each section its own chromatic identity. The brand works because the typographic discipline never wavers — the colour can be theatrical only because nothing else is.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (pure #000000 dominant ground, #ffffff primary text at extreme contrast, #918d8d muted grey for secondary text, #fdfcfc near-white hairline borders at low opacity, multi-accent rotation #bf7af0 purple / #6cefce mint / #0090ff blue / #f76e99 pink used one-per-section with compositional discipline, #635f5f background secondary, #b7b4b4 tertiary text), Suisse Intl as sole sans family in weights 400/500 at sizes 14/16/20px (with letter-spacing 0.056-0.08px on body), JetBrains Mono at 14px for inline code, tight 4px spacing scale 2/4/6/8/10/12/14/16/20/24, container ladder 320/384/448/576/672/768 (multiple tight reading frames stacked vertically), Tailwind-standard 640/768/1024/1280/1536 breakpoints, Framer Motion + 12 catalogued gradients used as compositional texture, and motion easings cubic-bezier(0, 0, 0.2, 1) + cubic-bezier(0.4, 0, 0.2, 1) at 100-300ms. Treat accents as a rotation system — one accent per section, never two competing in the same viewport. Apply the language, not the source brand's copy.
Layout
Vertically stacked tight content frames (320-768px) inside a wider black canvas; each section has its own chromatic mood and accent rotation.
Berghain flyer for developer infrastructure — black stage, multi-accent rotation, premium grotesque typography.
Grid strength
Implicit editorial grid — 4px base, but rhythm comes from typography ladder, accent rotation, and gradient compositional zones.
Pure #000000 ground; #ffffff at extreme contrast; rotating multi-accent palette (purple/mint/blue/pink) used one-per-section.
Mode strategyDark-only — the multi-accent rotation depends on the black ground for chromatic intensity.
#000000 dominant ground (~391 surface refs)
#ffffff primary text and high-contrast surfaces (~1,694 refs)
#918d8d muted grey for secondary text
#fdfcfc near-white hairline borders at low opacity
#bf7af0 purple accent (~104 refs)
#6cefce mint accent (~17 refs)
#0090ff blue accent (~15 refs)
#f76e99 pink accent (~4 refs)
#635f5f background secondary surface
#b7b4b4 tertiary text
Gradients (paste-ready)
12 gradients catalogued — used as compositional texture, accent-tinted atmospheric depth, never decorative chromatic surfaces. Each gradient carries a section's chromatic mood.
Suisse Intl is the sole sans family — weights 400 and 500 only
JetBrains Mono at 14px for inline code and metadata
Display 32-72px in Suisse 500; body 14-16px in 400; metadata 12-14px
Letter-spacing 0.056-0.08px on body text (deliberately tight humanist)
Line-height 1.5 body, 1.05-1.1 display
Weight ladder binary: 400 body, 500 emphasis and display
4px base unit, tight scale 2/4/6/8/10/12/14/16/20/24
Section vertical rhythm: 96-160px between major sections
Card padding: 24-32px
CTA padding: 12-14px vertical, 20-24px horizontal
Multi-column container nests use 16-24px gutters
Surface styleFlat-with-low-opacity-hairline. Cards sit on slightly elevated dark surfaces (#0a0a0a or #100f10) with 1px #fdfcfc at 8% alpha. Compositional gradient zones provide implicit depth.
0 drop shadow on marketing chrome
1px hairline border on cards (#fdfcfc at 6-8% alpha)
Atmospheric accent-tinted gradient zones provide implicit depth
Hover bumps border opacity slightly, no lift
Techniques
Chromatic gradient zone
Radial gradient using one accent at 8-12% opacity, positioned absolutely behind a section's hero element.
HoverCTA background shift (white → section accent) on 100ms decelerating ease, Card hairline opacity bump on hover, Link colour shift to current section accent
≥1024: full container ladder 320/384/448/576/672/768, hero display up to 72px
White on black passes WCAG AAA (21:1)
Purple #bf7af0 on black passes AAA (8.4:1)
Mint #6cefce on black passes AAA (10.6:1)
Blue #0090ff on black passes AA at 14px+ (4.5:1)
Pink #f76e99 on black passes AA at 14px+ (5.4:1)
Focus visible state always present
Respect prefers-reduced-motion
Next.js (assumed)Suisse Intl Medium + Regular preloaded as woff2JetBrains Mono for inline codeFramer Motion for section reveals + accent rotation choreography
Typography + multi-accent rotation + compositional gradient zones are the entire visual identity. No 3D, illustrations used sparingly as accent illustrations.
Suisse Intl preloaded weights 400 + 500
JetBrains Mono as webfont (subset for ASCII + common operators)
12 gradients composed as CSS, no canvas/WebGL
Framer Motion scoped to section reveals + accent rotation transitions
Use one accent per section — never two competing in the same viewport
Commit to Suisse Intl (or licensed grotesque equivalent) at 400/500
Treat gradients as compositional texture, not decoration
Apply 0.056-0.08px letter-spacing to body text for the brand's signature tightness
Don't paint surfaces in any accent — colour belongs on text, underlines, and gradient overlays
Don't mix two accents in the same viewport without compositional reason
Don't introduce a humanist sans alongside Suisse Intl
Don't loop gradient animations — section reveals are one-shot
Dark-only — no light variant
Type lock: Suisse Intl + JetBrains Mono
Multi-accent rotation rule: one per section
Background dominant: #000000 across more than 60% of surface
Font-family grep: Suisse Intl present, no Inter or humanist sans alternatives
Accent count per viewport: maximum one accent dominant in any 100vh window
Body letter-spacing: 0.056-0.08px applied
Gradient count per page: 8-12 compositional zones, never decorative
Design tokens
Observed token system
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 10 nodes across 5 levels, shallow to deep by color.
body3
Header
Main2
div1
Section
Section (×7)
Footer1
div1
div1
Nav
Accessibility
Contrast matrix
174 combinations - 84 pass AA - 52 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
AaThe quick brown fox20.51
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FDFCFC
APCA Lc
+104
Use
foreground on background
AaThe quick brown fox20.51
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FDFCFC
bg
#000000
APCA Lc
-106
Use
background on foreground
AaThe quick brown fox20.25
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#F9FBFD
APCA Lc
+103
Use
foreground on background
AaThe quick brown fox20.25
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#F9FBFD
bg
#000000
APCA Lc
-105
Use
background on foreground
AaThe quick brown fox18.04
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#141716
APCA Lc
-107
Use
background on foreground
AaThe quick brown fox18.04
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#141716
bg
#FFFFFF
APCA Lc
+105
Use
foreground on background
AaThe quick brown fox18.01
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#F6ECE2
APCA Lc
+96
Use
foreground on background
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
