design-foundations

Apply artifact-agnostic design rules for colors, typography, spacing, and charts.

28|2|Updated Feb 5, 2026
One-click install
npx skills add https://github.com/labs21-dev/agents-stack --skill design-foundations-labs21-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-foundations
Source: https://github.com/labs21-dev/agents-stack/tree/main/skills-optional/using-design/design-foundations
Command: npx skills add https://github.com/labs21-dev/agents-stack --skill design-foundations-labs21-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Use when choosing colors, typography, spacing, or chart styling for a visual artifact and no project-specific design system already governs the work.

Core Features & Use Cases

  • Color palettes and accessibility guidance for UI and print
  • Typography hierarchy, sizing rules, and layout guidance
  • Data visualization best practices: color sequences, accessible charts, KPI cards
  • Consistent design rules to scale across CSS, slides, and documents
  • Real-world example: apply foundations to craft a cohesive dashboard or slide deck

Quick Start

Describe your output and constraints, then apply these foundations to choose colors, typography, and spacing.

Frequently Asked Questions about design-foundations

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

FAQPage Schema
How do I ensure color accessibility and visual consistency across UI, slides, and documents without a design system?

To ensure color accessibility and visual consistency without a design system, apply artifact-agnostic design foundations that enforce rules for color palettes, typography scales, and spacing across CSS, slides, and documents.

What is the best way to choose accessible color palettes for data visualization and KPI cards?

The best way to choose accessible color palettes for data visualization is to apply design foundations that enforce specific rules for chart color sequences, accessible charts, and KPI card layouts to maintain visual clarity.

How do I set up typography hierarchy and layout guidance for a new project?

To set up typography hierarchy and layout guidance for a new project, use design foundations that provide typography sizing rules and spacing constraints, ensuring consistent visual structure across CSS and print artifacts.

Can I use these design foundations to style both a cohesive dashboard and a slide deck?

Yes, you can use these design foundations to style both a cohesive dashboard and a slide deck, as the guidance is artifact-agnostic and applies consistent color, typography, and chart styling rules across multiple visual output formats.

When should I not use artifact-agnostic design foundations for my visual output?

You should not use artifact-agnostic design foundations when a project-specific design system already governs the work, as those existing rules will take precedence over general color, typography, and spacing guidance for your visual artifacts.