Alloy
Feature Stack
Deep indigo expanse, clean sans-serif geometry, and cool, spacious digital clarity.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Means Web | 64px | 400 | 1.2 | -1.2px | Aa Bb Cc |
| h2 | Means Web | 40px | 400 | 1 | -0.5px | Aa Bb Cc |
| h3 | Means Web | 24px | 400 | 1.33 | 0 | Aa Bb Cc |
| body | Graphik Web | 16px | 400 | 1.35 | 0 | Aa Bb Cc |
| button | Graphik Web | 13px | 500 | 1.1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #efd623;
--color-surface: #9edafc;
--color-ink: #30164b;
--color-accent: #846c94;
--color-detail: #c4bba5;
}
/* CSS variables exposed by source */
:root {
--spacing-4: calc(24*.0625rem);
--spacing-1: calc(4*.0625rem);
--spacing-3: calc(16*.0625rem);
--spacing-6: calc(64*.0625rem);
--spacing-5: calc(40*.0625rem);
--spacing-7: calc(80*.0625rem);
--spacing-8: calc(96*.0625rem);
--spacing-2: calc(8*.0625rem);
--cta-depth-color: #231e15;
--iaGlobalNavHeightOffset: calc(-68*.0625rem);
--h3-size: 2rem;
--cta-text-weight: 500;
--copy-color: #231e15;
--iaGlobalNavTransition: transform .2s cubic-bezier(0,0,0,1),opacity .2s cubic-bezier(0,0,0,1);
--copy-info-size: .8125rem;
--h1-size: 3rem;
--copy-legal-line: 1.45455;
--copy-jumbo-line: 1;
--cta-background-color-disabled: #dbd9d2;
--copy-regular-size: 1em;
--copy-medium-line: 1.4;
--h6-line: 1.2;
--iaGlobalNavHeight: calc(68*.0625rem);
--selection-background-color: rgba(255,224,27,.15);
--cta-line-height: 1.5;
--copy-large-line: 1.33333;
--copy-small-line: 1.75;
--copy-large-size: 1.5rem;
--nav-height: calc(4.125rem + 46*((100vw - 68.75rem )/820 ));
--copy-small-size: 1rem;
--copy-medium-size: 1.25rem;
--cta-stroke-color: #231e15;
--module-padding: calc(80*.0625rem);
--module-reducedPadding: calc(40*.0625rem);
--copy-info-line: 1.25;
--h5-line: 1.33333;
--copy-color-light: rgba(35,30,21,.65);
--h4-line: 1.25;
--display-text-line: 1.5;
--h5-size: 1.5rem;
--cta-stroke-width: calc(1*.0625rem);
--heading-color: #231e15;
--cta-text-size: .8125rem;
--link-background-hovered: rgba(255,224,27,.65);
--display-text-size: 4rem;
--cta-border-radius: 2em;
--copy-regular-line: 1.5;
--cta-text-color: #231e15;
--copy-jumbo-size: 5rem;
--h4-size: 2rem;
--h1-line: 1;
--h3-line: 1.25;
--h6-size: 1.25rem;
--cta-background-color: #ffe01b;
--link-color: #231e15;
--link-color-hovered: #231e15;
--h2-line: 1;
--h2-size: 2.5rem;
--copy-legal-size: .6875rem;
}Drop-in prompt
Build a landing page in the visual style of Email & SMS Marketing Platform | Mailchimp.
Reference design system (extracted from the live site):
- Palette: #efd623, #9edafc, #30164b, #846c94, #c4bba5
- Typefaces: Means Web, Graphik Web
- Macrostructure: Feature Stack
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/mailchimp-com