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

// 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 in adjudication B19); 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

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 per adjudication B19; 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`		`painterResource(R.drawable.ic_nockerl_logo_light \| _dark)`: the three-peaks vector, variant picked by the active palette luminance.
`contentDescription` *	`String?`		"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.

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 in [adjudication 2026-07-02 · B19]): 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.