design-foundations

Define color palettes, typography scales, layout rules, and data-visualization conventions across CSS, PowerPoint, and PDFs.

Updated Apr 16, 2026
One-click install
npx skills add https://github.com/yethikrishna/humble --skill design-foundations-yethikrishna
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-foundations
Source: https://github.com/yethikrishna/humble/tree/main/core/kortix-master/opencode/skills/GENERAL-KNOWLEDGE-WORKER/design-foundations
Command: npx skills add https://github.com/yethikrishna/humble --skill design-foundations-yethikrishna

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide provides artifact-agnostic best practices for color, typography, layout, and data visualization to help teams produce consistent, accessible visuals across CSS, PowerPoint, PDFs, and other outputs.

Core Features & Use Cases

  • Establish accessible color palettes and contrast rules usable across formats.
  • Define typography scales and pairings for web, slides, and documents.
  • Provide data-visualization guidance including chart color sequences and labeling rules.
  • Promote brand consistency across artifacts like dashboards, reports, and presentations.
  • Use Case: design a new slide deck that follows the Nexus color palette and typography rules for readability.

Quick Start

Apply these foundations to your next visual artifact by selecting an accent color, typography scale, and layout rules from the guide.

Frequently Asked Questions about design-foundations

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

FAQPage Schema
How do I standardize design visuals across CSS, PowerPoint, and PDF outputs?

To standardize design visuals across CSS, PowerPoint, and PDFs, apply artifact-agnostic guidance for color palettes, typography scales, and layout rules. This ensures consistent, accessible branding across web and print formats without format-specific overrides.

What are the best practices for creating accessible color palettes for dashboards and reports?

Accessible color palettes for dashboards require defined contrast rules and standardized chart color sequences. Establishing these palette conventions artifact-agnostically ensures readability and compliance across both interactive web outputs and static document formats.

How do I define a typography scale that works for both web pages and slide decks?

Defining a typography scale for web and slide decks involves setting standardized font pairings and sizing rules. Applying these typography foundations artifact-agnostically ensures readable text hierarchy across HTML, presentations, and documentation.

Can I use artifact-agnostic design rules for data visualization labeling and chart colors?

Yes, artifact-agnostic design rules provide specific data-visualization conventions including chart color sequences and labeling rules. These guidelines standardize dashboard and report visuals, ensuring data clarity across all rendered output formats.

Does this design guidance work for both web and print formats?

Yes, this design guidance works for both web and print formats by providing artifact-agnostic rules. It standardizes layout, color, and typography for product teams producing diverse outputs like CSS dashboards and PDF documentation.

How do I maintain brand consistency across multiple visual artifacts?

To maintain brand consistency across visual artifacts, apply standardized design foundations including color palettes, typography pairings, and layout rules. This approach unifies the visual identity of slides, reports, and dashboards across different platforms.