colorize

Generates a brand-aligned color introduction plan for grayscale user interfaces.

Updated Apr 29, 2026
One-click install
npx skills add https://github.com/davidbasilefilho/skills --skill colorize-davidbasilefilho
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: colorize
Source: https://github.com/davidbasilefilho/skills/tree/main/skills/colorize
Command: npx skills add https://github.com/davidbasilefilho/skills --skill colorize-davidbasilefilho

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Colorize adds purposeful, brand-aligned color to monochrome interfaces to improve readability, hierarchy, and emotional impact.

Core Features & Use Cases

  • Semantic color: State indicators, status badges, progress indicators that convey meaning with color.
  • Accent color application: Primary actions, links, icons, headers, and hover states to reinforce brand.
  • Background and surfaces: Subtle tinted backgrounds, gradient depth, and cohesive card surfaces to improve readability and aesthetics.

Quick Start

Provide a purposeful color introduction plan for a grayscale UI to align with brand colors and improve visual hierarchy.

Frequently Asked Questions about colorize

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add brand-aligned color to a grayscale UI design?

To add brand-aligned color to a grayscale UI, apply a defined 2-4 color palette across semantic states, accents, and surfaces to improve readability, hierarchy, and emotional impact.

What is the best way to assign color roles in a design system?

Assigning color roles in a design system involves defining dominant, secondary, and accent colors to reinforce brand identity while validating accessibility and visual cohesion across UI elements.

How do I apply semantic colors to UI state indicators and progress bars?

Apply semantic colors to UI state indicators by mapping purposeful brand colors to status badges and progress indicators, ensuring meaning is conveyed clearly while maintaining accessibility.

Can I use a limited color palette for dashboards and marketing pages?

Yes, you can use a limited 2-4 color palette for dashboards and marketing pages by assigning dominant, secondary, and accent roles to backgrounds, typography, and decorative elements.

How do I improve visual hierarchy with accent colors in forms?

Improve visual hierarchy in forms by applying accent colors to primary actions, links, icons, and hover states, which reinforces brand identity and guides user attention effectively.