Nockerl Design

What this is

Nockerl Design is the single design framework for all of Nockerl, the owner and publisher of design tokens, components, and this documentation site. Every product consumes it as a versioned dependency, across web, Android (Jetpack Compose), and Swift. A remodel here ships to every client via a version bump, and no client ever re-invents a design value.

The products it dresses today are Nockerl Voice (Swift on macOS), Nockerl CtxMS, and Nockerl Security, alongside the framework’s own documentation site. Each one has an icon in this repository under logos/app-icons/, so a product consumes its own brand assets from here rather than keeping a private copy.

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.