Confluent — About
Feature Stack
Loading
Uploadcare
Cool, spacious digital architecture: crisp sans-serif, muted blues and warm grays.
Click any value to copy. Roles are suggestions, not gospel.
- #3c76f8oklch(60.1% 0.204 263)Dominant
- #563427oklch(36.3% 0.054 42)Surface
- #f4d157oklch(86.8% 0.144 93)Ink
- #938b87oklch(64.3% 0.011 49)Accent
- #abb9cdoklch(78.1% 0.032 257)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | InterDisplay | 50px | 700 | 1.15 | -1.25px | Aa Bb Cc |
| h2 | InterDisplay | 13px | 700 | 1.2 | 0.9px | Aa Bb Cc |
| h3 | InterDisplay | 17px | 700 | 1.2 | 0 | Aa Bb Cc |
| body | Inter | 18px | 400 | 1.78 | 0 | Aa Bb Cc |
| caption | Inter | 13px | 500 | 2.1 | 1.3px | Aa Bb Cc |
| button | Inter | 13px | 400 | 1.4 | 0 | Aa Bb Cc |
:root {
--color-dominant: #3c76f8;
--color-surface: #563427;
--color-ink: #f4d157;
--color-accent: #938b87;
--color-detail: #abb9cd;
}
/* CSS variables exposed by source */
:root {
--text-padding-bottom: 32px;
--text-padding-left: 40px;
--color-ecru-white: #faf8f3;
--color-grey: #7b7b7b;
--color-darken-grey: #363636;
--color-light-yellow: #fef33c;
--font-sans: 'Inter',system-ui,sans-serif;
--font-headings: 'InterDisplay','Inter',system-ui,sans-serif;
--color-light-blue: #52b0ff;
--color-dark-purple: #9f60bc;
--color-lighten: #f6f6f6;
--color-lighten-grey: #f0f0f0;
--color-dark-yellow: #ffc601;
--color-light-grey: #e7e7e7;
--color-blue: #238de6;
--color-purple: #b375d4;
--font-mono: 'CommitMono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
--color-dark: #191919;
--color-yellow: #ffdf76;
--color-dark-blue: #187cce;
--color-light-purple: #d589ff;
--color-darker-grey: #40464b;
--color-light: #fff;
--font-size: 18px;
--color-dark-grey: #404040;
--button-outline-color: #52b0ff;
--button-color: #191919;
--button-disabled-back-color: #e7e7e7;
--line-height-headings: 1.15em;
--messages-color-blue: #417f9a;
--messages-background-yellow-hover: #fff6c1;
--messages-background-green-hover: #e3fcd2;
--button-active-back-color: #f0f0f0;
--messages-background-blue-hover: #caf1f8;
--line-height: 28px;
--messages-color-red: #9c3a3a;
--messages-background-red-hover: #ffdacf;
--messages-background-yellow: #fff9d5;
--max-z-index: 2147483647;
--spara-nav-y-offset: 0px;
--messages-color-yellow: #9b6e56;
--spara-smartbar-height: 300px;
--focus-color: rgba(82,176,255,0.6);
--spara-vv-height: 900px;
--messages-background-green: #f0fce8;
--button-disabled-color: #c5c4be;
--button-hover-back-color: #f6f6f6;
--content-max-width: 875px;
--messages-background-blue: #e6f8fb;
--spara-vv-offset-top: 0px;
--button-back-color: #e7e7e7;
--messages-color-green: #68904c;
--messages-background-red: #ffebe5;
--navbar-height: 58px;
--code-background-color: #f6f6f6;
--uploadcare-blocks-window-height: 900px;
--hover-transition: background-color 150ms ease,color 150ms ease,border-color 150ms ease,opacity 150ms ease;
--animation-time: 150ms;
}Drop-in prompt
Build a landing page in the visual style of Uploadcare.
Reference design system (extracted from the live site):
- Palette: #3c76f8, #563427, #f4d157, #938b87, #abb9cd
- Typefaces: InterDisplay, Inter
- 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/uploadcare-com
