返回列表
行业: 后端、数据库与 DevOpsWebsite

PostHog

PostHog 在暖奶油色画布上加入手绘刺猬吉祥物、草图式标注和开发者产品界面，使数据分析工具既保持技术清晰度，又拥有轻松、顽皮的品牌个性。

Light UIDeveloper-focusedPlayfulDesign System
PostHog 网站预览
设计系统
品牌色彩 · 28

primary

#F7A501

--color-primary

primary pressed

#DD9001

--color-primary-pressed

primary active

#B17816

--color-primary-active

on primary

#23251D

--color-on-primary

ink

#23251D

--color-ink

body

#4D4F46

--color-body

charcoal

#33342D

--color-charcoal

mute

#6C6E63

--color-mute

ash

#9B9C92

--color-ash

stone

#B6B7AF

--color-stone

hairline

#BFC1B7

--color-hairline

hairline soft

#DCDFD2

--color-hairline-soft

on dark

#FFFFFF

--color-on-dark

canvas

#EEEFE9

--color-canvas

surface soft

#E5E7E0

--color-surface-soft

surface card

#FFFFFF

--color-surface-card

surface doc

#FCFCFA

--color-surface-doc

surface dark

#23251D

--color-surface-dark

link blue

#1D4ED8

--color-link-blue

link teal

#1078A3

--color-link-teal

accent blue

#2C84E0

--color-accent-blue

accent blue soft

#DCEAF6

--color-accent-blue-soft

accent red

#CD4239

--color-accent-red

accent red soft

#F7D6D3

--color-accent-red-soft

accent green

#2C8C66

--color-accent-green

accent green soft

#D9EDDF

--color-accent-green-soft

accent purple

#7C44A6

--color-accent-purple

accent purple soft

#E7D8EE

--color-accent-purple-soft

字体系统

字体家族

IBM Plex Sans Variable / ui-monospace / Source Code Pro

字重

700800600400500

备注

3 个字体家族，完整字阶、行高和字距见 DESIGN.md

标签
Light UIDeveloper-focusedPlayfulDesign System
设计文档

品牌设计系统的完整 Markdown 文档

PostHog — Style Reference

> A playful developer-tools system rendered on a warm cream canvas with hand-drawn hedgehog mascots dotted across every page like marginalia in a sketchbook. The chrome reads like a friendly engineering blog: olive-gray ink (#4d4f46) for body, deep olive-charcoal (#23251d) for headlines, IBM Plex Sans Variable typography in tight 1.43-line-height paragraphs, and a single saturated yellow-orange CTA pill (#f7a501) carrying every primary action. The system actively rejects the genre's typical somber dark-tech aesthetic in favor of a creamy, textbook-illustration sensibility — bordered cards stack on the cream canvas with 4–6px radii, doc sidebars use rounded outline-icon mini-illustrations, and the home page leans on cartoon characters (hedgehogs in lab coats, hedgehogs at terminals, hedgehogs in lounge chairs) as its signature decoration. Code samples and product analytics charts live inside white-on-cream cards with thin olive borders; the contrast between the playful illustration and the data-dense product imagery is the brand's signature voice.

**Theme:** light

**Source website:** [https://posthog.com/](https://posthog.com/)

Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

Tokens — Colors

| Name | Value | Token | Role |

|---|---|---|---|

| primary | `#f7a501` | `--color-primary` | primary role extracted from the source design |

| primary pressed | `#dd9001` | `--color-primary-pressed` | primary pressed role extracted from the source design |

| primary active | `#b17816` | `--color-primary-active` | primary active role extracted from the source design |

| on primary | `#23251d` | `--color-on-primary` | on primary role extracted from the source design |

| ink | `#23251d` | `--color-ink` | ink role extracted from the source design |

| body | `#4d4f46` | `--color-body` | body role extracted from the source design |

| charcoal | `#33342d` | `--color-charcoal` | charcoal role extracted from the source design |

| mute | `#6c6e63` | `--color-mute` | mute role extracted from the source design |

| ash | `#9b9c92` | `--color-ash` | ash role extracted from the source design |

| stone | `#b6b7af` | `--color-stone` | stone role extracted from the source design |

| hairline | `#bfc1b7` | `--color-hairline` | hairline role extracted from the source design |

| hairline soft | `#dcdfd2` | `--color-hairline-soft` | hairline soft role extracted from the source design |

| on dark | `#ffffff` | `--color-on-dark` | on dark role extracted from the source design |

| canvas | `#eeefe9` | `--color-canvas` | canvas role extracted from the source design |

| surface soft | `#e5e7e0` | `--color-surface-soft` | surface soft role extracted from the source design |

| surface card | `#ffffff` | `--color-surface-card` | surface card role extracted from the source design |

| surface doc | `#fcfcfa` | `--color-surface-doc` | surface doc role extracted from the source design |

| surface dark | `#23251d` | `--color-surface-dark` | surface dark role extracted from the source design |

| link blue | `#1d4ed8` | `--color-link-blue` | link blue role extracted from the source design |

| link teal | `#1078a3` | `--color-link-teal` | link teal role extracted from the source design |

| accent blue | `#2c84e0` | `--color-accent-blue` | accent blue role extracted from the source design |

| accent blue soft | `#dceaf6` | `--color-accent-blue-soft` | accent blue soft role extracted from the source design |

| accent red | `#cd4239` | `--color-accent-red` | accent red role extracted from the source design |

| accent red soft | `#f7d6d3` | `--color-accent-red-soft` | accent red soft role extracted from the source design |

| accent green | `#2c8c66` | `--color-accent-green` | accent green role extracted from the source design |

| accent green soft | `#d9eddf` | `--color-accent-green-soft` | accent green soft role extracted from the source design |

| accent purple | `#7c44a6` | `--color-accent-purple` | accent purple role extracted from the source design |

| accent purple soft | `#e7d8ee` | `--color-accent-purple-soft` | accent purple soft role extracted from the source design |

| focus ring | `rgba(59,130,246,0.5)` | `--color-focus-ring` | focus ring role extracted from the source design |

Tokens — Typography

IBM Plex Sans Variable · `--font-primary`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 700, 800, 600, 400, 500
  • **Sizes:** 36px, 24px, 21px, 20px, 18px, 16px, 15px, 14px, 13px, 12px
  • **Line height:** 1.5, 1.33, 1.4, 1.56, 1.71, 1.43, 1
  • **Letter spacing:** 0, -0.6px, -0.5px
  • **Role:** Brand typography family observed across the documented type scale.

    • ui-monospace · `--font-family-2`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 400
  • **Sizes:** 14px
  • **Line height:** 1.43
  • **Letter spacing:** 0
  • **Role:** Brand typography family observed across the documented type scale.

    • Source Code Pro · `--font-family-3`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 500
  • **Sizes:** 14px
  • **Line height:** 1.43
  • **Letter spacing:** 0
  • **Role:** Brand typography family observed across the documented type scale.

    • Type Scale

    | Role | Size | Line Height | Letter Spacing | Token |

    |---|---|---|---|---|

    | display-xl | 36px | 1.5 | 0 | `--text-display-xl` |

    | display-lg | 24px | 1.33 | -0.6px | `--text-display-lg` |

    | heading-lg | 21px | 1.4 | -0.5px | `--text-heading-lg` |

    | heading-md | 20px | 1.4 | 0 | `--text-heading-md` |

    | heading-sm | 18px | 1.5 | 0 | `--text-heading-sm` |

    | heading-sm-mixed | 18px | 1.56 | 0 | `--text-heading-sm-mixed` |

    | body-md | 16px | 1.5 | 0 | `--text-body-md` |

    | body-strong | 16px | 1.5 | 0 | `--text-body-strong` |

    | body-sm | 15px | 1.71 | 0 | `--text-body-sm` |

    | body-sm-strong | 15px | 1.71 | 0 | `--text-body-sm-strong` |

    | body-xs | 14px | 1.43 | 0 | `--text-body-xs` |

    | caption-md | 14px | 1.71 | 0 | `--text-caption-md` |

    | caption-sm | 13px | 1.5 | 0 | `--text-caption-sm` |

    | caption-xs | 12px | 1.33 | 0 | `--text-caption-xs` |

    | utility-xs | 12px | 1.33 | 0 | `--text-utility-xs` |

    | link-md | 16px | 1.5 | 0 | `--text-link-md` |

    | button-md | 14px | 1.5 | 0 | `--text-button-md` |

    | button-sm | 13px | 1 | 0 | `--text-button-sm` |

    | code-sm | 14px | 1.43 | 0 | `--text-code-sm` |

    | code-xs | 14px | 1.43 | 0 | `--text-code-xs` |

    Tokens — Spacing & Shapes

    **Density:** comfortable

    Spacing Scale

    | Name | Value | Token |

    |---|---|---|

    | xxs | 2px | `--spacing-xxs` |

    | xs | 4px | `--spacing-xs` |

    | sm | 8px | `--spacing-sm` |

    | md | 12px | `--spacing-md` |

    | lg | 16px | `--spacing-lg` |

    | xl | 24px | `--spacing-xl` |

    | xxl | 32px | `--spacing-xxl` |

    | section | 80px | `--spacing-section` |

    Border Radius

    | Name | Value | Token |

    |---|---|---|

    | none | 0px | `--radius-none` |

    | xs | 2px | `--radius-xs` |

    | sm | 4px | `--radius-sm` |

    | md | 6px | `--radius-md` |

    | lg | 8px | `--radius-lg` |

    | full | 9999px | `--radius-full` |

    Layout

  • **Section gap:** 80px
  • **Card padding:** 16px
  • **Element gap:** 12px
  • **Max content width:** 1200px

    • Components

    button primary

    **Role:** button primary component

  • **backgroundColor:** `{colors.primary}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `8px 16px`
  • **height:** `40px`

    • button primary pressed

    **Role:** button primary pressed component

  • **backgroundColor:** `{colors.primary-pressed}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.md}`

    • button secondary

    **Role:** button secondary component

  • **backgroundColor:** `{colors.surface-soft}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `8px 16px`
  • **height:** `40px`

    • button tertiary

    **Role:** button tertiary component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `8px 12px`

    • button disabled

    **Role:** button disabled component

  • **backgroundColor:** `{colors.surface-soft}`
  • **textColor:** `{colors.ash}`
  • **rounded:** `{rounded.md}`

    • text input

    **Role:** text input component

  • **backgroundColor:** `{colors.surface-card}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `8px 12px`
  • **height:** `36px`

    • text input focused

    **Role:** text input focused component

  • **backgroundColor:** `{colors.surface-card}`
  • **textColor:** `{colors.ink}`
  • **rounded:** `{rounded.md}`

    • search input

    **Role:** search input component

  • **backgroundColor:** `{colors.surface-card}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `8px 12px`
  • **height:** `36px`

    • product card

    **Role:** product card component

  • **backgroundColor:** `{colors.surface-card}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `24px`

    • doc card

    **Role:** doc card component

  • **backgroundColor:** `{colors.surface-doc}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `24px`

    • feature tile

    **Role:** feature tile component

  • **backgroundColor:** `{colors.surface-card}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.heading-sm-mixed}`
  • **rounded:** `{rounded.md}`
  • **padding:** `20px`

    • pricing tier card

    **Role:** pricing tier card component

  • **backgroundColor:** `{colors.surface-card}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `32px`

    • hedgehog mascot card

    **Role:** hedgehog mascot card component

  • **backgroundColor:** `{colors.surface-card}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `24px`

    • product tab

    **Role:** product tab component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.body}`
  • **typography:** `{typography.body-strong}`
  • **rounded:** `{rounded.md}`
  • **padding:** `8px 12px`

    • product tab active

    **Role:** product tab active component

  • **backgroundColor:** `{colors.surface-card}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-strong}`
  • **rounded:** `{rounded.md}`

    • pill tab

    **Role:** pill tab component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.body}`
  • **typography:** `{typography.button-sm}`
  • **rounded:** `{rounded.full}`
  • **padding:** `6px 14px`

    • pill tab active

    **Role:** pill tab active component

  • **backgroundColor:** `{colors.ink}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.button-sm}`
  • **rounded:** `{rounded.full}`

    • badge uppercase

    **Role:** badge uppercase component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.body}`
  • **typography:** `{typography.utility-xs}`
  • **rounded:** `{rounded.none}`

    • badge promo

    **Role:** badge promo component

  • **backgroundColor:** `{colors.accent-blue-soft}`
  • **textColor:** `{colors.link-blue}`
  • **typography:** `{typography.caption-xs}`
  • **rounded:** `{rounded.full}`
  • **padding:** `2px 8px`

    • banner tip blue

    **Role:** banner tip blue component

  • **backgroundColor:** `{colors.accent-blue-soft}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `16px 20px`

    • banner tip green

    **Role:** banner tip green component

  • **backgroundColor:** `{colors.accent-green-soft}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `16px 20px`

    • banner tip red

    **Role:** banner tip red component

  • **backgroundColor:** `{colors.accent-red-soft}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `16px 20px`

    • banner tip purple

    **Role:** banner tip purple component

  • **backgroundColor:** `{colors.accent-purple-soft}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `16px 20px`

    • code block

    **Role:** code block component

  • **backgroundColor:** `{colors.surface-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.code-sm}`
  • **rounded:** `{rounded.md}`
  • **padding:** `16px 20px`

    • inline code

    **Role:** inline code component

  • **backgroundColor:** `{colors.surface-soft}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.code-xs}`
  • **rounded:** `{rounded.xs}`
  • **padding:** `2px 6px`

    • primary nav

    **Role:** primary nav component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-strong}`
  • **rounded:** `{rounded.none}`
  • **height:** `56px`

    • sub nav strip

    **Role:** sub nav strip component

  • **backgroundColor:** `{colors.surface-soft}`
  • **textColor:** `{colors.body}`
  • **typography:** `{typography.body-xs}`
  • **rounded:** `{rounded.none}`
  • **height:** `40px`

    • doc sidebar

    **Role:** doc sidebar component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.body}`
  • **typography:** `{typography.body-xs}`
  • **rounded:** `{rounded.none}`
  • **width:** `240px`

    • footer section

    **Role:** footer section component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.body}`
  • **typography:** `{typography.body-xs}`
  • **rounded:** `{rounded.none}`
  • **padding:** `32px 24px`

    • link inline

    **Role:** link inline component

  • **textColor:** `{colors.link-teal}`
  • **typography:** `{typography.link-md}`

    • Do's and Don'ts

    Do

  • Use `--color-primary` for the brand's primary interaction treatment.
  • Keep page surfaces anchored to `--color-canvas`.
  • Preserve every typography style's documented size, line height, and letter spacing.
  • Compare major implementation decisions against [the live PostHog website](https://posthog.com/).

    • Don't

  • Do not introduce colors outside the documented color token set.
  • Do not replace `--color-ink` with an arbitrary neutral.
  • Do not flatten documented component states or spacing relationships.
  • Do not treat this extracted snapshot as newer than the live source website.

    • Layout

    Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://posthog.com/).

    同类品牌推荐

    ClickHouse

    Dark UI · Gradient

    HashiCorp

    Dark UI · Gradient

    MongoDB

    Light UI · Design System

    PostHog 设计系统 | 品牌模板 · ViboDesign