skills.rest
aimentor606
aimentor606COMMUNITY
Explore all skills by this author →
GitHub

design-foundations

Provide artifact-agnostic design guidance for layouts, color, typography, and charts.

Updated Apr 8, 2026
Search Tags:#typography#design#accessibility#visual-design#data-visualization#color-palette
One-click install
npx skills add https://github.com/aimentor606/aether --skill design-foundations-aimentor606
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-foundations
Source: https://github.com/aimentor606/aether/tree/main/core/kortix-master/opencode/skills/GENERAL-KNOWLEDGE-WORKER/design-foundations
Command: npx skills add https://github.com/aimentor606/aether --skill design-foundations-aimentor606

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides concise, artifact-agnostic design rules and patterns to make visual outputs consistent, accessible, and purposeful across formats (web, slides, PDFs, charts, and reports).

Core Features & Use Cases

  • Principles: Restraint, purpose-driven choices, minimal decoration, and accessibility guardrails to reduce visual noise and focus attention.
  • Color & Palette: A default Nexus palette with light/dark modes, semantic colors, chart color sequences, and rules for deriving custom palettes while meeting WCAG AA contrast.
  • Typography & Layout: Readable measures, proportional scales, font strategy by format (web, PDF, slides), and size hierarchy recommendations.
  • Data Visualization: Curated chart color order, chart-type guidance, labeling rules, and KPI card conventions to produce clear, comparable visualizations.
  • Use Case: Turn messy stakeholder slides or ad-hoc charts into a coherent, accessible presentation or dashboard that communicates key insights without decoration.

Quick Start

Apply the design-foundations guidance to create a neutral, accessible slide template with a single accent color and WCAG-compliant text contrast.

Frequently Asked Questions about design-foundations

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

FAQPage Schema
How do I create accessible color palettes that meet WCAG AA contrast for web and PDFs?▼

To ensure visual design WCAG AA compliance, apply a restrained default palette with light and dark modes, semantic colors, and specific contrast rules for deriving custom color sequences across web, PDF, and slide formats.

What's the best way to format typography for slides and dashboards?▼

The best way to format typography for slides and dashboards is applying format-specific font strategies, readable measures, proportional scales, and size hierarchy recommendations to ensure clear visual communication without decoration.

How do I choose the right chart colors for data visualization?▼

Choosing the right chart colors for data visualization involves applying curated chart color sequences, chart-type guidance, labeling rules, and KPI card conventions to produce clear, comparable visualizations.

Do I need design experience to improve messy stakeholder slides?▼

You do not need design experience to improve messy stakeholder slides because this artifact-agnostic guidance enables non-designers to transform ad-hoc charts into coherent, accessible presentations using purpose-driven visual rules.

Can I use the same visual design system across websites and presentations?▼

You can use the same visual design system across websites and presentations because artifact-agnostic design rules provide cohesive layouts, color, and typography strategies applicable across web, slides, PDFs, dashboards, and reports.

Related Skills

Explore More Design & Creative Skills→
hoanghd218hoanghd218
3

mkt-carousel-creator

Generate structured Instagram and TikTok carousel content with slide copy and visual prompts.

Community
Intermediate
deybhaydendeybhayden
9

frontend-design

Translate briefs into production-ready frontend interfaces with semantic markup and responsive layouts.

Community
Intermediate
OpenCovenOpenCoven
20

dataviz-dashboard-ux

Guide chart type selection and dashboard design for accessible React visualizations.

Official
Advanced
genesis-agentsgenesis-agents
2

content-analyzer

Analyze slide content to extract layout decision features and metrics.

Community
Advanced