Brand mark / logo

In review

Live · web

Nockerl brand mark

The mark: favicon (16) · chip (20) · top bar (28) · card (40) · hero (88)

Monochrome: one mark, light ink on dark · dark ink on light

On dark, light ink

On light, dark ink

The mark is a single-ink silhouette that inherits currentColor. Set the surface ink and the mark follows. The apps pick the variant by the active surface luminance; there is no cyan logo.

On surfaces: resting ground · elevated card (follows the page theme)

NockerlOn ground

NockerlOn elevated card

Clearspace: keep a margin of half the mark height clear on every side

Minimum size: never render the mark below 16px tall

16px

24px

32px

Wordmark lockup: mark + “Nockerl” (sans token · 200) · horizontal & stacked

NockerlNockerlNockerl

Product lockup: “Nockerl” 200 + product 400 in cyan · sentence case

NockerlVoiceNockerlDashboardNockerlSecurity

One monochrome mark, no second hue. Every instance above is the shared NockerlLogo painting with currentColor, so it tracks the surface ink and the page theme. The geometry is the canonical three-peaks shape shared by Android, Voice, and web. The island is live.

Code

TypeScriptKotlinSwift

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform. Spec + live demo,
// not yet exported from @dizyx/nockerl-react; promotion is tracked.)
// The mark is a single-ink SVG silhouette. It inherits currentColor and recolors per
// theme. MONOCHROME everywhere (the cyan prism was rejected); cyan
// lives only in the product word of the lockup.

export function TopBar() {
  return (
    <header className="topbar">
      {/* Home link: accessible name + focus-visible ring */}
      <BrandMark lockup="horizontal" tone="mono" size={28} title="Nockerl home" asLink href="/" />
    </header>
  );
}

// Mark only (favicon / chip), and a knockout sitting ON a cyan fill:
<BrandMark lockup="mark" tone="mono" size={20} title="Nockerl" />
<div className="cta cta--cyan"><BrandMark lockup="stacked" tone="knockout" size={40} /></div>

// Android: Jetpack Compose (canonical). The mark ships as vector drawables
// (res/drawable/ic_nockerl_logo_{light,dark}.xml, the three-peaks geometry),
// rendered as an Icon. There is no NockerlBrandMark composable yet; the
// GlobalTopBar (core/ui/GlobalTopBar.kt) picks the variant by the ACTIVE app
// palette's luminance so the mark never washes out, and tints Unspecified so the
// drawable's own fills win.
import androidx.compose.material3.Icon
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.luminance
import androidx.compose.ui.res.painterResource
import com.nockerl.app.core.theme.LocalNockerlColors

val colors = LocalNockerlColors.current
val logoRes =
    if (colors.canvas.luminance() > 0.5f) R.drawable.ic_nockerl_logo_light
    else R.drawable.ic_nockerl_logo_dark

Icon(
    painter = painterResource(id = logoRes),
    contentDescription = "Nockerl",
    modifier = Modifier.size(28.dp),
    tint = Color.Unspecified, // use the drawable's own three-peak fills
)

// macOS / iOS: SwiftUI, from the NockerlDesign package (the packaged canon;
// Voice's local NockerlLogo.swift retires on adoption). Three overlapping peaks
// in three DISTINCT grayscale shades, theme-aware by default, or force an ink
// ladder with `tone`.
import NockerlDesign

// In a lockup (mark + wordmark in the brand font):
HStack(spacing: 8) {
    NockerlLogo(size: 28, accessibilityLabel: nil)  // decorative: the wordmark names it
    Text("Nockerl")
        .font(.system(size: 18, weight: .bold))
}

// Force an ink ladder (e.g. on a fixed-dark chrome surface):
NockerlLogo(size: 20, tone: .onDark)

// Menu-bar status item, a template NSImage the system tints; the mark's
// depth ladder survives as per-peak alpha:
MenuBarExtra { /* … */ } label: { Image(nsImage: NockerlLogo.statusItemImage()) }

Parameters

TypeScriptKotlinSwift

Prop	Type	Default	Description
lockup	'mark' | 'horizontal' | 'stacked'	'mark'	Mark only · mark + wordmark in a row (wordmark baseline-aligned) · mark over wordmark.
tone	'mono' | 'knockout'	'mono'	Single-ink silhouette that inherits currentColor (matches the apps, MONOCHROME; the faceted cyan prism is retired) · knockout = one flat --color-on-accent for sitting ON a cyan / photo fill.
size	number	40	Rendered mark height in px; the wordmark scales from it. The one geometry knob.
title	string	'Nockerl'	Accessible name (and the link text / aria-label when asLink).
asLink	boolean	false	Render as a real <a> home link: focus-visible cyan ring, keyboard-operable, gentle press. Otherwise decorative (aria-hidden).

There is no NockerlBrandMark composable yet. The mark is the ic_nockerl_logo_{light,dark} vector drawables rendered via Icon. These are the relevant inputs.

Parameter	Type	Default	Description
painter *	Painter	n/a	painterResource(R.drawable.ic_nockerl_logo_light | _dark): the three-peaks vector, variant picked by the active palette luminance.
contentDescription *	String?	n/a	"Nockerl" for an informative mark; null when purely decorative beside a label.
modifier	Modifier	Modifier	Sizing. The top bar uses Modifier.size(28.dp).
tint	Color	Color.Unspecified	Unspecified keeps the drawable's own three-peak fills; a real color makes it a single-ink silhouette.

NockerlLogo is a SwiftUI View on the native 8:7 mark ratio (16 20 64 56 viewBox). size is the mark HEIGHT. NockerlLogo.statusItemImage(size:) is the menu-bar template image (macOS).

Parameter	Type	Default	Description
size	CGFloat	24	The mark height; the width keeps the native 8:7 ratio.
tone	NockerlLogoTone?	nil	Force an ink ladder with .onDark (light ink) / .onLight (dark ink); nil resolves from the color scheme.
accessibilityLabel	String?	"Nockerl"	The a11y name; pass nil when a sibling wordmark names the lockup (the mark turns decorative).
statusItemImage(size:)	static → NSImage	size: 16	macOS template image for MenuBarExtra / NSStatusItem, system-tinted; the depth ladder survives as per-peak alpha.

Cross-platform drift (tracked for reconciliation)

The geometry is unified: the same three-peaks mark on viewBox="16 20 64 56" (peaks at apex y = 36 / 24 / 32) ships on Android, Voice, and web. The divergences:

• Color (resolved): the brand mark is MONOCHROME everywhere, a single-ink silhouette that adapts to context (light ink on dark, dark ink on light, luminance-picked). The cyan prism direction is rejected; cyan lives only in the lockup’s product word (Law 11), never the mark itself. All three shipped platforms already render the mono mark.
• No vector wordmark: “Nockerl” is set typographically in the brand font (the sans token, bold). There is no exported wordmark glyph. The lockups above are mark + type.
• No shared mark component: web would expose <BrandMark> (@dizyx/nockerl-react, not yet shipped); Voice has NockerlLogo; Android has only the drawables + Icon. One named component should win.