PostHog
developer tools · saas · Light
posthog.comPalette
- #4d4f46
- foreground
- #000000
- swiper-pagination-bullet-inactive-color
- #374151
- foreground
- #9ea096
- neutral
- #111827
- foreground
Typography
Open RundeIBM Plex Sans Variable
PostHog vs Tailwind CSS
Two references, one frame. Palette, typography and the curator verdict for PostHog and Tailwind CSS, read side by side.
Palette & spacing overlap
Palette
Shared (2)
#000000#ffffff
PostHog only
#4d4f46#374151#9ea096#111827#65675e#f7a501#bfc1b7#2f80fa#1a1a1a#30abc6#b62ad9#e1d7c2#b17816#36c46f#6aa84f#bab1ff#fdfdf8#fffefe
Tailwind CSS only
None
Spacing scale (px)
Shared (9)
2px4px6px8px10px12px20px24px32px
PostHog only
14px17px34px
Tailwind CSS only
16px28px36px
Tailwind CSS
developer tools · Light
tailwindcss.comPalette
- #000000
- foreground
- #ffffff
- background
Typography
interplexMono
Typography
Side A · Light
PostHog
- Display
- Open Runde
- Body
- IBM Plex Sans Variable
- Mono
- ui-monospace
Weight ladder
400500600700800
Side B · Light
Tailwind CSS
- Display
- inter
- Body
- plexMono
- Mono
- plexMono
Weight ladder
400500600
Spacing scale
Side A · Light
PostHog
- Base unit
- 4 px
- Container
- 320 px
2px
4px
6px
8px
10px
12px
14px
17px
Side B · Light
Tailwind CSS
- Base unit
- 4 px
- Container
- 1920 px
2px
4px
6px
8px
10px
12px
16px
20px
Motion vocabulary
Side A · Light
PostHog
- Level
- expressive
- Libraries
- -
Durations
0.15s0.3s3s4s4.9s5.8s
Easings
cubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.16, 1, 0.3...ease-in-outlinear
Side B · Light
Tailwind CSS
- Level
- subtle
- Libraries
- Framer Motion
Durations
0.15s0.3s0.35s1s
Easings
cubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0, 0, 0.2, 1)cubic-bezier(0.4, 0, 1, 1)