№ confluent-io--pricing

Confluent — Pricing

Deep indigo expanse, crisp sans-serif, and a structured, data-driven clarity.

Feature Stackminimalism brutalism swiss developer toolslight

The design prioritizes clarity and functionality with a stark, almost clinical aesthetic. Typography is clean and legible, and the layout is structured to guide the user through the platform's capabilities. The overall mood is confident and authoritative. · saas landing page, data streaming, confluent design, developer tools, technical website, ai platform, modern interface, minimalist design

Confluent — Pricing - mobile — Mobile · 375

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 · cool

SwatchHexOKLCHSuggested roleCopy

Hex#0756fb
OKLCHoklch(53.2% 0.253 263)
RoleDominant
find sites →
Hex#042c86
OKLCHoklch(33.8% 0.156 263)
RoleSurface
find sites →
Hex#68bcf4
OKLCHoklch(76.4% 0.115 240)
RoleInk
find sites →
Hex#556fa1
OKLCHoklch(54.3% 0.085 263)
RoleAccent
find sites →
Hex#9badc5
OKLCHoklch(74.2% 0.040 256)
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	Sample
h1	Poppins	56px	600	1.35	Aa Bb Cc
h2	Poppins	40px	600	1.35	Aa Bb Cc
h3	Poppins	28px	600	1.35	Aa Bb Cc
body	Poppins	16px	400	1.4	Aa Bb Cc
button	Poppins	14px	500	1	Aa Bb Cc

Spacing scale

16px

24px

40px

55px

80px

85px

96px

120px

Radius scale

0px

6px

8px

34px

Container

Max content width 1170px

Export

:root {
  --color-dominant: #0756fb;
  --color-surface: #042c86;
  --color-ink: #68bcf4;
  --color-accent: #556fa1;
  --color-detail: #9badc5;
}

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 Confluent — Pricing.
Reference design system (extracted from the live site):
- Palette: #0756fb, #042c86, #68bcf4, #556fa1, #9badc5
- Typefaces: Poppins
- 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/confluent-io--pricing

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Poppins

56px

600

1.35

Aa Bb Cc

Poppins

40px

600

1.35

Aa Bb Cc

Poppins

28px

600

1.35

Aa Bb Cc

body

Poppins

16px

400

1.4

Aa Bb Cc

button

Poppins

14px

500

Aa Bb Cc

Build a landing page in the visual style of Confluent — Pricing. Reference design system (extracted from the live site): - Palette: #0756fb, #042c86, #68bcf4, #556fa1, #9badc5 - Typefaces: Poppins - 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/confluent-io--pricing