@tsuki/brand (0.1.0)

Published 2026-05-20 11:55:30 +00:00 by dev

Set up this registry in your project .npmrc file:

@tsuki:registry=https://git.d-v.cc/api/packages/tsuki/npm/

To install the package using npm, run the following command:

npm install @tsuki/brand@0.1.0

or add it to the package.json file:

"@tsuki/brand": "0.1.0"

For more information on the npm registry, see the documentation.

Logo marks for the tsuki design system

@tsuki/brand

Logo marks for the tsuki design system. All marks derive from the design system's tokens — shu-500 (#9B3C30) for the signature pigment, kami-0 (#FAF8F4) for paper, sumi-0 (#15120E) for ink. Corner radius on the rounded-square mark is 18.75% (96 of 512), matching the system's --radius-lg proportion.

Install

# .npmrc
@tsuki:registry=https://git.d-v.cc/api/packages/tsuki/npm/
//git.d-v.cc/api/packages/tsuki/npm/:_authToken=${GITEA_NPM_READ_TOKEN}

pnpm add @tsuki/brand

Use

<script>
  // Vite/webpack/esbuild — fingerprinted URL, drop into <img> or <link>
  import markUrl from '@tsuki/brand/mark?url';
  import faviconUrl from '@tsuki/brand/favicon?url';

  // Raw SVG string — inline so it picks up `currentColor`
  import glyphSvg from '@tsuki/brand/glyph?raw';
</script>

<svelte:head>
  <link rel="icon" type="image/svg+xml" href={faviconUrl} />
</svelte:head>

<img src={markUrl} alt="tsuki" />
{@html glyphSvg}

Subpath exports are also available via the wildcard pattern: @tsuki/brand/files/mark.svg, etc.

Files

All SVGs live under files/. The tsuki- prefix is implied by the package name (@tsuki/brand) — when consumers import they write @tsuki/brand/files/mark.svg, not @tsuki/brand/files/tsuki-mark.svg.

File	Use for
`files/mark.svg`	Primary. shu square + kami glyph. Default on light or neutral surfaces.
`files/mark-dark.svg`	Dark-surface variant. sumi square + shu-400 glyph. Use against `--bg` in dark mode.
`files/mark-mono-black.svg`	Single-pigment: sumi square + kami glyph. Use when shu would clash with surrounding color.
`files/mark-mono-white.svg`	Inverse mono: kami square + sumi glyph. Use on photography, dark headers, etc.
`files/glyph.svg`	月 only, no background. Fill is `currentColor` — inherits text color. Inline it (don't reference via `<img>`) so it picks up the surrounding theme.
`files/wordmark.svg`	Horizontal lockup: mark + lowercase `tsuki`. Use in headers, README banners, and document footers where the mark alone is too small to read as identity.
`files/favicon.svg`	32×32 favicon. Heavier weight and tighter radius tuned for small sizes.

Construction

viewBox is 0 0 512 512 for square marks, 0 0 500 200 for the wordmark.
Glyph rendered via <text> with the Noto Serif JP fallback stack. The first available font wins; on systems without Noto Serif JP installed, Hiragino Mincho (macOS), Yu Mincho (Windows), or Songti SC will substitute. All render the 月 character with the same essential structure.
For distribution outside the web (print, third-party brand portals, app icon pipelines), outline the text to paths first. Quickest path: open in Figma or Inkscape, select the <text> node, and choose Outline stroke / Object to Path, then re-export.

Do

Pair the primary mark with at least 1× its corner radius of clear space on every side.
Use the mono variants whenever the mark sits on shu itself, on photography, or inside another colored container.
Scale uniformly. The mark is square; do not stretch.

Don't

Don't recolor the square to non-system pigments. shu, sumi, kami only.
Don't apply drop shadows, glows, or grain to the marks. The design system uses negative space — ma · 間 — as its depth language; the brand mark inherits that restraint.
Don't typeset "tsuki" in any face other than the system serif. If the wordmark needs a sans setting (rare), redraw using the system sans, don't substitute arbitrarily.
Don't add the small rectangular speckles from earlier sketches — the clean mark is canonical.

Surface placement

App icons / OS tiles — files/mark.svg. Export to PNG at 512, 256, 128, 64, 32.
Web favicon — files/favicon.svg (with a 32×32 PNG fallback for older browsers).
README banners, GitHub social card — files/wordmark.svg.
CLI splash / TUI — the glyph rendered as a single Unicode character (月) is enough. No raster needed.
Document corners (PDFs, decks) — files/glyph.svg at ~24px, set in --ink-muted.

Releasing

export GITEA_NPM_TOKEN=<your-gitea-personal-access-token>
npm version <patch|minor|major>
npm publish                       # honors publishConfig.registry
git push --follow-tags

The repo's .npmrc reads GITEA_NPM_TOKEN from the environment — never commit the token. The publishConfig.registry in package.json pins the publish target.

Details

npm

2026-05-20 11:55:30 +00:00

15

latest

3.1 KiB

Assets (1)

brand-0.1.0.tgz 3.1 KiB

Versions (1) View all

0.1.0

2026-05-20