Request Request Design System

Sobre

Fundação visual partilhada entre os produtos Request. Garante consistência de cores, spacing, tipografia e componentes base, sem obrigar cada equipa a reinventar o mesmo.

Estratégia

Tokens como fonte única da verdade

Cores, spacing, tipografia, radius e shadows vivem em JSONs. Qualquer alteração passa por aqui. Style Dictionary gera os outputs para as várias plataformas.

Componentes shadcn-style (copy/paste)

Não mantemos uma lib de componentes partilhada. Cada projecto é dono do seu código e copia os exemplos base. Evita manter 3 libs em sync entre Laravel/Blade, React e Vue.

Light mode only

Sem dark mode. Primária rose, neutros slate. Regras detalhadas em Guidelines.

Stack técnica

Style Dictionary v4

Transforma os tokens (JSON) nos vários outputs (CSS, JS/TS, Tailwind, JSON).
W3C DTCG format

Formato standard de design tokens ($value/$type). Portável entre ferramentas (Figma Tokens Studio, etc.).
Astro + Tailwind

Site de documentação estático, deploy para Cloudflare Pages.
pnpm workspaces

Monorepo com `packages/tokens` e `apps/docs` separados mas ligados.

Como funciona por baixo

  1. Tokens declarados em packages/tokens/src/*.json (formato W3C DTCG).
  2. Style Dictionary corre via pnpm build:tokens e gera 5 outputs (CSS, JS, TS types, JSON, Tailwind).
  3. Nova versão publicada no npm quando se faz push de uma tag tokens-vX.Y.Z (GitHub Action trata do resto).
  4. Projectos consumidores fazem pnpm add @request-labs/tokens e actualizam a dependência quando quiserem.
  5. Este site é regenerado automaticamente em cada push para main (Cloudflare Pages).

Contribuir

O código está em github.com/request-labs/design.request.pt. Para propor alterações:

  • Abrir um issue com o contexto (que token, porquê, onde surge a necessidade)
  • Mudanças estruturais (novos grupos de tokens, breakpoints) passam por decisão conjunta
  • PRs directos para ajustes pequenos (correcção de valores, novas shades)

Fluxo técnico e comandos locais: ver README.

Links úteis