Kit de diseño
Descarga los tokens de Koder Design en el formato que necesita tu herramienta de diseño o codebase. Impórtalos en Figma o Penpot e itera en tu herramienta manteniendo la sincronía con el código.
El código es la fuente de la verdad: specs → design-gen → estos archivos de tokens. Regenera en cada cambio de token; re-importa para sincronizar.
Importar en una herramienta de diseño
El archivo W3C DTCG es el kit de diseño tool-agnostic — colores, dimensiones, duraciones y easings, tipados para importar.
| Formato | Caso de uso | Descarga |
|---|---|---|
| W3C DTCG | W3C Design Tokens — Penpot (nativo) + Figma (plugin Tokens Studio) | Descargar tokens.dtcg.json |
| Style Dictionary | Entrada Style Dictionary — plugins de IDE, checks de CI | Descargar tokens.json |
Formatos de código
Los mismos tokens para consumo directo en un codebase.
| Formato | Caso de uso | Descarga |
|---|---|---|
| CSS | CSS custom properties — para cualquier proyecto web | Descargar tokens.css |
| SCSS | Mapa de variables SCSS | Descargar tokens.scss |
| Rust | Módulo Rust — Kroma / consumidores nativos | Descargar tokens.rs |
| TypeScript | Definiciones de tipo TypeScript | Descargar tokens.d.ts |
| Kotlin | Objeto Kotlin — Android / KMP | Descargar tokens.kt |
| Swift | Enum Swift — iOS / macOS | Descargar tokens.swift |
| Dart | Consts Dart — Flutter (legado) | Descargar tokens.dart |
Preset Verge
La exportación de tokens del propio design system de producto Verge (distinta de los tokens del sitio KDS de arriba).
| Formato | Caso de uso | Descarga |
|---|---|---|
| Verge · CSS | Tokens Verge como CSS custom properties | Descargar verge.css |
| Verge · Rust | Tokens Verge como módulo Rust | Descargar verge.rs |