Skip to content
cccskills
FreePublished on GitHub

color-principles

Use when reviewing or designing a color palette for a UI, website, or app — seven principles for premium, calm, accessible color (palette size, muted tones, contrast, accent restraint, near-black/white, consistency, whitespace).

The English summary is being prepared. Showing the original description.

Run score Not tested

See how to install

Files included (1)

  • SKILL.md2.0 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Premium Color Principles

Seven principles for color that feels calm, premium, and accessible. Use them to review or design any digital interface — and reference them by number when giving feedback.

Triggers: color, palette, UI design, visual hierarchy, contrast, muted tones, accent color, design feedback, color theory.

The 7 principles

1. Reduce your palette

The fewer colors you use, the more each one matters.

  • 3 colors maximum
  • Neutral grays as the base
  • One accent color — for CTAs only

2. Use muted tones more often

If everything shouts, nothing stands out.

  • Avoid saturated colors for large areas
  • Muted tones read as premium and calm

3. Create intentional contrast

Contrast tells users where to look first.

  • Minimum 4.5:1 for text (WCAG AA)
  • Target 7:1+ for premium (WCAG AAA)

4. Use accent colors sparingly

Accent colors only work when they're rare.

  • One accent per view/screen
  • Reserve it for the primary action

5. Avoid pure black and pure white

Tiny shifts create different feelings.

  • Use #1a1a1a or #121212 instead of #000
  • Use #FAFAF7 or #F5F5F0 instead of #FFF

6. Keep color behavior consistent

Users shouldn't have to relearn your colors.

  • One action = one color, always

7. Let whitespace support color

Whitespace makes color intentional.

  • Don't crowd colors together

Feedback format

When reviewing a design, structure the response as:

  1. Assessment — which principles it follows or violates
  2. Analysis — specific feedback per principle
  3. Suggestions — concrete hex recommendations
  4. Priority — what to fix first

Pairs well with kika-design-system — these are the general review lens; that skill is one opinionated system built on them.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Use when creating a new project folder, starter pack, app scaffold, or agent-ready workspace — AGENTS.md, README, TASKS, DECISIONS, PROMPTS, an idempotent bootstrap script, and starter-pack modes.

The English summary is being prepared. Showing the original description.

aka-kika/akakika-skills11Updated Sep 12, 2026

Use when designing or implementing states for AI agent tasks, background jobs, local model runs, queues, and notifications — one shared set of states, only legal transitions, and a recovery path out of every failure.

The English summary is being prepared. Showing the original description.

aka-kika/akakika-skills11Updated Sep 12, 2026

Use when exposing app features to App Intents, Shortcuts, Siri, Spotlight, widgets, controls, or system actions — small safe AppIntents, AppShortcutsProvider, AppEnum/AppEntity, parameters, and open-vs-background behavior.

The English summary is being prepared. Showing the original description.

aka-kika/akakika-skills11Updated Sep 12, 2026

Use when designing, reviewing, or implementing a command-palette / ⌘K layer for an Apple-platform app — keyboard-first global search, ranked and grouped results, native floating panel, and protected destructive commands.

The English summary is being prepared. Showing the original description.

aka-kika/akakika-skills11Updated Sep 12, 2026

Use when designing or implementing empty, first-run, no-result, offline, error, or waiting states in Apple-platform apps — every empty state explains what is missing, why it matters, and what to do next.

The English summary is being prepared. Showing the original description.

aka-kika/akakika-skills11Updated Sep 12, 2026

Use when designing or implementing feedback, status, progress, alerts, errors, success states, and live activity indicators in Apple-platform apps — inline status, banners, alerts, notifications, and loading states.

The English summary is being prepared. Showing the original description.

aka-kika/akakika-skills11Updated Sep 12, 2026

See all skills by aka-kika

Report a problem with this skill