design-foundations

Name: design-foundations
Availability: InStock
Author: Thompson

Define color palettes, typography scales, spacing rules for visual artifacts.

28|2|Updated Feb 5, 2026

Search Tags:#typography #consistency #accessibility #color #spacing #design-foundations #visual-artifact

Ready to run

npx skills add https://github.com/thompson0012/agents-stack --skill design-foundations-thompson0012

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-foundations
Source: https://github.com/thompson0012/agents-stack/tree/main/skills-optional/using-design/design-foundations
Command: npx skills add https://github.com/thompson0012/agents-stack --skill design-foundations-thompson0012

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent visuals across artifacts are costly and slow; this Skill provides universal design foundations to unify color, typography, spacing, and layout decisions.

Core Features & Use Cases

Establish restrained color palettes, typographic scale, and spacing rules that apply across CSS, slides, PDFs, and documents.
Ensure accessibility and readability through contrast, typography, and layout guidelines.
Example: apply these foundations to a dashboard so that charts, headings, and body copy follow a single design language.

Quick Start

Define a default color palette, typography scale, and spacing rules for your next visual artifact before production.

Frequently Asked Questions about design-foundations

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

FAQPage Schema

How do I create consistent visual design foundations for multiple artifacts?▼

Universal design foundations unify inconsistent visuals by standardizing color, typography, spacing, and layout decisions. Applying these rules ensures dashboards, reports, and CSS maintain a single design language with accessible contrast and readable typography.

What's the best way to ensure accessibility and readability across CSS and reports?▼

Applying universal design foundations ensures accessibility and readability by enforcing contrast guidelines, scalable typographic scales, and structured spacing layouts across CSS, slides, and PDFs, maintaining consistent visual standards.

Does this approach work for building dashboards and presentation slides?▼

Yes, this artifact-agnostic approach works for dashboards and presentation slides by applying universal color, typography, and spacing rules. It ensures charts, headings, and body copy maintain a single design language across all visual outputs.

How do I set up a restrained color palette and typographic scale?▼

Set up a restrained color palette and scalable typographic scale by defining default visual rules before production. This establishes consistent color choices and typography scaling that apply universally across documents, slides, and CSS.

Why do my visual artifacts look inconsistent across different documents?▼

Visual artifacts look inconsistent when they lack universal design foundations for color, typography, and spacing. Unifying these layout decisions before production solves the problem of misaligned visuals across CSS, slides, and dashboards.