№ qdrant-tech

Qdrant Tech

Deep indigo expanse, stark sans-serif geometry, cool, precise, almost lunar.

Feature Stackdark mode minimalism futurist monochrome brutalism developer tools aidark

The page uses a dark, high-contrast palette with a prominent hero image and clear typography. The layout is structured with distinct sections, utilizing a bento-grid to showcase key features and information in a visually organized manner. The overall feel is precise and functional. · ai vector search, dark saas, technical landing page, developer tools, data science, qdrant, vector database

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: cool · muted · high-contrast · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#c60e40
OKLCHoklch(52.9% 0.206 16)
RoleDominant
find sites →
Hex#193473
OKLCHoklch(34.4% 0.114 264)
RoleSurface
find sites →
Hex#da94ac
OKLCHoklch(74.3% 0.089 357)
RoleInk
find sites →
Hex#4a68ac
OKLCHoklch(52.7% 0.113 265)
RoleAccent
find sites →
Hex#c2aeb9
OKLCHoklch(77.1% 0.027 343)
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	Mona Sans	64px	600	1.1	-1.5px	Aa Bb Cc
h2	Mona Sans	48px	600	1.1	-0.5px	Aa Bb Cc
h3	Mona Sans	20px	600	1.5	-0.2px	Aa Bb Cc
body	Mona Sans	16px	350	1.5	0	Aa Bb Cc
button	Mona Sans	16px	400	1.5	0	Aa Bb Cc

Spacing scale

4px

8px

16px

24px

64px

80px

120px

Radius scale

0px

8px

16px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #c60e40;
  --color-surface: #193473;
  --color-ink: #da94ac;
  --color-accent: #4a68ac;
  --color-detail: #c2aeb9;
}

/* CSS variables exposed by source */
:root {
  --bs-orange: #fd7e14;
  --bs-link-hover-color-rgb: 220, 36, 76;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-success: #008a53;
  --bs-danger-text-emphasis: #58151c;
  --bs-border-style: solid;
  --bs-warning-rgb: 224, 112, 13;
  --bs-info-text-emphasis: #055160;
  --bs-body-font-weight: 400;
  --bs-code-color: #d63384;
  --bs-border-radius-2xl: 2rem;
  --bs-primary: #dc244c;
  --bs-body-line-height: 1.5;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-cyan: #0dcaf0;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-green: #198754;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-link-hover-color: #dc244c;
  --bs-purple: #6f42c1;
  --bs-dark-text-emphasis: #495057;
  --bs-info-rgb: 137, 169, 255;
  --bs-breakpoint-xs: 375px;
  --bs-border-radius-sm: 0.25rem;
  --bs-primary-text-emphasis: #052c65;
  --bs-gray-400: #8f98b2;
  --bs-pink: #d63384;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-blue-rgb: 47, 111, 240;
  --bs-gray-100: #f0f3fa;
  --bs-link-decoration: none;
  --bs-border-radius: 0.375rem;
  --bs-white: #fff;
  --bs-danger: #e02828;
  --bs-gray-600: #3d4866;
  --bs-body-bg-rgb: 240, 243, 250;
  --bs-highlight-color: #212529;
  --bs-dark-rgb: 22, 30, 51;
  --bs-success-text-emphasis: #0a3622;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-gray-500: #576280;
  --bs-border-radius-xxl: 2rem;
  --bs-teal: #038585;
  --bs-mid-gray-rgb: 225, 229, 240;
  --bs-indigo: #6610f2;
  --bs-dark: #161e33;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-link-color-rgb: 220, 36, 76;
  --bs-mid-gray: #e1e5f0;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xxl: 1900px;
  --bs-gray-800: #161e33;
  --bs-light-text-emphasis: #495057;
  --bs-violet-rgb: 133, 71, 255;
  --bs-border-radius-lg: 0.5rem;
  --bs-breakpoint-xl: 1200px;
  --bs-primary-rgb: 220, 36, 76;
  --bs-info-border-subtle: #9eeaf9;
}

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 Qdrant Tech.
Reference design system (extracted from the live site):
- Palette: #c60e40, #193473, #da94ac, #4a68ac, #c2aeb9
- Typefaces: Mona Sans
- 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/qdrant-tech

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Mona Sans

64px

600

1.1

-1.5px

Aa Bb Cc

Mona Sans

48px

600

1.1

-0.5px

Aa Bb Cc

Mona Sans

20px

600

1.5

-0.2px

Aa Bb Cc

body

Mona Sans

16px

350

1.5

Aa Bb Cc

button

Mona Sans

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #c60e40; --color-surface: #193473; --color-ink: #da94ac; --color-accent: #4a68ac; --color-detail: #c2aeb9; } /* CSS variables exposed by source */ :root { --bs-orange: #fd7e14; --bs-link-hover-color-rgb: 220, 36, 76; --bs-warning-bg-subtle: #fff3cd; --bs-success: #008a53; --bs-danger-text-emphasis: #58151c; --bs-border-style: solid; --bs-warning-rgb: 224, 112, 13; --bs-info-text-emphasis: #055160; --bs-body-font-weight: 400; --bs-code-color: #d63384; --bs-border-radius-2xl: 2rem; --bs-primary: #dc244c; --bs-body-line-height: 1.5; --bs-light-bg-subtle: #fcfcfd; --bs-cyan: #0dcaf0; --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --bs-green: #198754; --bs-primary-border-subtle: #9ec5fe; --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); --bs-link-hover-color: #dc244c; --bs-purple: #6f42c1; --bs-dark-text-emphasis: #495057; --bs-info-rgb: 137, 169, 255; --bs-breakpoint-xs: 375px; --bs-border-radius-sm: 0.25rem; --bs-primary-text-emphasis: #052c65; --bs-gray-400: #8f98b2; --bs-pink: #d63384; --bs-primary-bg-subtle: #cfe2ff; --bs-blue-rgb: 47, 111, 240; --bs-gray-100: #f0f3fa; --bs-link-decoration: none; --bs-border-radius: 0.375rem; --bs-white: #fff; --bs-danger: #e02828; --bs-gray-600: #3d4866; --bs-body-bg-rgb: 240, 243, 250; --bs-highlight-color: #212529; --bs-dark-rgb: 22, 30, 51; --bs-success-text-emphasis: #0a3622; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-gray-500: #576280; --bs-border-radius-xxl: 2rem; --bs-teal: #038585; --bs-mid-gray-rgb: 225, 229, 240; --bs-indigo: #6610f2; --bs-dark: #161e33; --bs-success-bg-subtle: #d1e7dd; --bs-link-color-rgb: 220, 36, 76; --bs-mid-gray: #e1e5f0; --bs-secondary-bg-subtle: #e2e3e5; --bs-breakpoint-lg: 992px; --bs-breakpoint-xxl: 1900px; --bs-gray-800: #161e33; --bs-light-text-emphasis: #495057; --bs-violet-rgb: 133, 71, 255; --bs-border-radius-lg: 0.5rem; --bs-breakpoint-xl: 1200px; --bs-primary-rgb: 220, 36, 76; --bs-info-border-subtle: #9eeaf9; }

Build a landing page in the visual style of Qdrant Tech. Reference design system (extracted from the live site): - Palette: #c60e40, #193473, #da94ac, #4a68ac, #c2aeb9 - Typefaces: Mona Sans - 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/qdrant-tech