🎨 OmniDesign

Universal Design System with Tailwind CSS Integration

One package. 10 IDEs. 25 themes. 272 OKLCH colors. 39 Nerd Fonts. Tailwind-ready.

✨ What's New

🚀 Tailwind v4 Migration (Latest)

Status: ✅ Complete
Branch: tailwind-v4-migration
See: MIGRATION_SPEC.md for full details

🎨 OKLCH Colors - All 272 colors converted to perceptually uniform OKLCH format (41 primitives + 231 extended)
🧩 10 Production Components - 2,547 lines of React 19 + TypeScript components
🎭 25 Themes - Generated theme files with semantic color overrides
🌗 Dark Mode - Built-in support via CSS prefers-color-scheme
📖 Interactive Demo - Try all components with live theme switching (examples/demo.html)
⚡ Type-Safe - Zero TypeScript errors, ES2024 target, CVA variants

Components: AgentCard, BentoGrid, ChatMessage, CodeBlock, FileUpload, Form, HeroSection, Navbar, PromptInput, ThinkingIndicator

v1.1.0

🎨 Tailwind CSS Integration - Full token-to-utility mapping with ready-to-use config
🎨 OKLCH Color System - 41 primitive colors + 231 extended shades = 272 perceptually uniform colors
🔤 39 Nerd Fonts - Complete catalog with CDN links and install commands
📦 Component Recipes - Copy-paste Tailwind snippets for buttons, cards, inputs, alerts
🤖 AI-Ready - Agents can now generate production-ready Tailwind code instantly

🚀 Quick Start

Option 1: Install for Your IDE (Recommended)

npx omnidesign

Auto-detects and installs globally. That's it.

Manual install:

npx omnidesign install --ide claude      # Claude Code
npx omnidesign install --ide cursor      # Cursor
npx omnidesign install --ide opencode    # OpenCode
npx omnidesign install --ide vscode      # VS Code
npx omnidesign install --ide zed         # Zed

Option 2: Use in Your Project

npm install omnidesign

// tailwind.config.js
const omnidesignConfig = require('omnidesign/tailwind');

module.exports = {
  ...omnidesignConfig,
  // Your customizations
};

Option 3: Direct CSS Import

@import 'omnidesign/tokens';

🎨 Tailwind Integration

Token to Utility Mapping

Design Token	Tailwind Class	Usage
`color.text-default`	`text-text`	Primary text
`color.text-muted`	`text-text-muted`	Secondary text
`color.surface-raised`	`bg-surface-raised`	Card backgrounds
`color.interactive-primary`	`bg-primary`	Primary buttons
`color.status-success`	`text-green-600`	Success states

Ready-to-Use Components

Primary Button

<button className="bg-primary hover:bg-primary-hover text-text-inverted px-4 py-2 rounded-md font-medium shadow-md transition-colors focus:outline-none focus:ring-2 focus:ring-primary">
  Click me
</button>

Card

<div className="bg-surface-raised rounded-lg shadow-md p-6 border border-border-subtle">
  <h3 className="text-xl font-semibold text-text mb-2">Card Title</h3>
  <p className="text-text-muted">Card content with semantic colors.</p>
</div>

Input

<input className="bg-surface-sunken text-text border border-border rounded-md px-3 py-2 placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Enter text..." />

See full documentation in SKILL.md

🌈 Color Palette

Extended Color System

16 color families with 11 shades each (50-950):

Neutrals: neutral, slate, zinc, stone
Warm: red, orange, amber, yellow
Nature: lime, green, emerald, teal
Cool: cyan, sky, blue, indigo
Creative: violet, purple, fuchsia, pink, rose

/* Tailwind classes for all shades */
className="bg-blue-600 text-blue-100 border-blue-200"
className="bg-emerald-500 text-emerald-50"
className="bg-purple-600 text-purple-100"

Themes

25 production-ready themes:

Professional

Theme	Palette	Primary Use
corporate		Enterprise, SaaS
navy		Professional, trustworthy
slate		Modern tech, clean
forest		Natural, eco-friendly
ruby		Bold, confident
graphite		Minimal, sophisticated

