brand

Personal brand assets as flexible React components.

Components

Components can be imported by name from the root path as import { Entity } from '@linkiwi/brand'.

Exported entities are:

|Export|Description| |-|-| |Logo|Logo only.| |LogoWordmark|Logo combined with wordmark, in monochrome and regular variants (each with dark and light variants).| |Wordmark|Wordmark only, in dark and light variants.|

Props are automatically proxied to the underlying svg element.

Logo

The logo color can be overriden with the color prop.

import { Logo } from '@linkiwi/brand';

...

<Logo color="green" />

LogoWordmark

The monochrome prop disables logo coloring (enabled by default). The dark prop adjusts the wordmark color to a preset value to be visible against dark backgrounds. The default wordmark color is visible against light backgrounds.

import { LogoWordmark } from '@linkiwi/brand';

...

<LogoWordmark monochrome dark />

Alternatively, the logo color and wordmark color can be configured independently.

import { LogoWordmark } from '@linkiwi/brand';

...

<LogoWordmark logoColor="red" wordmarkColor="green" />

Wordmark

The dark prop uses a preset color constant to be visible against dark backgrounds.

import { Wordmark } from '@linkiwi/brand';

...

<Wordmark dark />

Alternatively, the text color can be overridden.

import { Wordmark } from '@linkiwi/brand';

...

<Wordmark color="red" />

Constants

Colors

Brand color hex literals are named exports in constants/color.

import { BRAND_BLUE, DARK_GRAY, LIGHT_GRAY } from '@linkiwi/brand/constants/color';

Fonts

Brand primary and secondary typefaces are exported as CSS data URIs in constants/font.

import {
  primaryRegular,
  primaryBold,
  secondaryRegular,
  secondaryBold,
} from '@linkiwi/brand/constants/font';