Beehiiv — About
Ecosystem Index




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 | Circularpro book | 80px | 400 | 1 | -3.2px | Aa Bb Cc |
| h2 | Inter | 14px | 400 | 1.7 | 2px | Aa Bb Cc |
| h3 | Circularpro book | 26px | 400 | 1.22 | -0.52px | Aa Bb Cc |
| body | Inter | 18px | 400 | 1.6 | 0 | Aa Bb Cc |
| button | Inter | 15px | 400 | 1.6 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #5424e4;
--color-surface: #3d1c9f;
--color-ink: #fad87d;
--color-accent: #ac748c;
--color-detail: #bdb9b2;
}
/* CSS variables exposed by source */
:root {
--border-color: #d1d1db;
--pink-700: #db0bb9;
--blue-700: #0075ad;
--pink-600: #f42ad3;
--blue-400: #38beff;
--grey-50-51: #f7f7f8;
--purple-200: #c6b6f7;
--orange-600: #ff571f;
--purple-50-501: #f4f1fd;
--grey-100-101: #e8e8ed;
--green-300: #84e4ae;
--plum-500: #cf75ff;
--orchid: #cf75ff;
--blue-500: #00acff;
--black-2: #121217;
--ls-color-yellow-lighter: #ffd266;
--white-901: #ffffff1a;
--light-white: #fff9;
--orange-700: #eb3a00;
--grey-200: #d1d1db;
--blue-100: #dbf3ff;
--dark-grey: #191919;
--green-200: #b2eecc;
--grey-50: #f7f7f8;
--yellow-50-501: #fff9eb;
--green-400: #56d990;
--green-700: #1e874c;
--blue-600: #0090d6;
--blue: #5423e7;
--light-black: #191919;
--red-500: #f53d6b;
--orange-200: #ffcdbd;
--gray-300: #a9a9bc;
--blue-200: #ade4ff;
--red-50-501: #fef0f4;
--yellow-200: #ffe7ad;
--purple-500: #7047eb;
--green-50-502: #eefbf4;
--orange-100: #ffe8e1;
--gray-500: #6c6c89;
--purple-400: #8d6cef;
--bullet-point-color: #6c6c89;
--purple-700: #4316ca;
--pink-800: #a5088c;
--yellow-700: #c28800;
--blue-50-501: #f0faff;
--orange-50: #fff2ee;
--orange-400: #ff9876;
--light-blue: #ade4ff;
--orange-500: #ff7d52;
--blue-300: #70d1ff;
--ls-color-yellow: #ffc233;
--green-600: #26a95f;
--pink-400: #f87ce4;
--black: black;
--button-primary-light: #ffffffe6;
--pink-500: #f75fde;
--pink-50: #feecfb;
--yellow-300: #ffda85;
--yellow-100: #fff3d6;
}Drop-in prompt
Build a landing page in the visual style of Lemonsqueezy — About.
Reference design system (extracted from the live site):
- Palette: #5424e4, #3d1c9f, #fad87d, #ac748c, #bdb9b2
- Typefaces: Circularpro book, Inter
- Macrostructure: Ecosystem Index
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/lemonsqueezy-com--about