Beehiiv
A newsletter growth platform with a dark, editorial marketing surface (#0D0D0D near-black) and a distinctive orange-yellow accent (#F5A623 / #FFBB00) that signals monetization and energy. The product dashboard runs on clean whites with the orange accent for active states and primary CTAs. Beehiiv targets newsletter operators who want both audience growth tools and revenue features (paid subscriptions, ad network, boosts) — the design reflects this business seriousness with structured data tables, growth charts, and audience segmentation views. The marketing site uses bold typography (ABC Monument Grotesk or similar) with high contrast and direct copy.
Color Tokens
1. Visual Theme & Atmosphere
Beehiiv is built for newsletter entrepreneurs, and the design serves that audience: growth charts, subscriber counts, revenue metrics, and publishing tools all in one product. The marketing site uses a dark, high-contrast aesthetic that signals ambition and differentiation from the Substack status quo. The product itself is clean and white, with orange/yellow accent for CTAs and key metrics. The brand communicates: your newsletter is a business, and we're serious about helping you build it.
2. Color System
Marketing (dark):
- Canvas: #0D0D0D — strong, editorial dark surface
- Orange-yellow: #FFBB00 — primary CTA, metric highlights
- Ink: #F5F5F5 — clean white text
Dashboard (light):
- White canvas, light gray surfaces for panel differentiation
- Orange-yellow accent carries through for CTA consistency
- Standard success/danger for email metrics (open rate, unsubscribes)
3. Typography
ABC Monument Grotesk or similar heavyweight grotesque for marketing display — tight tracking, aggressive weight, editorial authority. Inter for product UI — clean and functional. The marketing type communicates ambition; the product type communicates reliability.
4. Components & Patterns
- Post editor: Clean WYSIWYG with block-based content, preview toggle
- Subscriber table: Email, source, tier (free/paid), join date, open rate — data-dense
- Growth chart: Line graph showing subscriber count over time, milestone markers
- Monetization dashboard: Revenue cards — monthly ARR, active paid subscribers
- Ad network: Available boost slots with CPM and target audience data
- Publication settings: Brand color, logo upload, domain configuration
5. Spacing & Layout
Dashboard: 240px sidebar, content max 1100px. Post editor: 720px content width centered. Subscriber table: full-width with horizontal scroll on mobile. Marketing: 1280px max, large section padding.
6. Motion & Interaction
Growth chart animates on load (line draws in). Subscriber count increments on major milestones. Post publish flow has a satisfying success state with confetti. Standard transitions throughout at 200ms.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for