Vellumwire DS: Um sistema de tokens em que cada cliente muda uma camada
Um sistema de tokens em que cada cliente muda uma camada
Todo cliente novo começava refazendo o que já existia.
Cada projeto começava com uma biblioteca de componentes refeita do zero, mesmo quando a lógica não tinha mudado. O custo real aparecia no handoff: nomes novos para interpretar, espaçamentos para conferir, casos de borda sem documentação. Faltava uma camada entre componente e marca.
Arquitetura
Core, Palette, Brand e Semantic
A estrutura fica fixa. As decisões do cliente moram na Brand, e os componentes só leem a Semantic.
Paleta
Rampas de cor prontas antes de qualquer cliente
Toda rampa segue a mesma estrutura de 25 a 950, então dar a marca de um cliente é mapear as cores dele em rampas que já existem. Sete das oito rampas, uma por papel:
Brand
Os mesmos componentes em três marcas
Um card, um botão, um campo e badges sob três marcas de cliente. Mudam rampa, tipografia e raio, e o código do componente continua o mesmo.
Componentes
Estados dos componentes
Botões, controles de formulário e feedback, cada um com suas variações e estados, gerados pelo mesmo código sob três camadas de marca.
Semantic
Componentes usam nomes de papel, como border.error
border.error significa a mesma coisa qualquer que seja a rampa do cliente. Uma visão parcial do conjunto no modo escuro:
Responsivo
Os breakpoints estavam nos tokens desde o início
Tokens de tamanho e tipo resolvem por breakpoint desde o início. Quando a Instivo precisou de uma tela mobile de estoque no meio do projeto, ela usou os mesmos tokens.
Em produção
Em produção desde 2023
A arquitetura começou na Instivo em 2023, onde absorveu uma tela mobile que nunca esteve no escopo. Hoje é a base de todo build da Vellumwire, que o Afonso implementa e hospeda.
- 4camadas: Core, Palette, Brand, Semantic
- 8rampas de cor prontas antes de qualquer cliente
- 1camada alterada para mudar a marca de um projeto