skills.rest
mpazaryna
mpazarynaCOMMUNITY
Explore all skills by this author →
GitHub

design-principles

Provide universal design principles for typography, color, hierarchy, motion, and accessibility.

1|Updated Sep 17, 2025
Search Tags:#typography#design#accessibility#color#ui-ux#hierarchy#motion
One-click install
npx skills add https://github.com/mpazaryna/claude-toolkit --skill design-principles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-principles
Source: https://github.com/mpazaryna/claude-toolkit/tree/main/generated-skills/design-principles
Command: npx skills add https://github.com/mpazaryna/claude-toolkit --skill design-principles

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates arbitrary aesthetic decisions by providing foundational design theory that applies across any platform, helping you build interfaces that feel designed rather than generated.

Core Features & Use Cases

  • Typography Guidance: Font selection, hierarchy, and pairing for any context.
  • Color Systems: Palette building, contrast, and dark mode implementation.
  • Use Case: When starting a new fintech app, use this Skill to establish typography direction, build a professional color palette, and create visual hierarchy that guides users effectively.

Quick Start

Help me choose typography for a developer tool that needs precision and readability.

Frequently Asked Questions about design-principles

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

FAQPage Schema
How do I establish a consistent typography system for my web and mobile app?▼

Typography guidance covers font selection, hierarchy, and pairing across platforms. This Skill provides foundational principles for choosing typefaces that balance readability and precision, then scaling them into a cohesive system for web, mobile, and desktop.

What's the best approach to build a color palette with proper contrast and accessibility?▼

Color systems in this Skill address palette building, contrast ratios, and dark mode implementation. You define a primary palette, validate contrast levels for accessibility compliance, then apply it consistently across UI components and interface states.

How do I create visual hierarchy that guides users through an interface?▼

Visual hierarchy combines typography, color, and spacing to emphasize content priority. This Skill teaches you to layer these elements intentionally so users navigate naturally without arbitrary aesthetic choices clouding the design direction.

Can I use these design principles across different platforms like iOS and web?▼

Yes. Universal design principles apply across typography, color, hierarchy, motion, and accessibility regardless of platform. This Skill provides platform-agnostic foundations you can hand off to platform-specific tools like web-design or swift-ui for implementation.

What accessibility considerations should I apply during design?▼

Accessibility is one of five principle domains covered here, integrated with typography, color, and hierarchy decisions. The Skill guides you through contrast, readability, and motion constraints so designs serve all users, then supports design audits across web, mobile, and desktop.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
jmanuelrosajmanuelrosa
2

designing-frontend

Codify design rules for consistent, accessible web interfaces.

Community
Advanced
sero-labssero-labs
19

redesign-existing-projects

Audit and refine typography, color palettes, layouts, and interactive states in existing web projects.

Official
Intermediate
45black45black
1

ui-review

Identify accessibility, design-system, and legaltech pattern gaps in user interfaces.

Community
Advanced