myoperator-design
Generates production-ready React/Tailwind CSS code matching the myOperator design system. Code is standalone — does not require the myoperator-ui package but visually matches its components. Always include the full CSS variables block in output.
Design Philosophy
myOperator's design language is professional, clean, and purposeful:
- Blue-gray primary palette (#343E55) — sophisticated and business-appropriate
- Turquoise accent (#2BBCCA) — fresh, modern brand identity
- Clean typography with Source Sans Pro — readable and professional
- Subtle interactions — focus rings, hover states, smooth transitions
- Semantic color usage — success/error/warning states are clear and consistent
The aesthetic is enterprise SaaS — trustworthy, efficient, uncluttered. NOT flashy, NOT playful, NOT experimental.
Brand Color Usage
More from ankish8/storybook-npm
storybook generator
Generates comprehensive Storybook stories following the Button/AlertConfiguration pattern with installation instructions, design tokens table, typography table, and usage examples. Activate when creating component documentation.
26component analysis
Analyzes codebase to check if component exists, suggests creating variants vs new components, and identifies reusable subcomponents. Activate when creating new components to avoid duplication and ensure proper architecture.
21design system validator
Ensures CSS variables are used instead of hardcoded colors, validates semantic tokens, checks responsive design patterns, and enforces design system consistency. Activate when creating or validating components.
20