colorize

Define brand-aligned color palettes and apply semantic colors to UI components.

Updated Aug 23, 2026

Search Tags:#accessibility #contrast #ui-design #design-system #color-palette #brand-colors #colorize

Ready to run

npx skills add https://github.com/thiagofelix/medflow --skill colorize-thiagofelix

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: colorize
Source: https://github.com/thiagofelix/medflow/tree/main/.agents/skills/colorize
Command: npx skills add https://github.com/thiagofelix/medflow --skill colorize-thiagofelix

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Add strategic color to designs that are too monochromatic or lack visual warmth.

Core Features & Use Cases

Define a brand-aligned color palette and apply semantic colors for status, emphasis, and calls to action.
Apply color to surfaces, typography, icons, and borders to enhance hierarchy while maintaining accessibility.
Use across UI components like dashboards, forms, and navigation to improve wayfinding and delight.

Quick Start

Provide a 2-4 color palette and apply it to the target UI to achieve brand-aligned, meaningful color.

Frequently Asked Questions about colorize

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

FAQPage Schema

How do I add color to a monochromatic UI design without losing visual hierarchy?▼

To add color to a monochromatic UI design, apply strategic semantic colors to surfaces, typography, icons, and borders. This enhances visual hierarchy and emotional tone while maintaining wayfinding and accessibility across components.

What is the best way to map semantic colors for dashboards and forms?▼

Mapping semantic colors for dashboards involves defining a brand-aligned palette to signify status, emphasis, and calls to action. This process ensures visual warmth and improves wayfinding and user delight across UI components like forms and navigation.

How do I build a brand-aligned color palette for a design system?▼

Building a brand-aligned color palette for a design system requires providing a 2-4 color base palette. You then apply this palette across target UI surfaces, accents, borders, and typography to achieve meaningful color and convey hierarchy.

Does adding brand colors to an interface affect accessibility?▼

Adding brand colors to an interface must include accessibility checks to ensure contrast remains usable. The colorization process ensures that applying colors to typography and borders enhances hierarchy without compromising accessibility standards.

Why does my monochromatic design lack visual warmth and how can I fix it?▼

A monochromatic design lacks visual warmth when it misses strategic color mapping. You can fix this by defining a brand-aligned palette and applying semantic colors for status and emphasis across your UI components.