@mowbie/brand

Mowbie's shared design tokens — colours, typography, spacing, and radius — for consistent branding across web app, mobile app, and website.

Installation

npm install @mowbie/brand

Usage

Core tokens (any platform)

import { brand, hslToHex } from "@mowbie/brand";

// Access colour tuples [h, s, l]
const primary = brand.colors.light.primary; // [234, 85, 60]
const hex = hslToHex(primary); // "#4254f0"

// Typography
brand.fonts.heading; // "'Plus Jakarta Sans', system-ui, ..."
brand.fonts.weights.bold; // 700

// Spacing (4px base unit)
brand.spacing.scale["4"]; // 16

// Border radius
brand.radius.lg; // 12

Web app (React + Tailwind)

import { generateCssVars, tailwindFontFamily } from "@mowbie/brand/web";

// Generate CSS variables from tokens
const lightVars = generateCssVars("light");
// { "--primary": "234 85% 60%", "--accent": "187 85% 43%", ... }

// Get Tailwind font family array
const fontFamily = tailwindFontFamily();
// ["'Plus Jakarta Sans'", "system-ui", "-apple-system", "sans-serif"]

React Native / Expo

import { mowbieTheme } from "@mowbie/brand/native";

// Hex colours ready for StyleSheet
mowbieTheme.colors.light.primary; // "#4254f0"
mowbieTheme.colors.dark.primary; // "#516cf6"

// Numeric spacing
mowbieTheme.spacing["4"]; // 16

// Font names for Expo
mowbieTheme.fonts.heading; // "PlusJakartaSans-Bold"
mowbieTheme.fonts.body; // "PlusJakartaSans-Regular"

// React Native shadows
mowbieTheme.shadows.md;
// { shadowColor: "#000", shadowOffset: { width: 0, height: 2 },
//   shadowOpacity: 0.07, shadowRadius: 4, elevation: 3 }

// Chart colours
mowbieTheme.colors.chart.light; // ["#4254f0", "#10b5cb", ...]

// Gradient endpoints
mowbieTheme.colors.gradient.light; // { start: "#4254f0", end: "#10b5cb" }

Updating

When brand tokens change in the web app project:

1. Edit packages/brand/src/index.ts (the single source of truth)
2. Run npm run brand:publish from the project root to bump version, build, and publish
3. Run npm update @mowbie/brand in the mobile app project

Font loading

Web

Plus Jakarta Sans is loaded via Google Fonts in client/index.html. No action needed.

React Native / Expo

Install the font package:

npx expo install @expo-google-fonts/plus-jakarta-sans expo-font

Then load it in your app entry:

import { useFonts, PlusJakartaSans_400Regular, PlusJakartaSans_500Medium, PlusJakartaSans_600SemiBold, PlusJakartaSans_700Bold } from "@expo-google-fonts/plus-jakarta-sans";