PostHog

Difficulty:
Company
posthog

Effect Preview

Style Description

Product analytics. Hedgehog brand, developer-friendly dark UI

Tags

PostHogBackend

Prompt Template

Base Template
Design a PostHog-inspired interface. - Warm sage/olive color palette instead of conventional blues — earthy and approachable; - IBM Plex Sans Variable font at bold weights (700/800) for headings with generous 1.50+ line-heights; - Hidden brand orange (#F54E00) that only appears on hover interactions — a delightful surprise; - Hand-drawn hedgehog illustrations and playful imagery — deliberately anti-corporate; - Sage-tinted borders (#bfc1b7) and backgrounds (#eeefe9) creating a unified warm-green system. Colors: #4d4f46, #23251d, #F54E00, #F7A501 with #F54E00 accent. Typography: ui-monospace.

Variant Prompts

📱 Mobile
Design a mobile app with PostHog aesthetics. Use PostHog color identity with #F54E00 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with PostHog style. Use PostHog color identity with #F54E00 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with PostHog design language. Use PostHog color identity with #F54E00 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with PostHog visual identity. Use PostHog color identity with #F54E00 accents. Compelling, conversion-focused.

Usage Examples

PostHog App

Web App
Build a web app with PostHog design language and #F54E00 color system.

PostHog Dashboard

Dashboard
Create a dashboard using PostHog style with data visualization and ui-monospace typography.

✅ Best For

  • Backend
  • Brand-consistent interfaces
  • Modern web applications

✅ Avoid For

  • Unrelated design aesthetics
  • Different brand guidelines