Cinch brand

Canonical identity primitives for Cinch. This package intentionally contains only the logo, wordmark treatment, color tokens, and browser icon assets. Product UI components do not belong here.

Install

npm install @cinchme/brand

React

import { CinchCssLockup, CinchLockup, CinchMark } from "@cinchme/brand/react";
import "@cinchme/brand/tokens.css";
import "@cinchme/brand/styles.css";

export function AppHeader() {
  return <CinchLockup size={34} />;
}

export function AppIcon() {
  return <CinchMark size={24} label="Cinch" />;
}

export function SvgFreeHeader() {
  return <CinchCssLockup size={34} />;
}

Use tone="dark" on dark surfaces. Omit label when adjacent text already names Cinch; the mark then renders as decorative.

CinchMark and CinchLockup use the canonical vector geometry. CinchCssMark and CinchCssLockup reproduce the identity with CSS borders for surfaces that intentionally avoid inline SVG.

Framework-neutral usage

Import @cinchme/brand/tokens.css and use the packaged assets:

• @cinchme/brand/assets/mark.svg
• @cinchme/brand/assets/mark-on-dark.svg
• @cinchme/brand/assets/favicon.png
• @cinchme/brand/assets/apple-touch-icon.png

Brand contract

• Ink: #191d2c
• Paper: #f4f2ec
• Logo violet: #6467f2
• Interface violet: #5d5fde
• Recommended mark sizes: 16, 24, 32, 64, and 180 pixels

brand.json is the reviewable contract. Tests keep the JavaScript exports, CSS tokens, vector geometry, and browser icon dimensions aligned with it.

Release discipline

The package remains in the 0.x range while the identity is evolving. Every visual change should:

1. update brand.json and the affected assets;
2. run npm run check;
3. increment the package version;
4. publish one immutable version;
5. update the app and marketing repositories through normal dependency PRs.