developer tools Color System
PostHog's website feels like a startup's internal wiki that escaped into the wild — warm, irreverent...
PostHog's website feels like a startup's internal wiki that escaped into the wil...
Posthog uses #4d4f46 as the primary accent for interactive elements
Carefully selected 8 colors for developer-tools applications
Uses gradient
#4d4f46
Primary text color — a distinctive olive-gray that gives all text a warm, earthy tone
#23251d
Link text and high-emphasis headings — near-black with green undertone
#F54E00
Hidden brand accent — appears only on hover states, a vibrant orange that surprises
#F7A501
Secondary hover accent on dark buttons — warm gold that pairs with the orange
#b17816
Special button borders — an amber-gold for featured CTAs
#3b82f6
Focus ring color (Tailwind default) — the only blue in the system, reserved for accessibility
#fdfdf8
Primary page background — warm near-white with yellow-green undertone
#eeefe9
Input backgrounds, secondary surfaces — light sage tint
/* Posthog Color System */
:root {
--posthog-olive-ink: #4d4f46;
--posthog-deep-olive: #23251d;
--posthog-posthog-orange: #F54E00;
--posthog-amber-gold: #F7A501;
--posthog-gold-border: #b17816;
--posthog-focus-blue: #3b82f6;
--posthog-warm-parchment: #fdfdf8;
--posthog-sage-cream: #eeefe9;
}
/* Example usage */
.posthog-button-primary {
background-color: var(--posthog-olive-ink);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 8px 15px;
}Cursor's website is a study in warm minimalism meets code-editor elegance. The e...
Expo's interface is a luminous, confidence-radiating developer platform built on...
Linear's website is a masterclass in dark-mode-first product design — a near-bla...
Lovable's website radiates warmth through restraint. The entire page sits on a c...