Brand Assets

The Nosible brand mark, wordmark, and lockups — as inline-SVG components that inherit colour via currentColor. Plus the 1200×630 share cover for OpenGraph and Twitter cards.

The stand-alone glyph. Use for favicons, avatars, app icons, and any surface where the full wordmark won't read at the available size. Ships in a 1:1 viewbox.

import { Logo } from 'nosible-ux';

<Logo variant="mark" size={48} color="var(--c-neo-green)" aria-label="Nosible" />

The word “NOSIBLE” set in the brand letterforms — no glyph. Use inside dense navigation, inline with running text, or wherever the mark would visually duplicate a nearby icon.

import { Wordmark } from 'nosible-ux';

<Wordmark size={18} color="var(--c-neo-green)" aria-label="Nosible" />

The mark and wordmark combined. Horizontal is the default — use stacked only for very narrow surfaces or as a hero mark on tall cards.

import { LogoLockup } from 'nosible-ux';

<LogoLockup orientation="horizontal" size={48} color="var(--c-text)" aria-label="Nosible" />
<LogoLockup orientation="stacked"    size={96} color="var(--c-text)" aria-label="Nosible" />

A 1200×630 PNG sized for OpenGraph and Twitter summary_large_image cards. Two visual variants ship — default for editorial / primary surfaces, v2 for product announcements.

variant="default"1200 × 630

variant="v2"1200 × 630

In-page usage:

import { ShareCoverImage } from 'nosible-ux';

<ShareCoverImage variant="default" alt="Nosible — deep-search illustrated" />

OpenGraph metadata — reference the URL constants directly so Next.js can resolve an absolute URL against metadataBase:

import type { Metadata } from 'next';
import { SHARE_COVER_URL_DEFAULT, SHARE_COVER_DIMENSIONS } from 'nosible-ux';

export const metadata: Metadata = {
  metadataBase: new URL('https://your-app.example.com'),
  openGraph: {
    images: [
      {
        url:    SHARE_COVER_URL_DEFAULT,
        width:  SHARE_COVER_DIMENSIONS.width,
        height: SHARE_COVER_DIMENSIONS.height,
        alt:    'Your product — one-line description',
      },
    ],
  },
  twitter: {
    card:   'summary_large_image',
    images: [SHARE_COVER_URL_DEFAULT],
  },
};

Prefer the React components above — they inherit colour from currentColor and scale without rasterisation. Raw SVG / PNG files are shipped at nosible-ux/assets/logos/ and nosible-ux/assets/share-covers/ for surfaces that can't render React — email templates, press kits, PDF decks.