Creative

Theme	Palette	Primary Use
sunset		Warm, energetic
ocean		Calm, refreshing
berry		Playful, vibrant
mint		Fresh, clean
coral		Friendly, warm
lavender		Soft, creative

Dark Mode

Theme	Palette	Primary Use
midnight		Classic dark
noir		High contrast
cyberpunk		Neon accents
obsidian		Deep purple
deep-space		Blue-tinted
brutalist		Raw, stark

Light Mode

Theme	Palette	Primary Use
daylight		Bright, airy
paper		Reading-optimized
cream		Warm, vintage
snow		Clean white
spring		Fresh, hopeful
solar		Energy, brightness

Specialty

Theme	Palette	Primary Use
starry-night		Artistic, dreamy

🔤 Nerd Fonts Collection

39 patched fonts with coding ligatures and thousands of glyphs:

Top Programming Fonts

Font	Google Fonts	Install
JetBrainsMono Nerd	✅ Yes	`brew install font-jetbrains-mono-nerd-font`
FiraCode Nerd	✅ Yes	`brew install font-fira-code-nerd-font`
Hack Nerd	❌ Download	`brew install font-hack-nerd-font`
CaskaydiaCove	❌ Download	`brew install font-caskaydia-cove-nerd-font`
Geist Mono	❌ NPM	`npm install geist`

Quick Import

