New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Color Semantic Systems

by hashgraph-online in hashgraph-online/awesome-codex-plugins

A skill your agent uses when building or auditing a color system that encodes meaning — status colors (success / warning / error), category colors (department, product line, user segment)…

Apache-2.0Auto-check passedFrontend & Design

Install Color Semantic Systems

skills CLI
$ npx skills add hashgraph-online/awesome-codex-plugins --skill color-semantic-systems -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install hashgraph-online/awesome-codex-plugins color-semantic-systems --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/color-semantic-systems .claude/skills/color-semantic-systems && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
color-semantic-systems
GitHub stars
1.3k
Token cost
~1.7k tokens
SKILL.md length
701 words
Files
2 (incl. references)
Skills in repo
714
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses when building or auditing a color system that encodes meaning — status colors (success / warning / error), category colors (department, product line, user segment)…

  • Works in 4 steps: The "what does each color mean?" audit.… → The grayscale test. Convert to… → The colorblind test. Simulate… → …
  • Auditing a color system that encodes meaning — status colors (success / warning / error)
  • SKILL.md covers What semantic colors should…, Building a status palette, Consistency rules for semantic… and Building a category palette, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Color Semantic Systems is an agent skill from hashgraph-online/awesome-codex-plugins. Use this skill when building or auditing a color system that encodes meaning — status colors (success / warning / error), category colors (department, product line, user segment), brand-role colors (primary, secondary, tertiary). Trigger when designing status badges, picking chart palettes, building a design-system color spec, or fixing inconsistent color use across surfaces. Sub-aspect of color; read that first.

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/semantic-system-cases.md`).

It sits in Frontend & Design, covering Design systems. The repository describes itself as: A curated list of awesome OpenAI Codex / ChatGPT plugins, skills, and resources. The 1 Codex Marketplace. See live plugins at: https://hol.org/plugins/best-codex-plugins. The licence is Apache-2.0.

When your agent uses it

  • Auditing a color system that encodes meaning — status colors (success / warning / error)
  • Category colors (department
  • Brand-role colors (primary
  • Designing status badges

Example prompts

  • “/color-semantic-systems”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. The "what does each color mean?" audit. List every color in your design system. Can you name a single specific role for each? If yes, the…
  2. The grayscale test. Convert to grayscale. Does the visual hierarchy still work? If yes, color is enhancing, not carrying. If no, you're…
  3. The colorblind test. Simulate deuteranopia. Are status colors still distinct? Categories?
  4. The cross-surface check. Open three different pages of the product. Does the same status look the same color across all three?

What it can do on your machine

Read from SKILL.md and the folder at commit 9e7b281. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are css).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Color Semantic Systems loads about 1.7k tokens when it runs, and up to ~2.6k if it reads all its reference files. Until then it costs about 110 tokens; SKILL.md has 701 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~110
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from hashgraph-online/awesome-codex-plugins at commit 9e7b281, republished under its Apache-2.0 licence (© hashgraph-online). 701 words, ~1,702 tokens.

Download SKILL.mdSave it as .claude/skills/color-semantic-systems/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
color-semantic-systems
description
Use this skill when building or auditing a color system that encodes meaning — status colors (success / warning / error), category colors (department, product line, user segment), brand-role colors (primary, secondary, tertiary). Trigger when designing status badges, picking chart palettes, building a design-system color spec, or fixing inconsistent color use across surfaces. Sub-aspect of `color`; read that first.

Building semantic color systems

A semantic color system encodes meaning through color: green means success, red means error, blue means primary brand. Done well, users learn the system once and read every surface fluently. Done poorly, the same color means different things in different places, and users learn nothing reliably.

What semantic colors should encode

Three useful categories:

Status / state

Conveys the condition of a thing:

  • Success / completed / passed
  • Warning / pending / caution
  • Error / failed / overdue
  • Info / neutral / draft

Status colors map to specific outcome semantics. Use sparingly: every visible status badge is attention spent.

Category

Conveys what kind of thing this is:

  • Project tags (a small palette of distinct hues for project labels)
  • Department or team
  • Product line
  • User segment

Categories should use perceptually distinct hues; for ≤ 7 categories, color works well. Beyond that, the user can't reliably remember which color means which.

Brand role

Conveys importance or role within the design:

  • Primary brand color → primary CTA
  • Secondary / accent → recommended option, focused state
  • Tertiary → light emphasis (informational badges)

Role colors are about hierarchy more than meaning per se.

Building a status palette

A workable status set:

success:    hsl(142 70% ...)   green
warning:    hsl(38 90% ...)    amber
destructive: hsl(0 75% ...)    red
info:       hsl(220 90% ...)   blue
neutral:    hsl(0 0% ...)      grey

For each, define multiple lightness stops:

  • *-50 — tinted background (used for badges, alerts, subtle treatments)
  • *-300 — border or icon
  • *-500 — primary use (badge color, button color)
  • *-700 — text color (dark, used on tinted backgrounds)
  • *-900 — text on dark backgrounds

The pairing rule: *-50 background + *-700 text gives WCAG AA contrast at body size; *-50 + *-500 gives AA for large text only.

Consistency rules for semantic colors

A semantic color system breaks the moment a color means different things in different places. Rules:

  • One color per role. Don't have "two reds" for "destructive" and "important emphasis." Pick one role per color.
  • Status colors stay status. Don't use the destructive red for marketing emphasis. The user reads it as error.
  • Category colors stay categorical. Don't reuse a project-tag color for a status badge.
  • Document the system. A color-system spec page that lists every color and its role keeps the team honest.

Building a category palette

For project tags, departments, or chart series:

  • 5–7 hues maximum for memorability; beyond that, users can't recall what means what.
  • Distribute around the color wheel so adjacent items are visually distinct.
  • Match lightness and saturation across the set so no one color dominates.
  • Test with colorblind simulation to ensure each hue remains distinct.

A workable 7-color category palette:

hsl(220 70% 55%)    blue
hsl(160 60% 45%)    teal
hsl(40 90% 55%)     amber
hsl(310 60% 55%)    pink
hsl(10 70% 55%)     red-orange
hsl(270 50% 55%)    violet
hsl(85 50% 45%)     olive

Each at similar lightness and saturation; each visually distinct from neighbors.

Show full SKILL.md (293 more words)Show less

Brand role palette

The minimum useful set:

  • Primary: filled CTA, focused state, brand emphasis. One hue, used sparingly.
  • Secondary: optional alternative emphasis (often used for "recommended" highlight).
  • Accent / tertiary: micro-emphasis (informational icons, soft highlights).

Most products need only primary plus neutrals; secondary and accent are optional.

Worked example: a complete semantic system

css
:root {
  /* Brand */
  --brand-primary: hsl(220 90% 50%);
  --brand-primary-fg: white;
  --brand-primary-hover: hsl(220 90% 45%);

  /* Neutrals (tinted toward brand) */
  --neutral-50: hsl(220 6% 98%);
  --neutral-100: hsl(220 6% 96%);
  --neutral-200: hsl(220 6% 92%);
  --neutral-300: hsl(220 6% 85%);
  --neutral-400: hsl(220 6% 65%);
  --neutral-500: hsl(220 6% 50%);
  --neutral-600: hsl(220 6% 40%);
  --neutral-700: hsl(220 6% 27%);
  --neutral-800: hsl(220 6% 18%);
  --neutral-900: hsl(220 6% 9%);

  /* Status */
  --success-bg: hsl(142 70% 95%);
  --success-fg: hsl(142 70% 22%);
  --success-border: hsl(142 60% 70%);

  --warning-bg: hsl(38 95% 95%);
  --warning-fg: hsl(38 90% 25%);
  --warning-border: hsl(38 80% 70%);

  --destructive-bg: hsl(0 80% 95%);
  --destructive-fg: hsl(0 75% 32%);
  --destructive-border: hsl(0 60% 70%);

  --info-bg: hsl(210 80% 95%);
  --info-fg: hsl(210 80% 30%);
  --info-border: hsl(210 60% 70%);
}

Every status pair (bg + fg) clears WCAG AA contrast. The neutrals are tinted toward the brand for cohesion.

Anti-patterns

  • Brand color reused as primary semantic. If the brand is red and red also means "destructive," every CTA looks dangerous.
  • Decorative status color. A red border around a card with no actual error. Users learn to dismiss the cue.
  • Inconsistent saturation across statuses. Bright green success, muted yellow warning, vivid red error. The visual hierarchy jumps; nothing reads coherently.
  • Too many statuses. A system with 8 distinct status colors no user can remember.
  • Categories that compete with statuses. A "project" category color happens to be the same red as your destructive status. Users get confused.

Heuristics

  1. The "what does each color mean?" audit. List every color in your design system. Can you name a single specific role for each? If yes, the system is coherent. If a color has multiple roles, conflicts are inevitable.
  2. The grayscale test. Convert to grayscale. Does the visual hierarchy still work? If yes, color is enhancing, not carrying. If no, you're depending on color alone.
  3. The colorblind test. Simulate deuteranopia. Are status colors still distinct? Categories?
  4. The cross-surface check. Open three different pages of the product. Does the same status look the same color across all three?
  • color (parent).
  • color-accessibility-and-mode — accessibility and dark-mode considerations for semantic systems.
  • hierarchy-color-and-tone — color as a hierarchy axis.
  • consistency (cognition) — semantic color is a consistency discipline.

© hashgraph-online, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/color-semantic-systems of hashgraph-online/awesome-codex-plugins.

  • SKILL.md
  • references/semantic-system-cases.md

Open the folder on GitHubat commit 9e7b281

Compare with similar skills

Color Semantic Systems next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Color Semantic Systems compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Color Semantic Systems this skillhashgraph-online/awesome-codex-plugins1.3k—~1.7kAutomated safety check: PassApache-2.0
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
Shadcnsupabase/evals14342 repos~4.5kAutomated safety check: PassApache-2.0

Similar skills

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Figma use_figma Plugin API Rules

    warpdotdev/warp

    Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • Shadcn

    supabase/evals

    Official

    Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI.

    143 GitHub starsUsed in 42 repos~4.5k tokens
    Frontend & DesignAuto-check passed

  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Frontend & DesignAuto-check passed

More from hashgraph-online/awesome-codex-plugins

All 714 skills in this repo

  • Anime Reaction Gif

    hashgraph-online/awesome-codex-plugins

    Create original anime-style reaction stickers as looping GIFs and MP4 previews, using generated character pose sheets and timed key poses.

    1.3k GitHub stars~922 tokensUpdated yesterday
    Auto-check passed

  • Calibredb

    hashgraph-online/awesome-codex-plugins

    Manage and query Calibre libraries with the calibredb CLI (local paths or Calibre Content server URLs).

    1.3k GitHub stars~1k tokensUpdated yesterday
    Auto-check passed

  • Rust API Test Harness

    hashgraph-online/awesome-codex-plugins

    A skill your agent uses when adding, changing, testing, or debugging Rust HTTP APIs and services, especially when Codex needs black-box integration tests, random-port app startup, real database test…

    1.3k GitHub stars~1.7k tokensUpdated yesterday
    Auto-check passed

  • Art

    hashgraph-online/awesome-codex-plugins

    Make a studio's game look like something at build time — a cover from a real frame of the game (free), painted covers, backdrops, textures and character plates from image models through the…

    1.3k GitHub stars~2.4k tokensUpdated yesterday
    Auto-check passed

  • Calle

    hashgraph-online/awesome-codex-plugins

    Use CALL-E from Codex through the calle CLI. An agent skill from hashgraph-online/awesome-codex-plugins.

    1.3k GitHub stars~2.9k tokensUpdated yesterday
    Auto-check passed

  • Game Balance Economy

    hashgraph-online/awesome-codex-plugins

    Balance game difficulty, resources, rewards, probability, progression, economies, and dominant strategies.

    1.3k GitHub stars~618 tokensUpdated yesterday
    Auto-check passed

Categories

Questions about Color Semantic Systems

What does Color Semantic Systems do?

A skill your agent uses when building or auditing a color system that encodes meaning — status colors (success / warning / error), category colors (department, product line, user segment)…. Color Semantic Systems is an agent skill from hashgraph-online/awesome-codex-plugins. Use this skill when building or auditing a color system that encodes meaning — status colors (success / warning / error), category colors (department, product line, user segment), brand-role colors (primary, secondary, tertiary).

When should I use Color Semantic Systems?

Color Semantic Systems fits situations like: auditing a color system that encodes meaning — status colors (success / warning / error); category colors (department; brand-role colors (primary; designing status badges.

How do I install Color Semantic Systems in Claude Code?

Run `npx skills add hashgraph-online/awesome-codex-plugins --skill color-semantic-systems -a claude-code`. Or copy the skill folder (plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/color-semantic-systems in hashgraph-online/awesome-codex-plugins) into .claude/skills/color-semantic-systems in your project. Claude Code loads it when a task matches its description.

How do I install Color Semantic Systems in Codex?

Run `npx skills add hashgraph-online/awesome-codex-plugins --skill color-semantic-systems -a codex`. Or copy the skill folder (plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/color-semantic-systems in hashgraph-online/awesome-codex-plugins) into .agents/skills/color-semantic-systems in your project. Codex loads it when a task matches its description.

Can I use Color Semantic Systems in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add hashgraph-online/awesome-codex-plugins --skill color-semantic-systems -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/color-semantic-systems, .gemini/skills/color-semantic-systems, .github/skills/color-semantic-systems and .opencode/skills/color-semantic-systems in your project.

What does Color Semantic Systems need to run?

SKILL.md names no scripts, command-line tools or credentials: Color Semantic Systems is instructions for the agent only.

Does Color Semantic Systems access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Color Semantic Systems safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Color Semantic Systems use?

Color Semantic Systems is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Color Semantic Systems use?

About 1.7k tokens (SKILL.md is roughly 6.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 875 tokens, read only when the agent opens those files.

What are the alternatives to Color Semantic Systems?

Skills that share tags, products or a category with Color Semantic Systems: Impeccable (bestofjs/bestofjs, 3.1k stars), Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars) and UI Styling (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Color Semantic Systems?

hashgraph-online (a GitHub organization) maintains it in hashgraph-online/awesome-codex-plugins, which has 1,255 GitHub stars. The repository holds 714 skills in this directory. The repository was last updated on October 9, 2026.

Source: hashgraph-online/awesome-codex-plugins on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.