Drop Dead Generous | Global Generosity Experiment
Marquee Hero
Loading
Radial
Slate gray technical void, lime accents piercing a clinical geometric silence
Click any value to copy. Roles are suggestions, not gospel.
- #c1e15coklch(86.0% 0.162 121)Dominant
- #64cceaoklch(79.5% 0.105 219)Surface
- #1c3c43oklch(33.5% 0.040 214)Ink
- #7e9d5coklch(65.7% 0.097 130)Accent
- #bac3c9oklch(81.2% 0.013 237)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Helvetica Now Display | 82px | 400 | 1 | -1.64857px | Aa Bb Cc |
| h2 | Helvetica Now Display | 82px | 400 | 1 | -1.63143px | Aa Bb Cc |
| h3 | Helvetica Now Display | 90px | 400 | 1 | -1.8px | Aa Bb Cc |
| body | Helvetica Now Display | 16px | 400 | 1 | 0 | Aa Bb Cc |
| button | DM Mono | 14px | 400 | 1 | -0.14px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #c1e15c;
--color-surface: #64ccea;
--color-ink: #1c3c43;
--color-accent: #7e9d5c;
--color-detail: #bac3c9;
}
/* CSS variables exposed by source */
:root {
--space--2: 12px;
--color--6: #f5f5f5;
--color--2: #c6e758;
--space--1: 4px;
--color--4: #c7cdc8;
--color--1: #3e5b63;
--color--7: #5fc4e3;
--space--4: 40px;
--space--7: 100px;
--space--6: 80px;
--color--5: #4a5760;
--space--5: 60px;
--space--3: 20px;
--color--3: #1e1e1e;
--max-width--1: 1540px;
--focus-outline-color: #3e5b63;
--f-spinner-stroke: 2.75;
--f-button-svg-filter: none;
--f-button-svg-disabled-opacity: 0.65;
--f-spinner-color-2: rgba(17, 24, 28, 0.8);
--f-button-svg-width: 20px;
--f-spinner-height: 36px;
--f-button-svg-height: 20px;
--focus-outline-width: 3px;
--f-button-border-radius: 0;
--base--color: #1e1e1e;
--f-button-color: #374151;
--family--1: "Helvetica Now Display", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
--f-button-bg: #f8f8f8;
--f-spinner-width: 36px;
--f-button-height: 40px;
--focus-outline-offset: 3px;
--f-button-active-bg: #d0d0d0;
--f-button-transform: none;
--f-spinner-color-1: rgba(0, 0, 0, 0.1);
--family--2: "DM Mono", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
--f-button-svg-stroke-width: 1.5;
--gutter--1: clamp(20px, calc(12.142857px + 1.785714vw), 40px);
--f-button-svg-fill: none;
--f-button-border: 0;
--f-button-transition: all 0.15s ease;
--base--bg: #fff;
--f-button-hover-bg: #e0e0e0;
--f-button-shadow: none;
--f-button-width: 40px;
}Drop-in prompt
Build a landing page in the visual style of Radial.
Reference design system (extracted from the live site):
- Palette: #c1e15c, #64ccea, #1c3c43, #7e9d5c, #bac3c9
- Typefaces: Helvetica Now Display, DM Mono
- 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/radial-org
