Design Fundamentals, Agent Instructions

Universal design principles that define why patterns work, how to apply them correctly, and what accessibility requirements are non-negotiable. These are timeless, design-system-agnostic foundations that apply to every surface regardless of vertical or workflow phase.

Load order

Read these files after loading the design system (SKILL.md / DESIGN.md + token modules). The design system tells you what token to use; these files explain why that decision is correct and how to avoid common principle violations.

Module index

File	Purpose
ui-principles.md	Universal visual design principles, hierarchy, layout rhythm, typography placement, color theory, depth & layering, interaction design, responsive adaptation, component behavior
spacing-principles.md	Spacing-specific principles, 4-point grid, proximity grouping, inner vs outer gaps, vertical and horizontal rhythm, heading→paragraph spacing, section and component spacing tiers
ux-principles.md	Interaction & control principles, 30 UX laws, button/control state contracts (9 states), hover/active technique palettes, touch targets, cognitive load, feedback loops
typography-principles.md	Typography-specific principles, type system foundations, scale & modular ratios, readability & measure, accessibility, responsive type, brand tone expression through type
accessibility.md	WCAG 2.1/2.2 compliance, contrast ratios, color-as-information rules, focus visibility, keyboard navigation, motion safety, target sizes, text spacing, semantic structure, ARIA

What these files are NOT