@runwell/orbit-brand-kit

Design tokens and theme system for Orbit Ventures. Provides CSS variables, Tailwind preset, MUI themes, and JSON tokens.

Published under the @runwell namespace as @runwell/orbit-brand-kit

Brand Colors

| Role | Color | Hex | |------|-------|-----| | Primary (Yellow) | Accent, CTAs, links | #FFED00 | | Dark | Primary background | #0C0B1D | | Navy | Secondary dark, headers | #10123B |

Typography

• Font Family: Mulish (Google Fonts)
• Weights: 400 (normal), 500 (medium), 600 (semibold), 700 (bold), 900 (black)

Installation

npm install @runwell/orbit-brand-kit

Usage

CSS Variables

/* Import dark theme (default for Orbit Ventures) */
@import "@runwell/orbit-brand-kit/css/orbit.dark.css";

/* Or light theme */
@import "@runwell/orbit-brand-kit/css/orbit.light.css";

Available variables:

• --color-primary, --color-primary-hover, --color-on-primary
• --color-background, --color-surface
• --color-text, --color-text-secondary, --color-text-muted
• --color-border, --color-divider
• --color-success, --color-warning, --color-error

Tailwind CSS

// tailwind.config.js
import orbitPreset from '@runwell/orbit-brand-kit/tailwind/preset';

export default {
  presets: [orbitPreset],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
};

MUI (Material UI)

import { darkTheme, lightTheme } from '@runwell/orbit-brand-kit/mui';
import { ThemeProvider } from '@mui/material/styles';

<ThemeProvider theme={darkTheme}>
  {/* Your app */}
</ThemeProvider>

JSON Tokens

import tokens from '@runwell/orbit-brand-kit/json/orbit.dark.json';

console.log(tokens.color.primary); // "#FFED00"

Build

npm install
npm run build

Outputs:

• dist/css/ - CSS variables (light and dark)
• dist/tailwind/ - Tailwind preset
• dist/mui/ - MUI theme options
• dist/json/ - Raw JSON tokens

Development

npm run clean    # Remove dist/
npm run build    # Build all outputs

License

MIT