design-foundations

Installation
SKILL.md

Design Foundations

Artifact-agnostic design guidance — works for CSS, PowerPoint, matplotlib, PDF, or any visual output.

Core Principles

  1. Restraint — 1 accent + neutrals. 2 fonts max, 2-3 weights. Earn every element; decoration must encode meaning.
  2. Purpose — Every choice answers "what does this help the viewer understand?" Color encodes meaning, type size signals hierarchy, spacing groups content, animation reveals information.
  3. No decoration — Do not add illustrations, stock images, decorative icons, or clip art unless explicitly requested. Typography, whitespace, and layout are the primary visual tools.
  4. Accessibility — WCAG AA contrast (4.5:1 body, 3:1 large text). Never rely on color alone. 12px text floor, 16px body copy. Respect prefers-reduced-motion.

Color — Default Palette & Accessibility

Philosophy: Earn Every Color

Color is emphasis — every non-neutral color must answer: what does this help the viewer understand? The viewer's eye goes where color is; if everything is colored, nothing stands out.

Installs
3
Repository
kortix-ai/suna
GitHub Stars
20.0K
First Seen
May 28, 2026
design-foundations — kortix-ai/suna