CorrectByDesign
A standard for agent-ready design systems Text and diagrams CC BY 4.0
← The Index
System 2 of 10
PostHog Inc., US · React, inside the product
Pinned 2026-09-09

PostHog Lemon UI.

PostHog's own product code actually reaches for its design system, and it shows: adherence here is the strongest measured in the field, and legibility is carried by more agent context than any other system in the index. The token layer is solid but not complete, with a share of colour and size values still written by hand rather than drawn from it. It could not be trialled, because the published package is a placeholder rather than something an agent could install from scratch. Measured at frontend/src/lib/lemon-ui.

1Scores

What the instrument measured.

8Single source · strong320 distinct token(s) across 28 sources; 68% of colour/size references in system source resolve to a token; dark-mode handling is generated.
10Legibility · systematic65 of the 76 components found in system source carry documentation in some form (a head comment, a colocated doc artifact, or a docs/ entry). Scored from what is in the repository. Documentation held outside it (e.g. Confluence, Notion, Figma) cannot be detected and is neither credited nor penalised.
10Adherence · systematic12530 of 12808 application file(s) gated against the design system's own contract; 92% of style declarations resolve to a token.
9.3Mean of 3of measured
—Constraintnot computed by this instrument: scoring it requires parsing component APIs per framework, which is done in the deep audit of a single system rather than across a field
—Fidelitynot computed by this instrument: scoring it requires parsing component APIs per framework, which is done in the deep audit of a single system rather than across a field
—Completenessrequires a live agent run: a gap only exists relative to something someone tried to build
TrialNot trialled
2What the instrument read

Measured against a pinned commit.

Repository
PostHog/posthog
Revision
14c844b27667, committed 2026-09-08
System directory
frontend/src/lib/lemon-ui
Components found
76, of which 65 carry documentation and 55 have a colocated doc artifact
Agent context
5 context files, 93 skills
Tokens
320 distinct, across 28 sources (25 authored); dark mode generated
Adherence surface
12,808 files outside the system, graded first-party: the PostHog product frontend.
3Findings

What the counts point at.

Each finding carries its count, its severity and up to three file references. A finding on a property that was not banded is still a finding; it is reported without a score.

Single source8
182 hardcoded colour and size values in component sourcemajor

The design system's own component source hardcodes colour and size values instead of referencing its own tokens. This happens in 182 of 560 total colour/size references in system source (32.5%), so an agent copying that file as a pattern copies the hardcoding along with it.

  • frontend/src/lib/lemon-ui/LemonColor/utils.ts:7 #FFC0CB
  • frontend/src/lib/lemon-ui/icons/icons.tsx:49 #E5E7E0
  • frontend/src/lib/lemon-ui/LemonTree/LemonTree.tsx:349 5px
25 separate places tokens are declaredmajor

Design tokens are declared in more than one place in this repository's own authored source, so a value changed in one must be kept in agreement with the others by hand.

  • products/desktop/packages/ui/src/styles/globals.css css, 131 token(s)
  • products/desktop/packages/quick-ask/src/panel/quick-ask.css css, 32 token(s)
  • frontend/src/scenes/themes/CustomCssScene.tsx css-in-js, 26 token(s)
Legibility10
11 undocumented componentsmajor

Some components carry no documentation an agent could find. That is 11 of the 76 components found in system source, with no head comment on their own source, no colocated doc artifact matching their name, and no docs/ entry, so an agent must reverse-engineer their contract from implementation alone.

  • frontend/src/lib/lemon-ui/LemonTable/BulkSelectionBar.tsx
  • frontend/src/lib/lemon-ui/icons/categories.ts
  • frontend/src/lib/lemon-ui/icons/icons.tsx
Adherence10
1,631 hardcoded colour valuesmajor

The application hardcodes colour values instead of using the design system's own tokens, so an agent editing nearby code has no signal that a token exists and will likely repeat the pattern.

  • frontend/src/lib/KeaDevTools.tsx:322 rgba(0,0,0,0.12)
  • products/desktop/apps/mobile/src/lib/theme.ts:12 #f2f3ee
  • frontend/src/queries/nodes/DataVisualization/Components/Heatmap/heatmapUtils.ts:5 #E2E8F0
11 components that duplicate one the system already shipscritical

The application defines its own component under the same name as one the design system already ships. This happens for 11 of the 225 component names the design system exports, so an agent importing that name by convention can silently get the wrong implementation.

  • common/hogvm/typescript/src/constants.ts DEFAULT
  • docs/onboarding/logs/nextjs.tsx:140 GET
  • frontend/src/queries/nodes/WebVitals/definitions.ts ICON
4The trial

Not trialled.

The trial requires a system that can be installed from its own documentation into a clean scaffold. This one cannot be, because its package, @posthog/lemon-ui, is a 0.0.0 placeholder published in 2022 with no real dist. The system is consumable only inside the PostHog repository, so it cannot be installed from its own documentation into the trial scaffold. It keeps its row in the static index with that reason stated, per the standing rule.

5Reproduce it

Clone the repository at the revision above, point the instrument at the system directory, and the same numbers come out. The field manifest, the run script and the full payload this page was built from are committed beside it. Methods.