Posthog
Feature Stack
Cool, spacious digital architecture – stark geometric forms, clean sans-serif, muted teal and burnt orange.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | satoshi | 48px | 500 | 1.15 | 0 | Aa Bb Cc |
| h2 | satoshi | 48px | 500 | 1 | 0 | Aa Bb Cc |
| h3 | Inter | 16px | 500 | 1.5 | 0 | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Inter | 14px | 500 | 1.43 | 0 | Aa Bb Cc |
| button | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
:root {
--color-dominant: #ec8434;
--color-surface: #793b0b;
--color-ink: #c095e6;
--color-accent: #aa65a0;
--color-detail: #86c1a1;
}
/* CSS variables exposed by source */
:root {
--border: 0 0% 89.8%;
--bg-default: 255 255 255;
--bg-emphasis: 229 229 229;
--accent: 0 0% 94.1%;
--border-muted: 245 245 245;
--bg-subtle: 245 245 245;
--primary-foreground: 0 0% 98%;
--bg-error: 254 226 226;
--font-satoshi: "satoshi","satoshi Fallback";
--border-subtle: 229 229 229;
--secondary-foreground: 0 0% 9%;
--background: 0 0% 98%;
--accent-foreground: 0 0% 9%;
--bg-success: 220 252 231;
--bg-info: 191 219 254;
--border-default: 212 212 212;
--bg-muted: 250 250 250;
--bg-attention: 255 237 213;
--font-geist-mono: "GeistMono",ui-monospace,SFMono-Regular,Roboto Mono,Menlo,Monaco,Liberation Mono,DejaVu Sans Mono,Courier New,monospace;
--font-inter: "Inter","Inter Fallback";
--bg-inverted: 23 23 23;
--primary: 0 0% 9%;
--border-emphasis: 163 163 163;
--foreground: 0 0% 3.9%;
--secondary: 0 0% 96.1%;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--card: 0 0% 99.7%;
--content-inverted: 255 255 255;
--_number-flow-d: 0;
--card-foreground: 0 0% 3.9%;
--_number-flow-dx: 0px;
--tw-border-spacing-x: 0;
--muted: 0 0% 96.1%;
--content-attention: 194 65 12;
--tw-scale-y: 1;
--tw-ring-color: rgb(59 130 246/0.5);
--tw-translate-y: 0;
--popover: 0 0% 100%;
--ring: 0 0% 63.9%;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
--content-muted: 163 163 163;
--muted-foreground: 0 0% 45.1%;
--content-success: 21 128 61;
--tw-skew-x: 0;
--content-info: 29 78 216;
--popover-foreground: 0 0% 15.1%;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--_number-flow-d-opacity: 0;
--content-emphasis: 23 23 23;
--tw-scroll-snap-strictness: proximity;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--content-default: 64 64 64;
--tw-border-spacing-y: 0;
--tw-skew-y: 0;
--_number-flow-d-width: 0;
}Drop-in prompt
Build a landing page in the visual style of Dub — Pricing.
Reference design system (extracted from the live site):
- Palette: #ec8434, #793b0b, #c095e6, #aa65a0, #86c1a1
- Typefaces: satoshi, Inter
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/dub-co--pricing