🎨 OmniDesign

✨ What's New in v1.1.0

🎨 Tailwind CSS Integration - Full token-to-utility mapping with ready-to-use config
🌈 Extended Color Palette - 16 color families × 11 shades = 176 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:[email protected]&display=swap');

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

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

Categories

• Programming: JetBrainsMono, FiraCode, CaskaydiaCove, ZedMono, CommitMono
• Terminal: IosevkaTerm, MesloLG, Terminus
• Dense: Iosevka (narrow, information-dense)
• Creative: VictorMono (cursive italics), FantasqueSansMono (handwritten)
• Accessible: Atkinson Hyperlegible, OpenDyslexic
• Retro: 3270, BigBlueTerminal

See full catalog: tokens/typography/nerd-fonts-complete.json

📦 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

• Tailwind Integration Guide
• Improvement Specification
• API Documentation
• Quick Reference

🔗 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

MIT © codewithkenzo