№ liveblocks-io

Liveblocks

Deep charcoal expanse, stark sans-serif clarity, sharp geometric precision.

Feature Stackminimalism dark mode monochrome brutalism swiss developer toolsdark

The page prioritizes a clean, dark aesthetic with a strong typographic hierarchy. The hero section uses a bold, impactful headline, while the left sidebar provides persistent navigation. The overall density is moderate, allowing for clear visual separation of elements. · dark saas, developer tools, ai platform, realtime apps, infrastructure, technical design, minimalist saas, code platform, live collaboration

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#dc346c
OKLCHoklch(59.9% 0.205 6)
RoleDominant
find sites →
Hex#780d23
OKLCHoklch(37.1% 0.138 18)
RoleSurface
find sites →
Hex#f2b7c8
OKLCHoklch(83.8% 0.071 360)
RoleInk
find sites →
Hex#946464
OKLCHoklch(55.4% 0.063 19)
RoleAccent
find sites →
Hex#cfb2c3
OKLCHoklch(79.4% 0.040 342)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	suisse	64px	500	1.1	-1.28px	Aa Bb Cc
h2	suisse	52px	500	1.1	-1.04px	Aa Bb Cc
h3	suisse	32px	500	1.2	-0.32px	Aa Bb Cc
body	suisse	16px	400	1.5	0	Aa Bb Cc
caption	suisse	14px	500	1.43	0	Aa Bb Cc
button	suisse	14px	500	1.43	0	Aa Bb Cc

Spacing scale

24px

32px

64px

80px

196px

Radius scale

0px

4px

6px

8px

12px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #dc346c;
  --color-surface: #780d23;
  --color-ink: #f2b7c8;
  --color-accent: #946464;
  --color-detail: #cfb2c3;
}

