PostHog

PostHog evokes a functional yet playful workshop aesthetic, like a well-organized workbench with tools neatly arranged. The primary UI elements are predominantly neutral, providing a calm backdrop for sharp, vivid accents. The interplay between a constrained color palette for core UI and a vibrant, multi-hued gradient for brand identity creates a sense of focused competence with a hint of accessible creativity. Custom typography, particularly the varied weights of IBM Plex Sans Variable, lends a bespoke engineered feel. Prioritize IBM Plex Sans Variable for all text using its full range of weights and the defined negative letter-spacing. Use Marigold Yellow (#f1a82c) for primary call-to-action buttons to ensure high visibility. Maintain a default border-radius of 4px for most interactive elements and general containers. Distinguish content sections using neutral background colors: Surface White (#ffffff) and Canvas Sand (#eeefe9). Employ Graphite Grey (#374151) for secondary text and borders to provide visual texture and hierarchy without being too heavy. Reserve the Dynamic Gradient for brand marks or very specific, high-impact decorative elements. Avoid using pure black text (#000000) on white backgrounds for large body paragraphs; use Charcoal Black (#111827) for headlines and Graphite Grey (#374151) for body text. Do not introduce new typographic families; adhere strictly to IBM Plex Sans Variable, ui-monospace, and Source Code Pro. Refrain from adding excessive box shadows; the primary shadow is subtle and used for specific elevation (rgba(0, 0, 0, 0.25) 0px 25px 50px -12px). Do not deviate from the established spacing scale; maintain sectionGap at 48px and elementGap at 8px. Avoid arbitrary color usage; all accent colors like Vivid Green (#6aa84f) should serve a specific, predefined semantic role (e.g., success, feature highlight). Do not use heavily rounded elements except for specific pill-shaped tags or buttons (9999px radius); the default is a modest 4px or sharp 0px.