/* Google Fonts (recommended for web) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&display=swap');

// Next.js
import { JetBrains_Mono } from 'next/font/google';

const jetbrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  variable: '--font-mono',
});

📦 Package Structure

omnidesign/
├── tokens/
│   ├── primitives/
│   │   ├── colors-extended.json      # 16 color families
│   │   └── ...
│   ├── themes/                       # 25 themes
│   └── typography/
│       └── nerd-fonts-complete.json  # 39 fonts
├── packages/
│   ├── tokens-tailwind/              # Tailwind integration
│   │   ├── dist/
│   │   │   ├── tailwind.config.js    # Ready-to-use config
│   │   │   ├── utility-mapping.json  # Token → class mapping
│   │   │   └── tokens.css            # CSS variables
│   │   └── package.json
│   ├── tokens-css/
│   └── tokens-ts/
├── skills/
│   └── opencode/
│       └── omnidesign-tailwind.md    # AI skill documentation
└── README.md

🛠️ CLI Commands

# Auto-detect and install
npx omnidesign

# List available IDEs
npx omnidesign list

# Install for specific IDE
npx omnidesign install --ide claude --global

# Uninstall
npx omnidesign uninstall --ide claude --global

# List themes
npm run themes:list

# List fonts
npm run fonts:list

# List colors
npm run colors:list

🔧 Advanced Usage

Custom Tailwind Config

// tailwind.config.js
const omnidesign = require('omnidesign/tailwind');

module.exports = {
  ...omnidesign,
  theme: {
    ...omnidesign.theme,
    extend: {
      ...omnidesign.theme.extend,
      colors: {
        ...omnidesign.theme.extend.colors,
        brand: {
          // Your custom brand colors
          DEFAULT: '#FF6B6B',
          dark: '#EE5A5A',
        }
      }
    }
  }
};

Programmatic Access

import colors from 'omnidesign/colors';
import fonts from 'omnidesign/fonts';
import mapping from 'omnidesign/tailwind-mapping';

// Get all blue shades
const blueShades = colors.families.blue.shades;

// Get JetBrainsMono font info
const jetbrains = fonts.fonts['jetbrains-mono-nerd'];

// Get Tailwind class for token
const buttonClass = mapping.colors['interactive-primary'].tailwindUtility;
// → "bg-primary hover:bg-primary-hover..."

🤖 For AI Assistants

Prompt Examples

Apply a theme:

"Use the cyberpunk theme for this component"
→ AI applies cyberpunk color tokens

Create components:

"Create a login form with Tailwind"
→ AI uses semantic tokens:
   - bg-surface-raised for card
   - bg-primary for submit button
   - text-text-muted for helper text

Font selection:

"Use JetBrains Mono for code blocks"
→ AI applies font-mono with JetBrains Mono stack

Token Reference

Colors:

Semantic: text-text, bg-surface-raised, border-border
Primitive: bg-blue-600, text-red-500, border-slate-200

Spacing:

p-4 (16px), gap-2 (8px), m-6 (24px)

Typography:

font-sans, font-mono, font-display

Shadows:

shadow-md (card), shadow-lg (dropdown), shadow-xl (modal)

📝 Documentation

🔗 Supported IDEs

IDE	Install Command	Config Location
Claude Code	`npx omnidesign`	`~/.claude/skills/omnidesign/`
Cursor	`npx omnidesign`	`~/.cursor/skills/omnidesign/`
OpenCode	`npx omnidesign`	`~/.config/opencode/skills/omnidesign/`
VS Code	`npx omnidesign`	`~/.vscode/settings.json`
Zed	`npx omnidesign`	`~/.zed/omnidesign/`
Amp Code	`npx omnidesign`	`~/.config/agents/skills/omnidesign/`
Kilo Code	`npx omnidesign`	`~/.kilocode/skills/omnidesign/`
Antigravity	`npx omnidesign`	`~/.gemini/antigravity/skills/omnidesign/`
Aider	`npx omnidesign`	`./CONVENTIONS.md`
Continue.dev	`npx omnidesign`	`~/.continue/omnidesign/`

📄 License

X @codewithkenzo • Discord • Website

_{Built with ❤️ for AI assistants everywhere}

Name		Name	Last commit message	Last commit date
Latest commit History 36 Commits
assets/palettes		assets/palettes
bin		bin
examples		examples
packages/tokens-tailwind		packages/tokens-tailwind
recipes		recipes
scripts		scripts
skills		skills
src		src
tokens		tokens
.gitignore		.gitignore
AGENTS.md		AGENTS.md
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
GETTING_STARTED.md		GETTING_STARTED.md
LICENSE		LICENSE
MIGRATION_SPEC.md		MIGRATION_SPEC.md
QUICKREF.md		QUICKREF.md
README.md		README.md
bun.lock		bun.lock
logo.jpg		logo.jpg
moltbot-prompt.md		moltbot-prompt.md
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
tweet-drafts.md		tweet-drafts.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

🎨 OmniDesign

✨ What's New

🚀 Tailwind v4 Migration (Latest)

v1.1.0

🚀 Quick Start

Option 1: Install for Your IDE (Recommended)

Option 2: Use in Your Project

Option 3: Direct CSS Import

🎨 Tailwind Integration

Token to Utility Mapping

Ready-to-Use Components

🌈 Color Palette

Extended Color System

Themes

🔤 Nerd Fonts Collection

Top Programming Fonts

Quick Import

Categories

📦 Package Structure

🛠️ CLI Commands

🔧 Advanced Usage

Custom Tailwind Config

Programmatic Access

🤖 For AI Assistants

Prompt Examples

Token Reference

📝 Documentation

🔗 Supported IDEs

📄 License

About

Uh oh!

Releases

Packages

Uh oh!

Languages

License

codewithkenzo/omnidesign

Folders and files

Latest commit

History

Repository files navigation

🎨 OmniDesign

✨ What's New

🚀 Tailwind v4 Migration (Latest)

v1.1.0

🚀 Quick Start

Option 1: Install for Your IDE (Recommended)

Option 2: Use in Your Project

Option 3: Direct CSS Import

🎨 Tailwind Integration

Token to Utility Mapping

Ready-to-Use Components

🌈 Color Palette

Extended Color System

Themes

🔤 Nerd Fonts Collection

Top Programming Fonts

Quick Import

Categories

📦 Package Structure

🛠️ CLI Commands

🔧 Advanced Usage

Custom Tailwind Config

Programmatic Access

🤖 For AI Assistants

Prompt Examples

Token Reference

📝 Documentation

🔗 Supported IDEs

📄 License

About

Resources

License

Code of conduct

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Packages