Qdrant Tech
Feature Stack
Deep charcoal expanse, crisp geometric sans-serif, cool, precise digital architecture.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | NB International Pro | 70px | 500 | 1 | -2.816px | Aa Bb Cc |
| h2 | NB International Pro | 34px | 500 | 1.22 | -1.37626px | Aa Bb Cc |
| h3 | NB International Pro | 24px | 500 | 1.27 | -0.966505px | Aa Bb Cc |
| body | NB International Pro | 17px | 400 | 1.5 | 0 | Aa Bb Cc |
:root {
--color-dominant: #4787f5;
--color-surface: #2454ac;
--color-ink: #9dc1f7;
--color-accent: #78797b;
--color-detail: #bcbbbc;
}
/* CSS variables exposed by source */
:root {
--font-family-body: "NB International Pro", system-ui, sans-serif;
--text-always-white: 255 255 255;
--text-dt-body-lg--font-weight: 400;
--text-accent-primary: 49 124 255;
--space-m: clamp(1.5rem, 1.4464rem + .2679vi, 1.875rem);
--color-dt-text-light: #e7e7e7;
--font-body: "NB International Pro", system-ui, sans-serif;
--color-slide-card-bg: #e2e2e2;
--text-dt-label--letter-spacing: .36px;
--text-base--line-height: 1.5;
--color-dt-text-secondary: rgb(25 25 25 / .56);
--color-text-secondary: #1919198f;
--text-dt-caption--letter-spacing: 0;
--font-mono: "Geist Mono", ui-monospace, monospace;
--color-dt-tint: rgb(0 0 0 / .04);
--bg-accent-primary: 49 124 255;
--color-white: #fcfcfc;
--text-dt-display-sm--letter-spacing: -1.92px;
--color-accent: #20f;
--text-dt-body--letter-spacing: 0;
--radius-sm: .25rem;
--color-gray-dark: #141414;
--color-dt-text-muted: #0006;
--font-weight-bold: 700;
--color-gray-100: oklch(96.7% .003 264.542);
--text-dt-display--line-height: 1;
--bg-destructive: 245 59 58;
--color-dt-text-disabled: rgb(25 25 25 / .4);
--text-dt-caption: .875rem;
--text-xs--line-height: calc(1 / .75);
--shadow-shadow-lg: 0 0 0 / .1;
--radius-2xl: 1rem;
--radius-md: .375rem;
--shadow-L4-wax: 0px 25px 50px -12px rgb(0 0 0 / .25);
--color-button: #191919;
--radius-lg: .5rem;
--text-dt-body-lg: 1rem;
--space-7xl: clamp(9rem, 8.6786rem + 1.6071vi, 11.25rem);
--shadow-L3: 0px 10px 15px -3px rgb(0 0 0 / .1), 0px 4px 6px -2px rgb(0 0 0 / .05);
--text-dt-display-sm--font-weight: 400;
--text-blue: 51 125 244;
--color-dt-text-inverse: rgb(255 255 255);
--color-dt-green: rgb(0 165 88);
--text-secondary: 25 25 25 / .56;
--text-red: 245 59 58;
--text-dt-display-sm--line-height: 1;
--space-3xs-2xs: clamp(.25rem, .1964rem + .2679vi, .625rem);
--color-dt-tint-soft: rgb(0 0 0 / .06);
--text-purple: 149 108 222;
--text-green: 0 165 88;
--color-dt-orange: rgb(245 142 58);
--space-7xl-8xl: clamp(9rem, 8.5rem + 2.5vi, 12.5rem);
--text-dt-tag--letter-spacing: .36px;
--space-5xl-6xl: clamp(7rem, 6.5714rem + 2.1429vi, 10rem);
--text-orange: 245 142 58;
--text-2xl--line-height: calc(2 / 1.5);
--border-secondary-always-black: 0 0 0 / .08;
--spacing: .25rem;
--bg-accent-neutral: 54 54 54;
--color-dt-surface: #000;
}Drop-in prompt
Build a landing page in the visual style of Devin.
Reference design system (extracted from the live site):
- Palette: #4787f5, #2454ac, #9dc1f7, #78797b, #bcbbbc
- Typefaces: NB International Pro
- 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/devin-ai--ja-enterprise