Phantom Studios — Technology Creative Agency — London and Auckland
Marquee Hero
Loading
Deadwater
Cold monochrome brutalism, heavy compressed sans-serifs against a void of charcoal
Click any value to copy. Roles are suggestions, not gospel.
- #7f7f7foklch(59.6% 0.000 90)Dominant
- #bcbcbcoklch(79.5% 0.000 90)Surface
- #424242oklch(37.9% 0.000 90)Ink
- #7c7c7coklch(58.6% 0.000 90)Accent
- #cbcbcboklch(84.2% 0.000 90)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Inter-dcbae5534c949be2 | 14px | 400 | 1.5 | 0 | Aa Bb Cc |
| h2 | Inter-dcbae5534c949be2 | 32px | 300 | 1.25 | 0 | Aa Bb Cc |
| h3 | Inter-dcbae5534c949be2 | 24px | 300 | 1.5 | 0 | Aa Bb Cc |
| body | Inter-dcbae5534c949be2 | 14px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Inter-dcbae5534c949be2 | 14px | 400 | 1.3 | 0 | Aa Bb Cc |
| button | Inter-dcbae5534c949be2 | 14px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #7f7f7f;
--color-surface: #bcbcbc;
--color-ink: #424242;
--color-accent: #7c7c7c;
--color-detail: #cbcbcb;
}
/* CSS variables exposed by source */
:root {
--text-2xl: 1.5rem;
--text-display-sm: 7.5rem;
--text-display-sm--line-height: 70%;
--text-body: .875rem;
--text-display-sm-vw--line-height: 70%;
--text-8xl--line-height: 1;
--text-2xl--line-height: calc(2/1.5);
--text-base--line-height: calc(1.5/1);
--spacing: .25rem;
--text-display: 11.5rem;
--font-humane: Humane-e7e4f97560e0ec4c,"Humane-e7e4f97560e0ec4c fallback: Arial",sans-serif;
--text-project-title: 5rem;
--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--text-8xl: 6rem;
--text-sm: .875rem;
--color-gray: #cfcfcf;
--color-white: #fff;
--text-display-sm-vw: 8.33cqi;
--text-display--line-height: 70%;
--radius-sm: .25rem;
--color-gray-dark: #111;
--font-sans: Inter-dcbae5534c949be2,"Inter-dcbae5534c949be2 fallback: Arial",sans-serif,sans-serif;
--text-display-vw: 12.78cqi;
--text-sm--line-height: calc(1.25/.875);
--color-border: #323232;
--font-weight-extralight: 200;
--text-6xl: 3.75rem;
--color-black: #000;
--font-weight-light: 300;
--font-weight-medium: 500;
--font-weight-normal: 400;
--font-inter: Inter-dcbae5534c949be2,"Inter-dcbae5534c949be2 fallback: Arial",sans-serif;
--text-project-title--line-height: 90%;
--radius-md: .375rem;
--text-6xl--line-height: 1;
--text-display-vw--line-height: 70%;
--text-base: 1rem;
--color-gray-medium: #616161;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-inset-shadow-alpha: 100%;
--tw-ring-shadow: 0 0 #0000;
--aspect-video: 16/9;
--blur-lg: 16px;
--tw-drop-shadow-alpha: 100%;
--default-transition-timing-function: cubic-bezier(.4,0,.2,1);
--tw-outline-style: solid;
--leading-normal: 1.5;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-translate-z: 0;
--tw-scale-y: 1;
--ease-in-out-quart: cubic-bezier(.77,0,.175,1);
--tw-translate-y: 0;
--tw-inset-shadow: 0 0 #0000;
--tw-ring-offset-color: #fff;
--tw-shadow-alpha: 100%;
--ease-out-quart: cubic-bezier(.165,.84,.44,1);
--tw-scale-z: 1;
--tw-border-style: solid;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
}Drop-in prompt
Build a landing page in the visual style of Deadwater.
Reference design system (extracted from the live site):
- Palette: #7f7f7f, #bcbcbc, #424242, #7c7c7c, #cbcbcb
- Typefaces: Inter-dcbae5534c949be2
- Macrostructure: Marquee Hero
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/deadwater-fr
