PAM design system · before / after

What PAM looks like today, and what the design system changes

Left of the bar is the running app on main. Right of the bar is the same screen drawn with the design system's tokens, text styles and components. Drag the bar to compare. Every number on this page was measured, in the browser for "today" and in the design file for "target".

Frontend 15495fd3Backend 72408e589Captured 5 Oct 202665 screen pairs41 drawn 5 Oct13 states with no target yet

The numbers

Across the same 12 signed-in screens on both sides. Green is better, red is worse. Two things get worse in the current designs, and they are listed here on purpose: they need fixing in the tokens before anyone builds from them.

Compare screens

Pick a screen, then drag the bar or use the arrow keys. The first 24 pairs have measurements under the image. The 41 pairs marked "drawn 5 Oct" are new target frames for screens that had no design; they are not measured yet.

TodayDesign system
Open target frame

States with no target design yet

These were captured from the app but have no matching frame in the design file. They are the gap list: each one needs a target before it can be compared.

What changes for developers

Type

  • 380 hard-coded pixel sizes in code today (text-[11px] and 12 other values); only 39 uses of the token scale.
  • Target screens use 7 sizes: 9, 10, 11, 12, 14, 18, 24. The half-pixel sizes (11.5, 12.5, 13.5) are gone.
  • 98% of target text layers sit on a named text style, so a size change is one edit.

Colour

  • Today text is black at six opacities (40–80%). Target text is bound to named tokens on 99% of layers.
  • About 150 raw Tailwind palette colours in code bypass the tokens (text-amber-600, bg-red-50).
  • Not solved yet: the subtle text token #8e8e8e is 3.3:1 on white and fails WCAG AA.

Icons

  • Code: all 239 icons already come from lucide-react through one barrel file.
  • Design file: 144 Lucide icons at 24px. The last 34 instances of five duplicate icons were moved to their Lucide twins on 5 Oct.
  • No hand-drawn icons remain in the design pages; brand logos are the only exception.

Controls and layout

  • Targets under 24×24px fall from 31% to 18%. Analytics still has 9 small ones.
  • Code has 237 hard-coded pixel spacings (63 distinct), 10 one-off z-index values and 8 one-off shadows.
  • The workflow canvas target is not finished: step cards are scaled down, giving 6.8–8.7px text and off-scale radii.

How this was measured

Today

  • Latest main built and run locally, signed in as a workspace owner with seeded data.
  • Chrome at 1440×900 (analytics at 1600×900). Counts come from computed styles of visible elements.
  • Contrast failures are from axe-core. Code counts come from 471 TSX files, excluding landing and docs.

Target

  • Frames exported from the PAM design system file; the top 900px of each frame was measured.
  • Contrast is estimated: text colour against white, skipping light text on dark fills. It is not an axe run.
  • Control sizes count instances of button, tab, input, select, switch, chip and navigation components.

Read with care

  • The two sides are measured with different tools, so treat small differences as noise.
  • Target frames often show more content than the local app has data for, which raises their text counts.
  • Target frames are designs, not shipped code. The numbers show what the system allows, not what is live.