Kit de design
Baixe os tokens do Koder Design no formato que a sua ferramenta de design ou codebase precisa. Importe no Figma ou Penpot e itere na sua ferramenta mantendo sincronia com o código.
O código é a fonte da verdade: specs → design-gen → estes arquivos de token. Regenere a cada mudança de token; re-importe pra sincronizar.
Importar numa ferramenta de design
O arquivo W3C DTCG é o kit de design tool-agnostic — cores, dimensões, durações e easings, tipados pra import.
| Formato | Caso de uso | Download |
|---|---|---|
| W3C DTCG | W3C Design Tokens — Penpot (nativo) + Figma (plugin Tokens Studio) | Baixar tokens.dtcg.json |
| Style Dictionary | Entrada Style Dictionary — plugins de IDE, checks de CI | Baixar tokens.json |
Formatos de código
Os mesmos tokens pra consumo direto num codebase.
| Formato | Caso de uso | Download |
|---|---|---|
| CSS | CSS custom properties — pra qualquer projeto web | Baixar tokens.css |
| SCSS | Mapa de variáveis SCSS | Baixar tokens.scss |
| Rust | Módulo Rust — Kroma / consumidores nativos | Baixar tokens.rs |
| TypeScript | Definições de tipo TypeScript | Baixar tokens.d.ts |
| Kotlin | Objeto Kotlin — Android / KMP | Baixar tokens.kt |
| Swift | Enum Swift — iOS / macOS | Baixar tokens.swift |
| Dart | Consts Dart — Flutter (legado) | Baixar tokens.dart |
Preset Verge
O export de tokens do próprio design system de produto Verge (distinto dos tokens do site KDS acima).
| Formato | Caso de uso | Download |
|---|---|---|
| Verge · CSS | Tokens Verge como CSS custom properties | Baixar verge.css |
| Verge · Rust | Tokens Verge como módulo Rust | Baixar verge.rs |