Brand assets

Overview

nikcli ships three pixel wordmark variants, all derived from a single master (packages/mobile/assets/wordmark.png). The web package, the mobile app, and the Studio / dashboard reuse the same files so the brand stays consistent across surfaces.

Download the brand kit

One zip, every PNG the docs and apps serve, plus a README.md and a MANIFEST.csv with byte sizes. Filenames and content match packages/mobile/assets/; the un-suffixed names (icon.png, wordmark.png, splash.png) are the masters used by desktop shells and store pipelines, and they are duplicated as the dark variant so theme-aware callers can pin a stable name.

Or download individual files

Same rasterizations, one PNG at a time. Useful when you only need the wordmark, the favicon, or a specific dark / light pairing.

wordmark-dark.png

632×206 · Dark surface

Download wordmark-dark.png

wordmark-light.png

632×206 · Light surface

Download wordmark-light.png

wordmark.png

632×206 · Master

Download wordmark.png

icon.png

1024×1024 · Default

Download icon.png

icon-dark.png

1024×1024 · Dark

Download icon-dark.png

icon-light.png

1024×1024 · Light

Download icon-light.png

adaptive-icon.png

1024×1024 · Default

Download adaptive-icon.png

adaptive-icon-light.png

1024×1024 · Light

Download adaptive-icon-light.png

app-icon-mark.png

128×128 · Default

Download app-icon-mark.png

app-icon-mark-light.png

128×128 · Light

Download app-icon-mark-light.png

favicon.png

48×48 · Default

Download favicon.png

favicon-light.png

48×48 · Light

Download favicon-light.png

splash.png

1024×1024 · Default

Download splash.png

splash-dark.png

1024×1024 · Dark

Download splash-dark.png

splash-light.png

1024×1024 · Light

Download splash-light.png

bun run --cwd packages/web build:brandkit

Wordmark variants

All three PNGs share the same dimensions: 632 × 206 pixels at native scale, RGBA, non-interlaced. The intrinsic aspect ratio (≈ 3.07:1) lets us compute width from a chosen height with width = height × (632 / 206).

Theme switching

Every consumer switches the wordmark variant using the same pattern: render one image for the light theme, one for the dark theme, and toggle visibility through CSS.

Web (Tailwind / Astro)

Tailwind's dark mode is configured with the [data-theme="dark"] selector in tailwind.config.mjs. Two images are emitted, only one is visible at a time:

<img src="/brand/wordmark-light.png" class="h-8 w-auto dark:hidden" />
<img src="/brand/wordmark-dark.png"  class="h-8 w-auto hidden dark:block" />

The navbar, footer, and the dashboard connect screen all use this pattern.

Mobile (React Native)

components/layout/BrandMark.tsx consumes the same files through useAppTheme() and chooses the variant at render time:

import { Image } from "react-native"
import { useAppTheme } from "@/lib/theme"

const WORDMARK_DARK = require("@/assets/wordmark-dark.png")
const WORDMARK_LIGHT = require("@/assets/wordmark-light.png")

export function BrandMark({ height = 18 }: { height?: number }) {
  const { isDark } = useAppTheme()
  const width = Math.round(height * (632 / 206))
  return (
    <Image
      source={isDark ? WORDMARK_DARK : WORDMARK_LIGHT}
      style={{ width, height }}
      resizeMode="contain"
      accessibilityLabel="NIKCLI"
    />
  )
}

ScreenBrandHeader wraps the brand mark in a screen-aware container used by the Sessions, Repos, and More tabs.

Where the assets live

Usage in code

Navbar (web)

The docs navbar uses a single wordmark link, no icon plate. Both variants are rendered and swapped by Tailwind's dark: selector:

<a href="/" class="group flex items-center shrink-0" aria-label="nikcli home">
  <img src="/brand/wordmark-light.png" alt="nikcli" width="158" height="52"
       loading="eager" decoding="async" class="h-8 w-auto dark:hidden" />
  <img src="/brand/wordmark-dark.png"  alt="nikcli" width="158" height="52"
       loading="eager" decoding="async" class="h-8 w-auto hidden dark:block" />
</a>

loading="eager" and the explicit width/height attributes keep the brand from shifting the layout while the rest of the page streams.

Footer

Footer wordmarks are smaller (height 20 px instead of 32 px) to match the typographic scale of the copyright line. The same two-image swap is used.

Dashboard connect screen

packages/web/src/dashboard/components/DashboardShell.tsx uses the wordmark at h-10 (40 px) so the brand reads clearly above the connect form. The screen renders both variants and lets dark: choose.

Do and don't

Source anchors