Deel
Split Studio
Loading
Mercury — About
Cool, glass-toned depth, clean sans-serif geometry floating in expansive, hazy space.
Click any value to copy. Roles are suggestions, not gospel.
- #3986c5oklch(60.1% 0.122 247)Dominant
- #0c1c29oklch(21.9% 0.034 245)Surface
- #dcbeaeoklch(82.3% 0.041 50)Ink
- #718095oklch(59.5% 0.037 257)Accent
- #cdb2aaoklch(78.5% 0.033 37)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | arcadiaDisplay | 49px | 480 | 1.1 | 0 | Aa Bb Cc |
| h2 | arcadiaDisplay | 42px | 480 | 1.15 | 0.42px | Aa Bb Cc |
| h3 | arcadia | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| body | arcadia | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | arcadia | 14px | 420 | 1 | 0.07px | Aa Bb Cc |
| button | arcadia | 16px | 420 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #3986c5;
--color-surface: #0c1c29;
--color-ink: #dcbeae;
--color-accent: #718095;
--color-detail: #cdb2aa;
}
/* CSS variables exposed by source */
:root {
--color-green-magic-400: #77c599;
--color-orange-base-800: #38231a;
--color-orange-magic-400-alpha-3: #fc9b6f33;
--color-neutral-base-50: #fbfcfd;
--color-green-magic-400-alpha-3: #77c59933;
--gap-md: 32px;
--color-blue-magic-400: #77becf;
--color-red-magic-600-alpha-5: #d0327538;
--gap-3xl: 112px;
--surface-input-active: #fbfcfd;
--color-neutral-magic-400-alpha-5: #afb2ce5c;
--spacing-12: 12px;
--color-orange-magic-600: #c45000;
--gap-xs: 12px;
--color-purple-magic-600-alpha-5: #5266eb38;
--radius-4xl: 2rem;
--spacing-160: 160px;
--spacing-80: 80px;
--text-default-inverted: #ededf3;
--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--surface-primary: #5266eb;
--color-purple-magic-800: #3442a6;
--text-emphasized: #1e1e2a;
--surface-frosted: #7073931a;
--surface-default: #ededf3;
--color-orange-base-150: #faeae3;
--surface-magic-hover: #4354c8;
--color-neutral-base-300: #c3c3cc;
--color-blue-base-50: #f8fcfd;
--color-purple-magic-400: #9cb4e8;
--color-green-magic-300: #95d5af;
--radius-sm: .25rem;
--surface-magic-active: #3442a6;
--spacing-96: 96px;
--color-beige-magic-200: #e7dab6;
--background-secondary: #f4f5f9;
--color-purple-base-200: #dddbf4;
--color-beige-base-50: #fcfcfa;
--color-beige-base-100: #f6f5f2;
--color-blue-magic-300: #8fd0e1;
--color-blue-base-900: #112228;
--color-blue-base-300: #b0c9d3;
--color-blue-magic-800: #075462;
--surface-input: #fbfcfd;
--color-beige-base-700: #3a3831;
--color-neutral-magic-600-alpha-1: #70739305;
--color-green-magic-600-alpha-5: #18855438;
--color-neutral-magic-600-alpha-5: #70739338;
--color-green-magic-400-alpha-4: #77c59947;
--color-neutral-magic-400-alpha-3: #afb2ce33;
--radius-2xl: 1rem;
--radius-md: .375rem;
--radius-lg: .5rem;
--color-green-base-700: #293d31;
--color-beige-base-0: #fff;
--text-xl: 1.5rem;
--color-purple-base-950: #181623;
--color-icon-default: #272735;
--color-green-base-900: #1a211d;
--spacing-4: 4px;
}Drop-in prompt
Build a landing page in the visual style of Mercury — About.
Reference design system (extracted from the live site):
- Palette: #3986c5, #0c1c29, #dcbeae, #718095, #cdb2aa
- Typefaces: arcadiaDisplay, arcadia
- Macrostructure: Split Studio
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/mercury-com--about
