Visual Design Foundations
Generate consistent color scales and token-ready palettes (OKLCH/HSL) while implementing UI so solo builders avoid one-off hex choices.
Overview
Visual Design Foundations is an agent skill for the Build phase that supplies OKLCH and programmatic color-scale patterns for consistent UI tokens.
Install
npx skills add https://github.com/wshobson/agents --skill visual-design-foundationsWhat is this skill?
- OKLCH-based perceptually uniform color scales with documented L/C/H steps (50–950)
- Programmatic `generateColorScale` helper for hue/saturation-driven HSL ramps
- Semantic palette patterns for brand, success, warning, and error hues
- CSS custom properties structure ready for design tokens in `:root`
- Reference-oriented snippets for implementing—not replacing—full design systems
- 11-step lightness stops (50–950) in programmatic scale generation
Adoption & trust: 8.3k installs on skills.sh; 36.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your UI colors look uneven across shades and semantic states because every screen picked hex values in isolation.
Who is it for?
Indie devs theming a web app, extension, or mobile shell who want copy-paste color math during frontend implementation.
Skip if: Early Validate work with no UI yet, or full brand identity workshops with no code in scope.
When should I use this skill?
Implementing UI color systems, theme tokens, or semantic state colors during frontend build.
What do I get? / Deliverables
You adopt repeatable 11-step scales and semantic hues in CSS or TS helpers so components share a coherent visual foundation.
- OKLCH or HSL color scale definitions
- Semantic palette variables for brand and status colors
Recommended Skills
Journey fit
Visual foundations belong in Build frontend where tokens, themes, and CSS variables are actually applied in code. Frontend subphase is where perceptual color systems and semantic palette steps translate directly into components and global styles.
How it compares
Token and palette reference for implementation—not information architecture or layout planning.
Common Questions / FAQ
Who is visual-design-foundations for?
Solo builders and small frontend teams using coding agents who need systematic color ramps while building interfaces.
When should I use visual-design-foundations?
During Build frontend when defining CSS variables, theme objects, or component color props—especially before shipping marketing and app UI together.
Is visual-design-foundations safe to install?
It is documentation and code patterns without runtime hooks; confirm repo trust via the Security Audits panel on this Prism page.
SKILL.md
READMESKILL.md - Visual Design Foundations
# Color Systems Reference ## Color Palette Generation ### Perceptually Uniform Scales Using OKLCH for perceptually uniform color scales: ```css /* OKLCH: Lightness, Chroma, Hue */ :root { /* Generate a blue scale with consistent perceived lightness steps */ --blue-50: oklch(97% 0.02 250); --blue-100: oklch(93% 0.04 250); --blue-200: oklch(86% 0.08 250); --blue-300: oklch(75% 0.12 250); --blue-400: oklch(65% 0.16 250); --blue-500: oklch(55% 0.2 250); /* Primary */ --blue-600: oklch(48% 0.18 250); --blue-700: oklch(40% 0.16 250); --blue-800: oklch(32% 0.12 250); --blue-900: oklch(25% 0.08 250); --blue-950: oklch(18% 0.05 250); } ``` ### Programmatic Scale Generation ```tsx function generateColorScale( hue: number, saturation: number = 100, ): Record<string, string> { const lightnessStops = [ { name: "50", l: 97 }, { name: "100", l: 93 }, { name: "200", l: 85 }, { name: "300", l: 75 }, { name: "400", l: 65 }, { name: "500", l: 55 }, { name: "600", l: 45 }, { name: "700", l: 35 }, { name: "800", l: 25 }, { name: "900", l: 18 }, { name: "950", l: 12 }, ]; return Object.fromEntries( lightnessStops.map(({ name, l }) => [ name, `hsl(${hue}, ${saturation}%, ${l}%)`, ]), ); } // Generate semantic colors const brand = generateColorScale(220); // Blue const success = generateColorScale(142); // Green const warning = generateColorScale(38); // Amber const error = generateColorScale(0); // Red ``` ## Semantic Color Tokens ### Two-Tier Token System ```css /* Tier 1: Primitive colors (raw values) */ :root { --primitive-blue-500: #3b82f6; --primitive-blue-600: #2563eb; --primitive-green-500: #22c55e; --primitive-red-500: #ef4444; --primitive-gray-50: #f9fafb; --primitive-gray-900: #111827; } /* Tier 2: Semantic tokens (purpose-based) */ :root { /* Background */ --color-bg-primary: var(--primitive-gray-50); --color-bg-secondary: white; --color-bg-tertiary: var(--primitive-gray-100); --color-bg-inverse: var(--primitive-gray-900); /* Text */ --color-text-primary: var(--primitive-gray-900); --color-text-secondary: var(--primitive-gray-600); --color-text-tertiary: var(--primitive-gray-400); --color-text-inverse: white; --color-text-link: var(--primitive-blue-600); /* Border */ --color-border-default: var(--primitive-gray-200); --color-border-strong: var(--primitive-gray-300); --color-border-focus: var(--primitive-blue-500); /* Interactive */ --color-interactive-primary: var(--primitive-blue-600); --color-interactive-primary-hover: var(--primitive-blue-700); --color-interactive-primary-active: var(--primitive-blue-800); /* Status */ --color-status-success: var(--primitive-green-500); --color-status-warning: var(--primitive-amber-500); --color-status-error: var(--primitive-red-500); --color-status-info: var(--primitive-blue-500); } ``` ### Component Tokens ```css /* Tier 3: Component-specific tokens */ :root { /* Button */ --button-bg: var(--color-interactive-primary); --button-bg-hover: var(--color-interactive-primary-hover); --button-text: white; --button-border-radius: 0.375rem; /* Input */ --input-bg: var(--color-bg-secondary); --input-border: var(--color-border-default); --input-border-focus: var(--color-border-focus); --input-text: var(--color-text-primary); --input-placeholder: var(--color-text-tertiary); /* Card */ --card-bg: var(--color-bg-secondary); --card-border: var(--color-border-default); --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } ``` ## Dark Mode Implementation ### CSS Custom Properties Approach ```css /* Light theme (default) */ :root { --color-bg-primary: #ffffff; --color-bg-secondary: #f9fafb; --color-bg-tertiary: #f3f4f6; --color-text-primary: #111827; --color-text-secondary: #4b5563; --color-border-default: #e5e7eb; } /* Dark theme */ [data-theme="dark"] { --color-bg-primary: #111827; --color-bg-seco