/* CSS variables exposed by source */
:root {
  --color-marketing-surface-product-notifications: #6cefc3;
  --text-base--line-height: calc(1.5 / 1);
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", "Roboto Mono", Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
  --color-marketing-surface-product-multiplayer: #6c79ef;
  --radius-sm: .25rem;
  --font-weight-bold: 700;
  --color-marketing-surface-accent-blue-bold: #88bef2;
  --color-marketing-surface-accent-pink: #ce6cef;
  --text-xs--line-height: calc(1 / .75);
  --color-marketing-subtlest: #635f5f;
  --color-marketing-surface-accent-yellow: #efd26c;
  --radius-2xl: 1rem;
  --radius-md: .375rem;
  --radius-lg: .5rem;
  --text-xl: 1.25rem;
  --color-marketing-surface-accent-yellow-bold: #f2db88;
  --color-marketing-subtle: #b7b4b4;
  --text-2xl--line-height: calc(2 / 1.5);
  --spacing: .25rem;
  --color-marketing-accent-blue: #6cb0ef;
  --color-marketing-surface-accent-green: #6cefce;
  --font-suisse: "suisse", "suisse Fallback";
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-sm: .875rem;
  --spacing-inner-gutter: calc(.25rem * 7);
  --font-mono-fallback: "Roboto Mono", Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
  --color-marketing-surface-accent-pink-bold: #d788f2;
  --color-marketing-surface-brand-subtle: #7a51ec26;
  --color-marketing-surface-base-inverse-subtler: #918d8d;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-2xl: 1.5rem;
  --color-marketing-accent-green: #6cefce;
  --text-lg: 1.125rem;
  --color-marketing-surface-brand: #8f6cef;
  --color-marketing-surface-product-comments: #efad6c;
  --text-5xl--line-height: 1;
  --text-lg--line-height: calc(1.75 / 1.125);
  --color-marketing-surface-raised: #100f0f;
  --font-jetbrains-mono: "JetBrains Mono", "JetBrains Mono Fallback";
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --color-marketing-accent-yellow: #efd26c;
  --color-marketing-surface-product-ai-copilots: #e42162;
  --color-marketing-accent-pink: #ce6cef;
  --color-marketing-surface-accent-blue: #6cb0ef;
  --text-6xl: 3.75rem;
  --font-weight-light: 300;
  --color-marketing-brand: #8f6cef;
  --font-inter: "inter", "inter Fallback";
  --color-marketing-surface-faded-bolder: #fdfcfc2b;
  --color-marketing-surface-accent-green-bold: #88f2d7;
  --color-marketing-surface-base-inverse-subtle: #b7b4b4;
  --font-product: "inter", "inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --spacing-outer-gutter: calc(.25rem * 10);
  --color-marketing-divider-bold-opaque: #272626;
  --color-marketing-surface-base: #000;
  --radius-3xl: 1.5rem;
  --font-weight-semibold: 600;
  --spacing-gutter: calc(.25rem * 7);
  --font-weight-extrabold: 800;
  --text-4xl: 2.25rem;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Liveblocks.
Reference design system (extracted from the live site):
- Palette: #dc346c, #780d23, #f2b7c8, #946464, #cfb2c3
- Typefaces: suisse
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/liveblocks-io

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

suisse

64px

500

1.1

-1.28px

Aa Bb Cc

suisse

52px

500

1.1

-1.04px

Aa Bb Cc

suisse

32px

500

1.2

-0.32px

Aa Bb Cc

body

suisse

16px

400

1.5

Aa Bb Cc

caption

suisse

14px

500

1.43

Aa Bb Cc

button

suisse

14px

500

1.43

Aa Bb Cc

:root { --color-dominant: #dc346c; --color-surface: #780d23; --color-ink: #f2b7c8; --color-accent: #946464; --color-detail: #cfb2c3; } /* CSS variables exposed by source */ :root { --color-marketing-surface-product-notifications: #6cefc3; --text-base--line-height: calc(1.5 / 1); --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", "Roboto Mono", Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; --color-marketing-surface-product-multiplayer: #6c79ef; --radius-sm: .25rem; --font-weight-bold: 700; --color-marketing-surface-accent-blue-bold: #88bef2; --color-marketing-surface-accent-pink: #ce6cef; --text-xs--line-height: calc(1 / .75); --color-marketing-subtlest: #635f5f; --color-marketing-surface-accent-yellow: #efd26c; --radius-2xl: 1rem; --radius-md: .375rem; --radius-lg: .5rem; --text-xl: 1.25rem; --color-marketing-surface-accent-yellow-bold: #f2db88; --color-marketing-subtle: #b7b4b4; --text-2xl--line-height: calc(2 / 1.5); --spacing: .25rem; --color-marketing-accent-blue: #6cb0ef; --color-marketing-surface-accent-green: #6cefce; --font-suisse: "suisse", "suisse Fallback"; --text-xl--line-height: calc(1.75 / 1.25); --text-sm: .875rem; --spacing-inner-gutter: calc(.25rem * 7); --font-mono-fallback: "Roboto Mono", Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; --color-marketing-surface-accent-pink-bold: #d788f2; --color-marketing-surface-brand-subtle: #7a51ec26; --color-marketing-surface-base-inverse-subtler: #918d8d; --text-4xl--line-height: calc(2.5 / 2.25); --text-2xl: 1.5rem; --color-marketing-accent-green: #6cefce; --text-lg: 1.125rem; --color-marketing-surface-brand: #8f6cef; --color-marketing-surface-product-comments: #efad6c; --text-5xl--line-height: 1; --text-lg--line-height: calc(1.75 / 1.125); --color-marketing-surface-raised: #100f0f; --font-jetbrains-mono: "JetBrains Mono", "JetBrains Mono Fallback"; --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --color-marketing-accent-yellow: #efd26c; --color-marketing-surface-product-ai-copilots: #e42162; --color-marketing-accent-pink: #ce6cef; --color-marketing-surface-accent-blue: #6cb0ef; --text-6xl: 3.75rem; --font-weight-light: 300; --color-marketing-brand: #8f6cef; --font-inter: "inter", "inter Fallback"; --color-marketing-surface-faded-bolder: #fdfcfc2b; --color-marketing-surface-accent-green-bold: #88f2d7; --color-marketing-surface-base-inverse-subtle: #b7b4b4; --font-product: "inter", "inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --spacing-outer-gutter: calc(.25rem * 10); --color-marketing-divider-bold-opaque: #272626; --color-marketing-surface-base: #000; --radius-3xl: 1.5rem; --font-weight-semibold: 600; --spacing-gutter: calc(.25rem * 7); --font-weight-extrabold: 800; --text-4xl: 2.25rem; }

Build a landing page in the visual style of Liveblocks. Reference design system (extracted from the live site): - Palette: #dc346c, #780d23, #f2b7c8, #946464, #cfb2c3 - Typefaces: suisse - Macrostructure: Feature Stack Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/liveblocks-io