DS Studio
Crea un Koder Design System completo — no solo una paleta — sin escribir código. Forkea un sistema existente o parte de una semilla, deriva las seis familias de tokens, valida el contraste inline y exporta manifiesto + tokens. Determinista y client-side: el hash de la URL lleva toda tu sesión.
Entrada — semilla o fork
Parte de un color-semilla de marca, o forkea un design system existente como punto de partida editable.
El fork reproduce la semilla, el tipo y las selecciones (componentes/plantillas/iconos/a11y) del sistema de origen; los sistemas importados además superponen su conjunto de tokens publicado.
Derivar — seis familias de tokens
El color se deriva de la semilla (HCT, consciente de WCAG). El modo y la densidad escalan todo el sistema.
Semillas no-color — forma, espacio, tipografía y movimiento, cada una editable:
Seleccionar — componentes, plantillas, iconos y a11y
Elige lo que provee el design system. Los sistemas completos autoran un corpus; los solo-visual heredan el oficial.
Este es un sistema solo-visual — hereda el corpus oficial. La selección de componentes y plantillas está deshabilitada; solo se autoran sus tokens.
Validar — gate de conformidad
Cada par de color interactivo debe cumplir WCAG 2.2 AA (4.5:1). Un sistema por debajo de AA no puede publicarse como estable.
Exportar — manifiesto + tokens
Emite un directorio de design system válido: koder.designsystem.toml más un conjunto de tokens multi-lenguaje. Determinista — la URL reproduce exactamente esta exportación.
¿Listo para publicar? La etapa Publicar entrega el directorio exportado al Koder Hub.
Publicar — en el Koder Hub
Empaqueta el design system exportado como kpkg y publícalo en el Koder Hub. Elige su categoría y precio en el Hub; el icono y las vistas previas usan los assets de preview/ exportados.
Elevated card
Body text on accent-derived surface. The buttons below show your accent role plus its WCAG-aware on-accent text.
Surface 2
A muted container holding secondary content — typically a section, sub-card, or a list row that doesn't need the full elevation.
Display sample 32
Headline sample 22
Body sample 15 — verify legibility at the small sizes too; this is where contrast bugs hide.
Caption muted 12