skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-posthog

Apply PostHog's design system tokens and component styles when generating UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#color palette#design tokens#ui design#posthog
One-click install
npx skills add https://github.com/deepparser/skills --skill design-posthog-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-posthog
Source: https://github.com/deepparser/skills/tree/main/design-posthog
Command: npx skills add https://github.com/deepparser/skills --skill design-posthog-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating PostHog's distinctive warm, olive-toned visual identity in new UI work requires manually extracting exact colors, typography, and component specs from their site, which is slow and error-prone. ## Core Features & Use Cases - Complete Design Token Catalog: Provides exact hex colors (Olive Ink #4d4f46, PostHog Orange #F54E00, Warm Parchment #fdfdf8), typography scales for IBM Plex Sans, spacing, radius, and elevation rules. - Component Specifications: Defines button variants, cards, forms, and navigation patterns including the signature orange hover flash and opacity-based dark button hovers. - Light and Dark Previews: Bundled preview.html and preview-dark.html files show the full token system rendered in both themes for visual verification. - Use Case: When asked to build a landing page or dashboard styled like PostHog, the skill supplies every CSS value needed so the output matches the brand without guesswork. ## Quick Start Build a hero section and feature cards styled like PostHog's website using this design system.

Frequently Asked Questions about design-posthog

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a UI look like PostHog's website?▼

Use PostHog's design tokens: warm parchment background (#fdfdf8), olive ink text (#4d4f46), IBM Plex Sans at weights 700-800 for headings, and 4px border-radius on components. Flash PostHog Orange (#F54E00) on hover states for the signature interaction.

What colors does the PostHog design system use?▼

The palette centers on olive and sage tones: Olive Ink (#4d4f46) for text, Warm Parchment (#fdfdf8) for backgrounds, Sage Border (#bfc1b7) for borders, and PostHog Orange (#F54E00) reserved for hover accents. It deliberately avoids typical SaaS blues and purples.

Does this design system include a dark mode?▼

Yes, the skill bundles a preview-dark.html file showing the full token system adapted for dark surfaces, using backgrounds like #151614 with olive-tinted borders (#3a3b36) while preserving the orange hover accent.

What fonts does PostHog use in its design system?▼

PostHog uses IBM Plex Sans Variable for display and body text at weights 400-800, with Source Code Pro for code snippets. Headings use bold weights with tight letter-spacing, while body text uses generous 1.50-1.71 line-heights.

When should I not use the PostHog design style?▼

Avoid it when a project requires a conventional corporate or premium-polished look, heavy shadows, gradients, or glassmorphism. PostHog's system is intentionally flat, warm, and irreverent, which may not suit formal enterprise branding.

Related Skills

Explore More Design & Creative Skills→
mykaarmamykaarma

brand-guidelines

Apply myKaarma design tokens and layout rules to UI components.

Official
Basic
monang404monang404
2

frontend-mobile-development-component-scaffold

Generates React and React Native components with TypeScript types, tests, styles, and Storybook stories.

Community
Intermediate
Javeria-JavaidJaveria-Javaid

ui-visual-validator

Validates UI modifications through visual evidence, design system compliance, and accessibility checks.

Community
Intermediate
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced