{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for PostHog",
  "meta": {
    "name": "PostHog",
    "description": "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"
  },
  "color": {
    "primary": {
      "$value": "#f7a501",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "primary-pressed": {
      "$value": "#dd9001",
      "$type": "color",
      "$description": "Use for the primary pressed role."
    },
    "primary-active": {
      "$value": "#b17816",
      "$type": "color",
      "$description": "Use for the primary active role."
    },
    "on-primary": {
      "$value": "#23251d",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "ink": {
      "$value": "#23251d",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "body": {
      "$value": "#4d4f46",
      "$type": "color",
      "$description": "Use for the body role."
    },
    "charcoal": {
      "$value": "#33342d",
      "$type": "color",
      "$description": "Use for the charcoal role."
    },
    "mute": {
      "$value": "#6c6e63",
      "$type": "color",
      "$description": "Use for the mute role."
    },
    "ash": {
      "$value": "#9b9c92",
      "$type": "color",
      "$description": "Use for the ash role."
    },
    "stone": {
      "$value": "#b6b7af",
      "$type": "color",
      "$description": "Use for the stone role."
    },
    "hairline": {
      "$value": "#bfc1b7",
      "$type": "color",
      "$description": "Use for the hairline role."
    },
    "hairline-soft": {
      "$value": "#dcdfd2",
      "$type": "color",
      "$description": "Use for the hairline soft role."
    },
    "on-dark": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on dark role."
    },
    "canvas": {
      "$value": "#eeefe9",
      "$type": "color",
      "$description": "Use for the canvas role."
    },
    "surface-soft": {
      "$value": "#e5e7e0",
      "$type": "color",
      "$description": "Use for the surface soft role."
    },
    "surface-card": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the surface card role."
    },
    "surface-doc": {
      "$value": "#fcfcfa",
      "$type": "color",
      "$description": "Use for the surface doc role."
    },
    "surface-dark": {
      "$value": "#23251d",
      "$type": "color",
      "$description": "Use for the surface dark role."
    },
    "link-blue": {
      "$value": "#1d4ed8",
      "$type": "color",
      "$description": "Use for the link blue role."
    },
    "link-teal": {
      "$value": "#1078a3",
      "$type": "color",
      "$description": "Use for the link teal role."
    },
    "accent-blue": {
      "$value": "#2c84e0",
      "$type": "color",
      "$description": "Use for the accent blue role."
    },
    "accent-blue-soft": {
      "$value": "#dceaf6",
      "$type": "color",
      "$description": "Use for the accent blue soft role."
    },
    "accent-red": {
      "$value": "#cd4239",
      "$type": "color",
      "$description": "Use for the accent red role."
    },
    "accent-red-soft": {
      "$value": "#f7d6d3",
      "$type": "color",
      "$description": "Use for the accent red soft role."
    },
    "accent-green": {
      "$value": "#2c8c66",
      "$type": "color",
      "$description": "Use for the accent green role."
    },
    "accent-green-soft": {
      "$value": "#d9eddf",
      "$type": "color",
      "$description": "Use for the accent green soft role."
    },
    "accent-purple": {
      "$value": "#7c44a6",
      "$type": "color",
      "$description": "Use for the accent purple role."
    },
    "accent-purple-soft": {
      "$value": "#e7d8ee",
      "$type": "color",
      "$description": "Use for the accent purple soft role."
    },
    "focus-ring": {
      "$value": "rgba(59,130,246,0.5)",
      "$type": "color",
      "$description": "Use for the focus ring role."
    }
  },
  "typography": {
    "display-xl": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "36px",
        "fontWeight": 700,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "24px",
        "fontWeight": 800,
        "lineHeight": 1.33,
        "letterSpacing": "-0.6px"
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "heading-lg": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "21px",
        "fontWeight": 700,
        "lineHeight": 1.4,
        "letterSpacing": "-0.5px"
      },
      "$type": "typography",
      "$description": "Typography style for heading lg."
    },
    "heading-md": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "20px",
        "fontWeight": 700,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading md."
    },
    "heading-sm": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "18px",
        "fontWeight": 700,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading sm."
    },
    "heading-sm-mixed": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "18px",
        "fontWeight": 600,
        "lineHeight": 1.56,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading sm mixed."
    },
    "body-md": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "body-strong": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "16px",
        "fontWeight": 600,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body strong."
    },
    "body-sm": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "15px",
        "fontWeight": 400,
        "lineHeight": 1.71,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body sm."
    },
    "body-sm-strong": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "15px",
        "fontWeight": 600,
        "lineHeight": 1.71,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body sm strong."
    },
    "body-xs": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.43,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body xs."
    },
    "caption-md": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "14px",
        "fontWeight": 700,
        "lineHeight": 1.71,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for caption md."
    },
    "caption-sm": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "13px",
        "fontWeight": 500,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for caption sm."
    },
    "caption-xs": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "12px",
        "fontWeight": 600,
        "lineHeight": 1.33,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for caption xs."
    },
    "utility-xs": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "12px",
        "fontWeight": 700,
        "lineHeight": 1.33,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for utility xs."
    },
    "link-md": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for link md."
    },
    "button-md": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "14px",
        "fontWeight": 700,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button md."
    },
    "button-sm": {
      "$value": {
        "fontFamily": "IBM Plex Sans Variable",
        "fontSize": "13px",
        "fontWeight": 500,
        "lineHeight": 1,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button sm."
    },
    "code-sm": {
      "$value": {
        "fontFamily": "ui-monospace",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.43,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for code sm."
    },
    "code-xs": {
      "$value": {
        "fontFamily": "Source Code Pro",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.43,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for code xs."
    }
  },
  "spacing": {
    "xxs": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xs."
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step sm."
    },
    "md": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "lg": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step lg."
    },
    "xl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step xl."
    },
    "xxl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step xxl."
    },
    "section": {
      "$value": "80px",
      "$type": "dimension",
      "$description": "Spacing step section."
    }
  },
  "radius": {
    "none": {
      "$value": "0px",
      "$type": "dimension",
      "$description": "Border radius none."
    },
    "xs": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Border radius xs."
    },
    "sm": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://posthog.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}