Lux Docs

Overview

Lux Brand is the official design system and brand asset package for Lux Finance, published as @luxfi/brand on npm. It provides colors, typography, design tokens, logo components, theme management, and documentation theme variables (Fumadocs-compatible).

Quick Reference

Item	Value
Repo	`github.com/luxfi/brand`
Package	`@luxfi/brand` v1.0.0
Default branch	`main`
Build tool	tsup
Exports	CJS + ESM + DTS
License	MIT
npm	`@luxfi/brand` (public)

Architecture

brand/
├── src/
│   ├── index.ts         # Re-exports all modules
│   ├── colors.ts        # Color palette + CSS variable generator
│   ├── typography.ts    # Font families, sizes, weights, @font-face
│   ├── tokens.ts        # Spacing, radius, shadow, blur, z-index, breakpoints
│   ├── logos.tsx         # Logo asset URLs + React components (LuxLogo, LuxLogoSVG)
│   ├── themes.ts        # Light/dark theme management + useTheme hook
│   ├── config.ts        # Brand config (company info, social, domains, SEO)
│   ├── docs.ts          # Fumadocs CSS variable theme (pure black/white)
│   └── utils.ts         # Utilities
├── styles/
│   └── docs.css         # Documentation CSS
├── index.html           # Preview page
├── package.json
└── tsconfig.json

Exports

Color Palette

Role	Value	Usage
Primary	`#0A0A0B`	Main brand (near-black)
Secondary	`#F5F5F5`	Backgrounds
Accent	`#3B82F6`	Highlights, links
Success	`#10B981`	Positive states
Warning	`#F59E0B`	Caution states
Error	`#EF4444`	Error states

CSS variables generated with --lux- prefix via getCSSVariables('lux').

Typography

Role	Family
Sans	Inter (variable weight 100-900)
Display	Inter Display
Mono	JetBrains Mono

Logo Components

// Image-based (references asset URLs)
<LuxLogo variant="full" size="large" theme="dark" />
// Variants: full, mark, horizontal, stacked
// Themes: light, dark, auto

// Inline SVG
<LuxLogoSVG size={32} color="currentColor" />

// Favicon
<LuxFavicon size={16} />

Logo asset paths follow the pattern: /assets/logo/lux-\{variant\}-\{theme\}.\{svg,png\}

Theme Management


// Apply directly
applyTheme('dark')  // Sets CSS vars + data-theme attribute + localStorage

// React hook
const { theme, setTheme } = useTheme()
setTheme('dark')

Auto-initializes on import in browser (detects prefers-color-scheme).

Documentation Theme (Fumadocs)

Pure black/white minimalist theme for docs sites:


// Get CSS string for injection
const css = luxDocsTheme.css

// Apply at runtime
applyDocsTheme('dark')

Variables use --color-fd-* prefix for Fumadocs compatibility.

Commands

pnpm install              # (or npm)
pnpm build                # tsup: CJS + ESM + DTS
pnpm dev                  # tsup watch mode
pnpm lint                 # ESLint
pnpm type-check           # tsc --noEmit

CI/CD

.github/workflows/deploy.yml -- Build and deploy.

lux/lux-login.md -- Uses LUX wordmark and dark theme
lux/lux-docs.md -- Consumes Fumadocs theme from this package
lux/lux-ui.md -- React component library

Lux Brand - Official Brand Assets and Design System