--- title: "Visual Design Foundations" type: skill id: "wshobson-agents/frontend-ui/visual-design-foundations" category: "Design" publisher: "Seth Hobson" license: "MIT" source: "https://github.com/wshobson/agents/tree/7e2fb55" canonical: "https://labs.pho.chat/en/skills/wshobson-agents/frontend-ui/visual-design-foundations" open_in_pho: "https://pho.chat/customize?item=wshobson-agents%2Ffrontend-ui%2Fvisual-design-foundations&utm_source=labs&utm_medium=skill-page&utm_campaign=skills-library" --- # Visual Design Foundations Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency. Source: Seth Hobson (MIT), copied at a pinned commit. Free to use. Part of the Phở Skills library (https://labs.pho.chat/en/skills). Skill set: Frontend and UI design (https://labs.pho.chat/en/skills/wshobson-agents/frontend-ui.md). ## What it covers - When to Use This Skill - Core Systems - 1. Typography Scale - 2. Spacing System - 3. Color System - Quick Start: Design Tokens in Tailwind - Typography Best Practices - Font Pairing - Responsive Typography - Font Loading - Color Theory - Contrast Requirements (WCAG) - Dark Mode Strategy - Color Accessibility - Spacing Guidelines - Component Spacing - Visual Rhythm - Iconography - Icon Sizing System - Icon Component ## Other skills in this set - [Accessibility Compliance](https://labs.pho.chat/en/skills/wshobson-agents/frontend-ui/accessibility-compliance.md): Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building… - [Design System Patterns](https://labs.pho.chat/en/skills/wshobson-agents/frontend-ui/design-system-patterns.md): Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component… - [Interaction Design](https://labs.pho.chat/en/skills/wshobson-agents/frontend-ui/interaction-design.md): Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user… - [Android Mobile Design](https://labs.pho.chat/en/skills/wshobson-agents/frontend-ui/mobile-android-design.md): Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design… - [iOS Mobile Design](https://labs.pho.chat/en/skills/wshobson-agents/frontend-ui/mobile-ios-design.md): Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design… - [React Native Design](https://labs.pho.chat/en/skills/wshobson-agents/frontend-ui/react-native-design.md): Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating… - [Responsive Design](https://labs.pho.chat/en/skills/wshobson-agents/frontend-ui/responsive-design.md): Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or… - [Web Component Design](https://labs.pho.chat/en/skills/wshobson-agents/frontend-ui/web-component-design.md): Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs… - [Next.js App Router Patterns](https://labs.pho.chat/en/skills/wshobson-agents/frontend-ui/nextjs-app-router-patterns.md): Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server… - [React Native Architecture](https://labs.pho.chat/en/skills/wshobson-agents/frontend-ui/react-native-architecture.md): Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or… - [React State Management](https://labs.pho.chat/en/skills/wshobson-agents/frontend-ui/react-state-management.md): Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions. - [Tailwind Design System (v4)](https://labs.pho.chat/en/skills/wshobson-agents/frontend-ui/tailwind-design-system.md): Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing… - [Screen Reader Testing](https://labs.pho.chat/en/skills/wshobson-agents/frontend-ui/screen-reader-testing.md): Test web applications with screen readers including VoiceOver, NVDA, and JAWS. Use when validating screen reader compatibility, debugging accessibility issues, or ensuring assistive technology… - [WCAG Audit Patterns](https://labs.pho.chat/en/skills/wshobson-agents/frontend-ui/wcag-audit-patterns.md): Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing… ## Use it - In Phở: open https://pho.chat/customize?item=wshobson-agents%2Ffrontend-ui%2Fvisual-design-foundations&utm_source=labs&utm_medium=skill-page&utm_campaign=skills-library and press Try, or add it so Phở loads it whenever a request matches. Phở works with your own API key (OpenAI, Anthropic, Google and others). - Full instructions (original SKILL.md, unchanged): https://labs.pho.chat/skills/raw/wshobson-agents/frontend-ui/skills/visual-design-foundations/SKILL.md - Original files: https://github.com/wshobson/agents/tree/7e2fb55 (MIT). - Full machine-readable index: https://labs.pho.chat/skills.json