Skip to content

Palette from brand

You will produce a full color palette using the color-palette skill playbook.

Input

Parse $ARGUMENTS. The user will provide one of: - A hex (e.g., #7C3AED) - A product category (e.g., fintech, e-commerce, health-tech) - A mood word (e.g., playful, editorial, brutalist) - Multiple of these, comma-separated

If the input is ambiguous or missing, ask one clarifying question before proceeding.

Steps

  1. Determine the seed:
  2. If hex: it's the primary.
  3. If category: pull a starter from knowledge/colors/palettes-by-product-type.md.

  4. If mood: pull primary/accent from knowledge/patterns/styles-catalog.md.

  5. Apply the color-palette playbook end-to-end:

  6. OKLCH ramp generation
  7. Semantic anchors (default, hover, active, subtle, on-color)
  8. Accent + neutrals
  9. WCAG validation (matrix)

  10. Dark mode (recomputed, not inverted)

  11. Output using skills/color-palette/TEMPLATE.md:

  12. Reasoning paragraph
  13. Token table (light + dark)
  14. Code blocks for the requested framework (default: Tailwind v4 + shadcn-ui CSS vars + Style Dictionary JSON)
  15. Contrast matrix
  16. Use guidance

Default assumptions if not specified

  • Both light and dark mode.
  • Tailwind v4 + shadcn-ui CSS vars + Style Dictionary JSON output.
  • WCAG AA target (not AAA).
  • 11-step ramps (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950).

Done when

  • Every UI-relevant pair has a contrast number.
  • Dark mode is genuinely recomputed.
  • Code blocks for at least Tailwind + shadcn vars are paste-ready.
  • Use guidance addresses primary vs accent vs neutral selection.