Design at southleft.
73 production components, three tiers of design tokens, light and dark themes. Built on Lit web components with React wrappers, organized by atomic design.
Atoms make molecules. Molecules make organisms.
Indivisible primitives — buttons, inputs, badges, icons. Each maps to one token contract.
Atoms bonded into function — search fields, alerts, cards, selects, toasts.
Full sections of interface — headers, footers, layout and theme hosts.
Measured, not asserted.
Every number below is generated at build time from the artifact that produced it — the Figma parity manifests and an axe-core run over the component library's stories. Where something has not been measured, this says so instead of leaving it blank.
- BOTH CHANGED
- 7
- FIGMA AHEAD
- 7
- NOT TRACKED
- 3
- CODE AHEAD
- 2
- NOT IN FIGMA
- 1
- IN SYNC
- 1
24 of 24 mapped Figma sets observed, last read 2026-09-03.
- TOKEN PROPERTIES REDECLARED
- 126
- SCOPED BLOCKS
- dark · light · base
Declared by project/southleft.css, this system's own stylesheet, over the base token bundle rather than replacing it. Everything not listed resolves to the shared value.
- CLEAN COMPONENTS
- 67/67
- STORIES CHECKED
- 500
- STRUCTURAL RULES FAILING
- 0
- CONTRAST RULES FAILING
- 16
- STORIES UNMEASURED
- 0
wcag2a + wcag2aa + wcag21a + wcag21aa + wcag22aa on 2026-09-08. The CI gate excludes color-contrast; this run does not. Measured on the library's own stories, under the reference brand — not per brand.
$ pnpm add @southleft/@southleft/al-web-components