Design System
Design System
Tokens, tipografia, espaçamento e componentes reutilizáveis para produtos Ascend e apps futuros.
Fonte de verdade visual compartilhada. Componentes falam em papéis semânticos (primary, muted, border). Temas de produto só trocam valores de token, nunca classes nos componentes.
Pacotes
| Package | Papel |
|---|---|
@ascend/tokens | Primitive → semantic → tema × mode (CSS + TS) |
@ascend/ui | Primitivos Radix/shadcn (Button, Dialog, Input, …) |
Como aplicar o tema
No layout do app:
<html data-brand="ascend" className={montserrat.variable}>Light/dark continua com a classe .dark (next-themes). Novos produtos mapeiam outro data-brand no package de tokens, sem fork de componentes.
Direção visual
- Linear-like: precisão, densidade controlada, minimalismo técnico
- Bordas hairline (
0.5px), raio global8px - Tipografia: Montserrat
- Ícones: Phosphor
- Motion: 150–250ms, easeOut
Comece por Foundations / Cor ou pelos componentes.
Para levar o DS a outro repositório sem npm público, veja Usar em outro repositório (pnpm ds:pack).