Vincent Ang
Contact

Okeytokey · Design token management · Active public preview

Design tokens,
made easy.

A workspace for creating and managing design tokens in files you control—carrying values, aliases, modes, and the decisions behind them between teams, tools, and production code.

Open OkeytokeyView source ↗
primitivecolor.blue.500semanticcolor.action.primarycomponentbutton.background
Okeytokey token inventory showing primitive colors, semantic groups, modes, and spacing values.
Token inventoryLight and dark modes

The working surface: token sets and themes remain legible while aliases, validation, transforms, and integrations stay close at hand.

The problem

Design tokens promise one source of truth. The workflow is still fragmented.

Token decisions are spread across design tools, repositories, plugins, spreadsheets, and export scripts. During those handoffs, aliases become difficult to trace, modes drift apart, and the reasoning behind a value disappears.

Many tools expose tokens as swatches or generated files. Teams need to author, explain, validate, transform, and ship the connected model—without surrendering the source or translating it by hand at every boundary.

The product vision

A token system teams can understand, govern, and ship.

Okeytokey is becoming a file-first, DTCG-native workspace over a headless core. The token graph stays portable and inspectable while a focused studio connects authoring, decision context, modes, transforms, design tools, Git, and delivery.

Active thesis · public preview. This is not a finished platform presented as one. The current build proves the core workflow; the work now is resolving the product questions that determine whether it can serve a real team.

Proven in the current build
Authoring · modes · scoped AI proposals · code export · guarded Git synchronization
Working through now
Review flows · design-to-code round trips · alias impact · collaborative governance

Product workflow

From token decision to delivery.

Each step preserves the model behind the tokens instead of reducing the system to a pile of generated values.

  1. 01 · Define

    Edit values without losing context.

    Inspect a token in place, compare mode-specific values, tune color in multiple formats, and keep guidance beside the decision it explains.

    Okeytokey token editor showing color controls, light and dark values, description, and decision context.
    Token value editorDecision context included
  2. 02 · Augment

    Use AI without surrendering control.

    Choose a provider—cloud or local—then send only the selected token context. AI proposes semantic aliases; a person decides what enters the system.

    Okeytokey AI provider dialog with bring-your-own-key and local model options.
    Provider controlBYOK or local
    Okeytokey dialog for generating a scoped semantic token proposal from selected primitives.
    Semantic proposalScoped context only
  3. 03 · Produce

    Turn the model into usable code.

    Export platform-ready tokens while retaining references, mode choices, and the structure engineers need to understand the output.

    Okeytokey CSS export dialog showing generated custom properties and export controls.
    CSS exportReferences preserved
  4. 04 · Distribute

    Connect the source of truth to delivery.

    Synchronize token files through GitHub with dry runs, protected paths, and explicit repository targets before anything changes in production.

    Okeytokey GitHub synchronization dialog with repository, branch, protected path, dry-run, push, and pull controls.
    GitHub synchronizationDry-run before push

Product architecture

A focused studio over a headless core.

The interface is one client of a stricter system underneath it. Parsing, resolution, validation, synchronization, and transformation remain independently testable and reusable.

SurfacesWeb studioFigma pluginCLI
CapabilitiesSyncTransformsAI proposals
CoreParseResolveValidateDiffRefactor
ContractDTCG schemaTyped boundaries

Engineering proof

The system is tested at the scale it claims to support.

≥90%
Core-engine coverage gate
10,000
Token virtualization benchmark
AA
Automated WCAG 2.1 checks on key screens
0
Allowed circular package dependencies