Purpose

Use this skill after a palette exists. Its job is to decide where each color goes, how much area it gets, and what it is not allowed to do.

Pain Points This Solves

• A palette looks good as swatches but fails once placed into a real layout.
• Designers often overuse the most beautiful color, making CTA, title, decoration, and background compete.
• Different surfaces need different placement logic; a poster rule should not be copied directly into a UI or PPT deck.

Data Contract

• Use the bundled references inside this skill:
• references/chinese-color-master-list.md: full 742-color Markdown source list.
• references/chinese-color-harmony.csv: complete machine-readable harmony table for all 742 colors.
• references/chinese-color-harmony.md: Markdown version of the same harmony relationships.
• If a palette came from outside the project, map its HEX values to nearest traditional colors before final placement.
• Do not add colors unless repairing a real failure; explain every replacement.
• If the user provides a screenshot or layout description, diagnose the current hierarchy before suggesting placement.

Surface-Specific Workflow

1. Identify the surface and the primary reading path:

• Poster or cover: first glance, title, secondary text, signature/detail.
• Website or app: canvas, surface, text, action, state, focus.
• PPT or editorial: page rhythm, headline, body, callout, diagram.
• Packaging: front panel, product name, variant, legal text, seal, side panel.

1. Convert colors into job roles:

• Ground: large quiet fields.
• Content: title, body, label, caption.
• Action: CTA, link, selected state, active object.
• Rhythm: section bands, dividers, cards, repeated structure.
• Detail: ornament, number, badge, stamp, small highlight.

1. Set a hierarchy ladder. The strongest contrast belongs to the most important message, not the prettiest color.
2. Assign area ratios:

• Large field: 50% to 75%.
• Structure and content: 15% to 35%.
• Accent: 3% to 10%.
• Detail: under 3%.

1. Add placement constraints for the specific surface.
2. List the misuse cases that would break the design.

Output Shape

• Surface diagnosis: what this layout needs from color.
• Role map: role, color name, HEX, component or area, ratio.
• Reading path: where the eye lands first, second, third.
• Placement rules: surface-specific instructions, not generic color labels.
• Misuse checklist: 3 concrete failures to avoid.
• Follow-up: accessibility, token, brand, or print skill if needed.

If the palette cannot safely support the requested layout, say which role is missing before inventing fixes.