Elastic
Bento Grid
Loading
Campaign Monitor: Email Marketing Platform & Services
Cool, geometric blues and muted purples; crisp, clean sans-serif; spacious, purposeful layout.
Click any value to copy. Roles are suggestions, not gospel.
- #7c5be9oklch(58.1% 0.205 289)Dominant
- #9c7cfcoklch(67.5% 0.183 292)Surface
- #270f74oklch(29.1% 0.155 282)Ink
- #a59f52oklch(69.1% 0.100 105)Accent
- #b6b1ccoklch(77.3% 0.038 294)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Graphik Web | 48px | 500 | 1 | -0.5px | Aa Bb Cc |
| h2 | Graphik Web | 36px | 700 | 1.11 | -0.5px | Aa Bb Cc |
| h3 | Graphik Web | 36px | 500 | 1.11 | -0.5px | Aa Bb Cc |
| body | Graphik Web | 10px | 400 | 1.5 | -0.5px | Aa Bb Cc |
| caption | Graphik Web | 14px | 400 | 1.43 | 0.35px | Aa Bb Cc |
| button | Graphik Web | 14px | 400 | 1.2 | -0.5px | Aa Bb Cc |
:root {
--color-dominant: #7c5be9;
--color-surface: #9c7cfc;
--color-ink: #270f74;
--color-accent: #a59f52;
--color-detail: #b6b1cc;
}
/* CSS variables exposed by source */
:root {
--color-cmnavy: #212941;
--color-violet-600: oklch(54.1% .281 293.009);
--color-neutral-600: oklch(43.9% 0 0);
--text-base--line-height: 1.5;
--color-neutral-200: oklch(92.2% 0 0);
--color-gray-500: oklch(55.1% .027 264.364);
--color-cmultradark: #111324;
--color-white: #fff;
--color-gray-400: oklch(70.7% .022 261.325);
--radius-sm: .25rem;
--font-weight-bold: 700;
--color-gray-100: oklch(96.7% .003 264.542);
--color-text-default: #111324;
--text-xs--line-height: calc(1/.75);
--radius-2xl: 1rem;
--radius-md: .375rem;
--color-blue-800: oklch(42.4% .199 265.638);
--radius-lg: .5rem;
--text-xl: 1.25rem;
--color-cmpurple-lightest: #a58fff;
--color-cmteal-lighter: #6ad6e0;
--color-slate-800: oklch(27.9% .041 260.031);
--text-2xl--line-height: calc(2/1.5);
--spacing: .25rem;
--text-xl--line-height: calc(1.75/1.25);
--text-sm: .875rem;
--color-indigo-500: oklch(58.5% .233 277.117);
--color-gray-600: oklch(44.6% .03 256.802);
--color-blue-600: oklch(54.6% .245 262.881);
--color-blue-50: oklch(97% .014 254.604);
--color-indigo-700: oklch(45.7% .24 277.023);
--color-black: #000;
--color-cmteal: #51cfdb;
--color-cmblue: #65b9ff;
--text-4xl--line-height: calc(2.5/2.25);
--color-indigo-300: oklch(78.5% .115 274.713);
--text-2xl: 1.5rem;
--color-indigo-400: oklch(67.3% .182 276.935);
--text-lg: 1.125rem;
--text-5xl--line-height: 1;
--text-lg--line-height: calc(1.75/1.125);
--color-indigo-50: oklch(96.2% .018 272.314);
--font-sans: "Graphik Web",Helvetica,Arial,sans-serif;
--color-indigo-600: oklch(51.1% .262 276.966);
--color-cmpurple-lighter: #886aff;
--color-neutral-50: oklch(98.5% 0 0);
--radius-3xl: 1.5rem;
--font-weight-semibold: 600;
--color-red-700: oklch(50.5% .213 27.518);
--color-blue-500: oklch(62.3% .214 259.815);
--color-gray-900: oklch(21% .034 264.665);
--color-gray-700: oklch(37.3% .034 259.733);
--font-weight-extrabold: 800;
--text-4xl: 2.25rem;
--color-cmpurple: #7856ff;
--text-sm--line-height: calc(1.25/.875);
--color-gray-200: oklch(92.8% .006 264.531);
--text-3xl--line-height: 1.2;
--text-5xl: 3rem;
--text-3xl: 1.875rem;
}Drop-in prompt
Build a landing page in the visual style of Campaign Monitor: Email Marketing Platform & Services.
Reference design system (extracted from the live site):
- Palette: #7c5be9, #9c7cfc, #270f74, #a59f52, #b6b1cc
- Typefaces: Graphik Web
- Macrostructure: Bento Grid
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/campaignmonitor-com
