KDLS Design System

@kenlo/kdls-design-system — biblioteca de componentes React + tokens da Kenlo.

Estrutura

kdls-design-system/
├── foundations/     # tokens.scss/tokens.css (fonte única de tokens) + Scrollbar (utilitário CSS)
├── components/      # biblioteca de componentes React (em construção)
├── portal/          # app de documentação interativa (playgrounds)
├── docs/            # PATTERNS.md (receitas de UI)
├── .claude/         # CLAUDE.md (índice), component-rules.md, component-standard.md, tokens-reference.md (regras)
└── scripts/         # geradores (ex.: styles.css, kdls-manifest.json)

Manifesto — o catálogo que as máquinas leem

kdls-manifest.json descreve este design system num arquivo só: os 55 componentes, as 696 props com tipo, padrão, descrição e exemplo, os 381 tokens, e a linha de import exata de cada símbolo (import type quando é um tipo, e não um componente).

É gerado, nunca escrito à mão — npm run gen:manifest, a partir das mesmas fontes que uma pessoa lê: components/, portal/src/playground-utils/props-tables.ts, foundations/tokens.css e o package.json. A esteira roda --check em toda merge request: se alguém mexer numa prop e não regenerar, o pipeline reprova. Um catálogo desatualizado é pior que nenhum — ele responde errado com a mesma confiança.

Serve para o Kenlo Brain responder "preciso de um seletor de data" com o componente, as props e a linha de import, em vez de um resultado de busca. Está no pacote npm (@kenlo/kdls-design-system/manifest.json) e publicado junto do portal, onde pode ser lido sem credencial nenhuma.

O manifesto também reporta a própria defasagem, no campo drift: componentes sem tabela de props (invisíveis para uma máquina) e tabelas sem componente correspondente.

Tokens

Os tokens ficam em foundations/tokens.css como CSS custom properties (var(--spacing-4), var(--color-primary-50)), com auto-inversão light/dark. Escala de espaçamento em múltiplos de 4px. Catálogo completo em .claude/tokens-reference.md.

Portal

npm run dev sobe o portal de documentação, com os playgrounds de cada componente e as páginas de fundação (cores, tipografia, espaçamento, grid, ícones).

Status

Publicado no npm como @kenlo/kdls-design-system.