Deadwater · About
Manifesto
Loading
Eat Real Food
Deep espresso void, bold ivory sans-serifs cutting through a raw silence
Click any value to copy. Roles are suggestions, not gospel.
- #2767d7oklch(53.9% 0.184 261)Dominant
- #e18e9coklch(73.6% 0.102 9)Surface
- #14346coklch(33.6% 0.105 261)Ink
- #8c648coklch(55.9% 0.077 327)Accent
- #c4bfb4oklch(80.6% 0.016 86)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Die Grotesk D | 170px | 700 | 0.86 | 0% | Aa Bb Cc |
| h2 | Die Grotesk B | 14px | 700 | 0.92 | 0 | Aa Bb Cc |
| h3 | Die Grotesk D | 96px | 700 | 0.95 | 0 | Aa Bb Cc |
| body | Die Grotesk A | 16px | 400 | 1.18 | 0 | Aa Bb Cc |
| button | Die Grotesk A | 16px | 400 | 1.18 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #2767d7;
--color-surface: #e18e9c;
--color-ink: #14346c;
--color-accent: #8c648c;
--color-detail: #c4bfb4;
}
/* CSS variables exposed by source */
:root {
--border: lab(90.952% 0 -.0000119209);
--font-grotesk-medium: "Die Grotesk A", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--primary-foreground: lab(98.26% 0 0);
--text-base--line-height: calc(1.5 / 1);
--font-grotesk-bold: "Die Grotesk B", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--accent-foreground: lab(7.78201% -.0000149012 0);
--color-white: #fff;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--radius: .625rem;
--font-geist-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--font-grotesk-display: "Die Grotesk D", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--gap-v: 100px;
--accent: lab(96.52% -.0000298023 .0000119209);
--secondary-foreground: lab(7.78201% -.0000149012 0);
--spacing: .25rem;
--background: lab(100% 0 0);
--font-weight-semibold: 600;
--text-sm: .875rem;
--text-sm--line-height: calc(1.25 / .875);
--font-weight-medium: 500;
--primary: lab(7.78201% -.0000149012 0);
--foreground: lab(2.75381% 0 0);
--secondary: lab(96.52% -.0000298023 .0000119209);
--text-base: 1rem;
--container-md: 460px;
--h4-line-height: .92;
--mobile-xs: 340px;
--tw-inset-shadow-alpha: 100%;
--tw-ring-shadow: 0 0 #0000;
--red1: #920000;
--sidebar-primary-foreground: lab(98.26% 0 0);
--card: lab(100% 0 0);
--tw-drop-shadow-alpha: 100%;
--tw-animation-delay: 0s;
--highlight-0: #f0ff91;
--m-text-size: calc(16/16 * 1rem);
--ui: #0000001a;
--off-white: #fdfbee;
--card-foreground: lab(2.75381% 0 0);
--tw-outline-style: solid;
--highlight-2: #8eb258;
--tw-inset-ring-shadow: 0 0 #0000;
--sidebar-accent-foreground: lab(7.78201% -.0000149012 0);
--muted: lab(96.52% -.0000298023 .0000119209);
--tw-animation-direction: normal;
--tw-enter-scale: 1;
--highlight: #f4ffae;
--mobile: 580px;
--popover: lab(100% 0 0);
--ring: lab(66.128% -.0000298023 .0000119209);
--red3: #d50000;
--tw-inset-shadow: 0 0 #0000;
--tw-ring-offset-color: #fff;
--padding-h: clamp(24px, 10vw, 180px);
--green: #066742;
--tw-shadow-alpha: 100%;
--sidebar-foreground: lab(2.75381% 0 0);
--sidebar-accent: lab(96.52% -.0000298023 .0000119209);
--tw-exit-rotate: 0;
--h1-line-height: .84;
}Drop-in prompt
Build a landing page in the visual style of Eat Real Food.
Reference design system (extracted from the live site):
- Palette: #2767d7, #e18e9c, #14346c, #8c648c, #c4bfb4
- Typefaces: Die Grotesk D, Die Grotesk B, Die Grotesk A
- Macrostructure: Manifesto
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/realfood-gov
