skills.rest
JacbK
JacbKCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

colors

Provides themed color palettes and 60-30-10 UI application rules.

Updated Jan 5, 2026
Search Tags:#branding#ui#colors#palette#design-systems#color-theory
One-click install
npx skills add https://github.com/JacbK/jacob-kieser-portfolio --skill colors-jacbk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: colors
Source: https://github.com/JacbK/jacob-kieser-portfolio/tree/main/.agent/skills/colors
Command: npx skills add https://github.com/JacbK/jacob-kieser-portfolio --skill colors-jacbk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers need quick, cohesive color systems for portfolios, avoiding guesswork and inconsistencies across media.

Core Features & Use Cases

  • Quick vibe lookups map moods to palettes for fast decision-making.
  • Full palettes define background, surface, text, and accent roles with practical guidelines.
  • 60-30-10 application framework to ensure balanced color usage in UI and branding.

Quick Start

Choose a vibe and apply the Minimalist palette to your project.

Frequently Asked Questions about colors

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

FAQPage Schema
How do I create consistent color palettes for UI and branding?▼

Consistent color palettes are created by mapping specific moods to predefined color systems. These palettes define background, surface, text, and accent roles to ensure cohesive branding and UI design without guesswork.

What is the 60-30-10 rule for applying color systems in UI design?▼

The 60-30-10 rule is a practical application framework for balanced color usage. It dictates distributing colors across specific percentages of your UI to maintain visual hierarchy and consistent contrast within a design system.

How do I map a specific mood or vibe to a color palette?▼

To map a mood to a color palette, you use vibe lookups that connect emotional tones to predefined sets of colors. This enables fast decision-making when selecting a cohesive color system for your project.

Can I use these color guidelines for portfolio design systems?▼

Yes, these color guidelines are specifically built to streamline portfolio color decisions. They provide ready-to-use palettes and practical application rules to avoid inconsistencies across different media in your portfolio.

What's the best way to define background and accent colors for a design system?▼

The best way to define background and accent colors is by using a full palette system that assigns specific roles to each color. This ensures practical guidelines are followed and consistent contrast is maintained.

Related Skills

Explore More Design & Creative Skills→
resultanyildiziresultanyildizi
4

dominant-color

Extract dominant color and palette from images using ColorThief, outputting hex, rgb, or JSON.

Community
Intermediate
ftc8569ftc8569
2

tailwind

Provide Tailwind color tokens and component patterns for FTC Metrics UIs.

Official
Advanced
Owl-ListenerOwl-Listener
234

ui-composition

Generate layout, typography, and color plans aligned with WCAG accessibility criteria.

Community
Intermediate
OneWave-AIOneWave-AI
245

color-palette-extractor

Extract dominant colors and harmony schemes from images and websites.

Official
Basic