Alternative Aesthetics Illustration
Bento Grid
Loading
Meme creator
Bold, playful cartoon chaos — vibrant pops against stark white, energetic hand-drawn feel.
Click any value to copy. Roles are suggestions, not gospel.
- #ea9a3coklch(75.1% 0.142 66)Dominant
- #e9bb8aoklch(82.2% 0.083 68)Surface
- #8c2050oklch(43.5% 0.148 359)Ink
- #589fa1oklch(65.7% 0.072 198)Accent
- #a4c4b4oklch(79.2% 0.041 164)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Bowlby One | 93px | 400 | 1.1 | -3.2006px | Aa Bb Cc |
| h2 | Bowlby One | 48px | 400 | 1.08 | -0.16003px | Aa Bb Cc |
| h3 | Bowlby One | 32px | 400 | 1.08 | -0.01px | Aa Bb Cc |
| body | Inter Tight | 18px | 700 | 1.2 | 0 | Aa Bb Cc |
| button | Inter Tight | 24px | 700 | 1.2 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ea9a3c;
--color-surface: #e9bb8a;
--color-ink: #8c2050;
--color-accent: #589fa1;
--color-detail: #a4c4b4;
}
/* CSS variables exposed by source */
:root {
--text-color--text-primary: #000;
--font-to-2: 18;
--background-color--background-error<deleted|variable-89aecd3e-2fe8-312c-65a2-e3e7c57d326c>: #f8e4e4;
--background-color--background-warning<deleted|variable-0aa1a7ce-e851-b6b5-66db-1a1a96e8e04b>: #fcf8d8;
--background-color--background-tertiary<deleted|variable-6632d948-2d2d-2556-731d-05a71c92f234>: #ddfc69;
--background-color--background-alternate<deleted|variable-41ecbc38-077c-494f-9138-9468b7354b23>: #fff;
--text-color--text-error<deleted|variable-4a51c5d2-820c-a0d9-b49e-0e5d273c964f>: #3b0b0b;
--font-from-2: 16;
--font-to-1: 16;
--font-from-1: 9;
--text-color--text-secondary: #212121;
--background-color--background-secondary<deleted|variable-2dd539ce-5be2-4493-8245-a883e87dab6d>: #0b99ff;
--text-color--text-alternate: #fff;
--background-color--background-success<deleted|variable-879e2a57-3170-38fd-0ae7-d0e890873ab2>: #cef5ca;
--text-color--text-success<deleted|variable-17518f72-fb93-45b5-ad9e-fdd3f2b1833a>: #114e0b;
--border-color--border-primary<deleted|variable-d4c54ba4-ee41-67ce-58a5-5216ca039f83>: #eee;
--font-size-0: 1;
--background-color--background-primary<deleted|variable-9f6b6bb4-0795-c8ab-f302-bbebab6f2554>: #000;
--text-color--text-warning<deleted|variable-825aa1d8-b093-0b89-37c5-87d980df10f5>: #5e5515;
--font-size-3: 1.3125;
--base-color-brand--blue: #0b99ff;
--base-color-system--success-green-dark<deleted|variable-70ae3530-1c64-4d15-f2af-205678316683>: #114e0b;
--base-color-system--error-red-dark<deleted|variable-f7a8b234-8033-a5d6-4d85-0326277c2bf8>: #3b0b0b;
--base-color-brand--light-yellow-sec: #d9f462;
--base-color-neutral--black: #000;
--base-color-neutral--light-black: #212121;
--coefficient-1: calc((16 - 9) / (calc(1439 / 100) - calc(767 / 100)));
--base-2: calc((16 - calc(1439 / 100) * calc((18 - 16) / (calc(2100 / 100) - calc(1439 / 100)))) / 16);
--base-color-system--warning-yellow-dark<deleted|variable-296491a7-483e-1229-36b5-e13808cc9004>: #5e5515;
--vw-from-1: calc(767 / 100);
--swiper-navigation-size: 44px;
--base-color-system--success-green<deleted|variable-8fc09a81-a1c7-3c5b-2cf2-835ad5d96212>: #cef5ca;
--vw-from-2: calc(1439 / 100);
--coefficient-2: calc((18 - 16) / (calc(2100 / 100) - calc(1439 / 100)));
--link-color--link-primary<deleted|variable-ad940cb5-1815-151e-2cbc-4f27dec2b1e5>: #0b99ff;
--base-color-brand--light-yellow: #ddfc69;
--base-color-system--warning-yellow<deleted|variable-b0ee00e7-091a-a3f5-1619-b09d07f4475a>: #fcf8d8;
--base-color-brand--yellow: #ebd22f;
--vw-to-1: calc(1439 / 100);
--base-color-neutral--white: #fff;
--base-color-brand--orang: #ff6638;
--base-color-system--error-red<deleted|variable-ad7a5e8d-bd95-fba4-5110-cbccfa2520c4>: #f8e4e4;
--swiper-theme-color: #007aff;
--base-1: calc((9 - calc(767 / 100) * calc((16 - 9) / (calc(1439 / 100) - calc(767 / 100)))) / 16);
--base-color-neutral--neutral-lightest<deleted|variable-eede0174-1898-a99e-0c79-395339ec1911>: #eee;
--vw-to-2: calc(2100 / 100);
}Drop-in prompt
Build a landing page in the visual style of Meme creator.
Reference design system (extracted from the live site):
- Palette: #ea9a3c, #e9bb8a, #8c2050, #589fa1, #a4c4b4
- Typefaces: Bowlby One, Inter Tight
- 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/gm-meme-com
