@net-advantage/jo-ui-logo

JourneyOf wordmark. journey uses Inter. The accent of.. uses Caveat. A dotted curve sits under the word.

The logo follows a strict MVVM split. The model owns defaults. The view-model projects presentation values. The view only renders the view-model. Inter and Caveat are self-hosted by @net-advantage/jo-ui-theme.

MVVM

flowchart LR
  Props["LogoProps"] --> ViewModel["useLogoViewModel"]
  Model["logo.model.ts<br/>defaults and class name"] --> ViewModel
  ViewModel --> View["Logo.tsx"]
  MarkProps["MobileMarkProps"] --> MarkModel["useMobileMarkViewModel"]
  MarkModel --> Mark["MobileMark.tsx"]

| Layer | File | Responsibility | | --- | --- | --- | | Contract | logo.types.ts | Props and view-model | | Model | logo.model.ts | Default colors, curve size, and class name | | View-model | logo.view-model.ts | Project colors, curve size, width, and font families | | View | Logo.tsx | Render the wordmark and dotted curve | | View | MobileMark.tsx | Render the 43×28 compact mark. Light uses the primary artwork. Dark uses the reversed artwork. |

Models

flowchart TD
  Defaults["LOGO_DEFAULTS"] --> ViewModel["LogoViewModel"]
  Props["LogoProps"] --> ViewModel
  ViewModel --> Word["journey"]
  ViewModel --> Accent["of.."]
  ViewModel --> Curve["dotted curve"]

• primaryColor colors journey and the curve's end dot. It defaults to #14224a.
• accentColor colors of.. and the curve. It defaults to #6495ed.
• curveWidth defaults to 80. curveHeight defaults to 10.
• journey uses --jo-font-family. of.. uses --jo-font-family-handwritten (Caveat, cursive). Load them with import '@net-advantage/jo-ui-theme/style.css'. The logo does not request Google Fonts.

Structure

• src: runtime component, model, view-model, and types.

Fonts

Inter (including weight 800) and Caveat 500, 600, and 700 ship in @net-advantage/jo-ui-theme. The accent word uses weight 600. Import that stylesheet once:

import '@net-advantage/jo-ui-theme/style.css';

The faces use font-display: swap and are licensed under the SIL Open Font License. The logo package does not add a Google Fonts <link> or CSS @import.

Props

| Prop | Default | Use | | --- | --- | --- | | primaryColor | #14224a | Color of journey and the curve's end dot. | | accentColor | #6495ed | Color of of.. and the curve. | | width | none | Width of the wordmark root. | | curveWidth | 80 | Width of the dotted curve. | | curveHeight | 10 | Height of the dotted curve. | | className | none | Extra class on the root. | | rootProps | none | Other attributes for the root. className stays on the component prop. |

<Logo primaryColor="#dce7ff" accentColor="#8fb3ff" />

Publish footprint

This package publishes only:

• dist
• README.md