UIL Brand Kit

Brand colors, design tokens, and assets for UIL systems.

Quick Start

Edit tokens, regenerate CSS:

# 1. Edit tokens.json
# 2. Run:
npm run generate

globals.css is auto-generated from tokens.json.

Installation

npm install @uil/brand-kit

Usage

JavaScript

import { tokens, hexToRgba, hexToHsl } from '@uil/brand-kit'

// Access brand colors
const primary = tokens.brandColors.primary
const primary500 = tokens.brandColors.primary['500']

// Dark mode colors
const darkBg = tokens.darkModeColors.background

// Utilities
const customColor = hexToRgba('#14b8a6', 0.5)
const hsl = hexToHsl('#14b8a6')

Direct tokens import

import tokens from '@uil/brand-kit/tokens.json'

Generate CSS

npm run generate

Writes globals.css with Tailwind v4 theme variables and CSS custom properties.

File Structure

brand-kit/
├── tokens.json       # Single source of truth - edit colors here
├── index.js          # Main entry (exports tokens, utils, generateGlobalsCss)
├── scripts/
│   └── generate-css.js   # CLI: generates globals.css
├── assets/           # Logos, favicons, images
└── globals.css       # Auto-generated - do not edit

Tokens

Edit tokens.json:

• brandColors: Primary, secondary, status, and neutral scales
• darkModeColors: Dark mode overrides (hex or rgba)

Exports

| Export | Description | | ----------------------- | ---------------------------- | | tokens | Full tokens object | | hexToHsl(hex) | Convert hex to HSL string | | hexToRgba(hex, alpha) | Convert hex to rgba | | generateGlobalsCss() | Generate globals.css content |