Design kit
Download the Koder Design tokens in the format your design tool or codebase needs. Import them into Figma or Penpot and iterate in your tool while staying in sync with code.
Code is the source of truth: specs → design-gen → these token files. Regenerate on every token change; re-import to sync.
Import into a design tool
The W3C DTCG file is the tool-agnostic design kit — colours, dimensions, durations and easings, typed for import.
| Format | Use case | Download |
|---|---|---|
| W3C DTCG | W3C Design Tokens — Penpot (native) + Figma (Tokens Studio plugin) | Download tokens.dtcg.json |
| Style Dictionary | Style Dictionary input — IDE plugins, CI checks | Download tokens.json |
Code formats
The same tokens for direct consumption in a codebase.
| Format | Use case | Download |
|---|---|---|
| CSS | CSS custom properties — drop into any web project | Download tokens.css |
| SCSS | SCSS variable map | Download tokens.scss |
| Rust | Rust module — Kroma / native consumers | Download tokens.rs |
| TypeScript | TypeScript type definitions | Download tokens.d.ts |
| Kotlin | Kotlin object — Android / KMP | Download tokens.kt |
| Swift | Swift enum — iOS / macOS | Download tokens.swift |
| Dart | Dart consts — Flutter (legacy) | Download tokens.dart |
Verge preset
The Verge product design system's own token export (distinct from the KDS site tokens above).
| Format | Use case | Download |
|---|---|---|
| Verge · CSS | Verge tokens as CSS custom properties | Download verge.css |
| Verge · Rust | Verge tokens as a Rust module | Download verge.rs |