Lemonsqueezy — About
Ecosystem Index
Loading
Beehiiv — About
Deep indigo expanse, stark sans-serif, cool, technical data streams.
Click any value to copy. Roles are suggestions, not gospel.
- #2e3cb7oklch(43.2% 0.192 271)Dominant
- #050544oklch(18.9% 0.112 269)Surface
- #f5abdeoklch(82.7% 0.108 339)Ink
- #759ca5oklch(66.7% 0.045 213)Accent
- #c49fc9oklch(75.0% 0.072 322)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | ClashGroteskFont | 60px | 700 | 1 | 0 | Aa Bb Cc |
| h2 | ClashGroteskFont | 48px | 700 | 1 | 0 | Aa Bb Cc |
| h3 | SatoshiFont | 16px | 600 | 1.5 | 0 | Aa Bb Cc |
| body | SatoshiFont | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | SatoshiFont | 14px | 500 | 1.43 | 0 | Aa Bb Cc |
| button | SatoshiFont | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #2e3cb7;
--color-surface: #050544;
--color-ink: #f5abde;
--color-accent: #759ca5;
--color-detail: #c49fc9;
}
/* CSS variables exposed by source */
:root {
--border-accent-pink: #ff5ec44d;
--text-secondary: #f7f5ff;
--surface-3: #1c1940;
--text-tertiary: #c4c2d6;
--text-fusion-blue-400: #5b66cb;
--surface-page: #060419;
--font-satoshi: "SatoshiFont", "SatoshiFont Fallback";
--border-subtle: #ffffff0f;
--border-flamingo: #ff5ec4;
--surface-1: #0d0b28;
--text-accent-lavender: #bcbef3;
--text-disabled: #4e4e6c;
--bg-page: #060419;
--border-accent-blue: #2f39ba80;
--surface-2: #141230;
--border-default: #ffffff1f;
--text-fusion-blue-50: #d4d7f5;
--text-accent-blue: #7079d5;
--text-primary: #fff;
--border-strong: #fff3;
--border-accent-lavender: #9299e64d;
--text-accent-pink: #ff5ec4;
--radius-xl: 12px;
--border-fusion-blue: #2f39ba;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--rt-transition-show-delay: .15s;
--button-link-text: #7079d5;
--PhoneInput-color--focus: #03b2cb;
--PhoneInputCountryFlag-aspectRatio: 1.5;
--rt-color-success: #8dc572;
--PhoneInputCountrySelectArrow-width: .3em;
--rt-opacity: .9;
--button-accent-fill: #ff5ec4;
--button-tertiary-text: #d4d7f5;
--action-ghost-text: #dddce8;
--PhoneInputCountrySelect-marginRight: .35em;
--PhoneInputCountrySelectArrow-marginLeft: .35em;
--PhoneInputCountrySelectArrow-color: currentColor;
--rt-color-error: #be6464;
--tw-border-spacing-x: 0;
--rt-color-dark: #222;
--button-primary-fill: #2f39ba;
--PhoneInputCountrySelectArrow-color--focus: #03b2cb;
--button-primary-fill-hover: #2a33a3;
--button-accent-fill-hover: #e040a8;
--button-accent-fill-pressed: #c42d8c;
--tw-ring-color: #3b82f680;
--rt-transition-closing-delay: .15s;
--tw-scale-y: 1;
--tw-translate-y: 0;
--rt-arrow-size: 8px;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
--button-accent-text: #060419;
--PhoneInputCountryFlag-borderColor: #00000080;
--PhoneInputCountryFlag-height: 1em;
--PhoneInputCountryFlag-backgroundColor--loading: #0000001a;
--tw-skew-x: 0;
--button-link-text-hover: #bcbef3;
}Drop-in prompt
Build a landing page in the visual style of Beehiiv — About.
Reference design system (extracted from the live site):
- Palette: #2e3cb7, #050544, #f5abde, #759ca5, #c49fc9
- Typefaces: ClashGroteskFont, SatoshiFont
- 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/beehiiv-com--about
