design-tokenslisted

# Design tokens and the real design system Every repo has a **documented** design system and a **real** one. New code that follows the documented one while the surrounding forty files follow the real one produces a feature that looks subtly wrong and reviews as correct. ## Find the source of truth ```bash lazysitter fe-index stack # what recon detected lazysitter fe-index signals --rule STYLE # where the repo already violates it ``` Token sources, in the order they usually appear: CSS custom properties (a `:root` block or a theme file) · a Tailwind theme config · a vanilla-extract/Stitches/Panda theme · a TS constants file. **Two sources is a migration signal.** Which is canonical for new code is a `fact` question with a real answer — raise a FACT-BLOCK rather than picking one. Guessing here splits the design system further. ## Read every scale, not just the palette The ones nobody documents are where new code most often invents a value: | scale | why it matters | |---|---| | **colour** | theming and dark mode depend entirely on it | | **spacing** | an off-scale gap is instantly visible next to on-scale siblings | | **radius** | mismatched corners read as a different component library | | **shadow / elevation** | ad-hoc shadows destroy the depth hierarchy | | **z-index** | the least documented and the most fought over | | **typography** | size, weight, line-height, and the relationships between them | | **breakpoints** | a one-off media