Alternative Aesthetics Illustration
Bento Grid
Warm, vibrant collage of bold playful typography on a generous, open canvas.




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 |
|---|---|---|---|---|---|---|
| body | MetroSans | 17px | 400 | 1.2 | -0.3456px | Aa Bb Cc |
| button | MetroSans | 16px | 400 | 1.2 | 0.04px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #cdb22a;
--color-surface: #9084f4;
--color-ink: #795a0c;
--color-accent: #578e96;
--color-detail: #95c4a8;
}
/* CSS variables exposed by source */
:root {
--type-unit: 1vw;
--brand-unit: 1vw;
--rounded-medium: 10px;
--color-primary-h: 255;
--border-radius: calc(calc(calc(calc(100vw - calc(60 * 1.9px)) / 110) * 1) * .8);
--color-primary-l: 0%;
--rounded-small: 6px;
--border-color: color-mix(in srgb, #000 20%, #fff 80%);
--shadow: calc(calc(calc(calc(100vw - calc(60 * 1.9px)) / 110) * 1) * 1);
--rounded: 10px;
--color-primary-s: 0%;
--color-primary: currentColor;
--rounded-large: 20px;
--font-size: 80%;
--border-width: 1.5px;
--header-height: 75;
--tween: cubic-bezier(0.215, 0.61, 0.355, 1);
--wp-admin-theme-color-darker-20: #005a87;
--wp--preset--font-size--large: 36px;
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
--body-font: 'MetroSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
--pink: #FFA7F0;
--screen-background: #000;
--wp-bound-block-color: #7a00df;
--column-padding: 8;
--ctrl-gap: calc(calc(calc(100vw - calc(60 * 2px)) / 89.66) * 1);
--wrapper-padding--2: calc(60 * 2px);
--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
--sidebar-color: #000;
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--plyr-tooltip-color: #fff;
--range-slider-border: 2px;
--c-highlight: #FFA7F0;
--game-button-text: 30px;
--review-border-width: calc(1vw * 0.2);
--plyr-control-icon-size: 12px;
--ctrl-rounded-large: calc(calc(calc(100vw - calc(60 * 2px)) / 89.66) * 1.25);
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp--preset--spacing--40: 1rem;
--wp-admin-theme-color--rgb: 0,124,186;
--subscribe-field-height: 90px;
--wrapper-small: 2000;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--overlay-background: #000;
--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);
--body-background: #fff;
--bevel-border-width: 30px;
--ctrl-rounded-medium: calc(calc(calc(100vw - calc(60 * 2px)) / 89.66) * .75);
--review-background: #fff;
--button-height: 55px;
--body-color: #000;
--ctrl-button: #fff;
--review-border-radius: calc(1vw * .75);
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
}Drop-in prompt
Build a landing page in the visual style of Home - ANALOGUE.
Reference design system (extracted from the live site):
- Palette: #cdb22a, #9084f4, #795a0c, #578e96, #95c4a8
- Typefaces: MetroSans
- 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/madebyanalogue-co-uk