NockerlDesign

What this is

Nockerl Design is an open source design framework. It is MIT licensed and free for anyone to use, commercially or otherwise.

It was built first for the Nockerl suite: Nockerl Voice, Nockerl Security and Nockerl Design, with many more to come. That is why it is opinionated rather than a neutral toolkit.

Three builds come out of one source:

• Android, as Kotlin and Jetpack Compose, on Maven Central.
• macOS, as a Swift package, through Swift Package Manager.
• Web, as React, on npm.

It is version 2.2.0 and still actively under construction. The Installation page has what to add to your build.

The products it dresses today:

Nockerl VoiceNockerl CtxMSNockerl SecurityNockerl Design

Voice is Swift on macOS, CtxMS and Security are in build, and this site is the first client of its own packages.

Tokens, not values

Every color, type ramp, space, radius, elevation and motion value is a token. Hardcoding a hex or a radius in a client is a bug: clients consume @dizyx/nockerl-tokens.

Cyan is the only accent

One brand anchor, cyan #0CC0DF, on mono surfaces. Warm tones are status signals, never decoration.

Depth without glow

Depth is a neutral drop shadow plus a top catch-light, lit from a single source above. No glows, no colored shadows. A colored box-shadow is a defect.

Three platforms, one spine

Brand expression is unified and interaction is platform-honest: web hover and focus ring, Android ripple and haptics, macOS pointer, each documented per component.

How it fits together

Source

• tokens/*.json

W3C DTCG, layered core to semantic

Build

• Style Dictionary

one build, three emitters

Outputs

• CSS custom properties
• Kotlin (Compose)
• Swift (SwiftUI)

generated, never hand-edited

Published

• @dizyx/nockerl-tokens
• com.dizyx.nockerl
• NockerlDesign (SPM)

one version line, semver

The pipeline turns one DTCG source of truth into per-platform outputs, publishes them as versioned packages, and this site documents the result: foundations, the design laws, and a page per component showing it across every platform with live examples, states, accessibility, and review status.

Where to go next

• Installation covers how clients consume the tokens.
• Principles sets out the point of view behind every decision.
• Design laws is the non-negotiable ruleset.
• Button is the gold-standard component reference page.
• Review queue lists every page tagged draft / in review / approved.