{"enrichment":{"faq":[{"a":"Visual Designer helps you build cohesive palettes using the 60-30-10 rule: 60% dominant color, 30% secondary, 10% accent. Start by selecting a primary color aligned with your brand, then use color theory\u2014complementary, analogous, or triadic schemes\u2014to derive supporting colors. Ensure all combinations meet WCAG contrast requirements for accessibility. Visual Designer guides you through semantic meaning (e.g., red for alerts, green for success) so colors communicate intent consistently across your interface.","q":"How do I create a color palette for my website?"},{"a":"Visual Designer covers font pairing rules that balance contrast with harmony. Pair a distinctive serif or sans-serif heading font with a highly legible body typeface\u2014for example, a geometric sans-serif heading with a humanist sans-serif body. Use a modular type scale (commonly 1.25 ratio) to establish hierarchy: each heading level increases proportionally, creating visual rhythm. Visual Designer ensures your typography scale supports responsive design, scaling gracefully across mobile, tablet, and desktop breakpoints.","q":"What are the best fonts for headings and body text?"},{"a":"Visual Designer teaches spacing systems built on an 8-point grid, where all spacing increments (8px, 16px, 24px, 32px, etc.) align to multiples of 8. This creates consistent rhythm and simplifies responsive scaling. Apply the grid to margins, padding, and gaps between components. Visual Designer shows how grid-based spacing ensures alignment, reduces decision fatigue, and makes layouts feel intentional. Pair your grid with breakpoint rules for tablets and phones to maintain alignment across all screen sizes.","q":"How does an 8pt grid system spacing design work?"},{"a":"Visual Designer emphasizes WCAG standards: aim for at least 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt+) to meet AA compliance. AAA compliance requires 7:1 and 4.5:1 respectively. Visual Designer guides you through checking contrast using accessible color contrast checkers and designing dark mode strategies that maintain these ratios. Semantic color choices (alerts, success states) must also pass contrast tests to ensure users with color blindness or low vision can distinguish meaning.","q":"What WCAG color contrast requirements must I follow?"},{"a":"Visual Designer teaches hierarchy through size, color, spacing, and weight. Make primary actions larger and bolder; secondary actions smaller and muted. Use whitespace (negative space) to group related elements and guide the eye. Apply shadow elevation levels to suggest depth\u2014cards and modals rise above the baseline. Visual Designer covers button and card component styles that reinforce hierarchy, ensuring users intuitively understand what to interact with first. Consistent spacing and alignment strengthen the visual structure.","q":"How do I apply visual hierarchy and design principles?"},{"a":"Visual Designer ensures consistency through a design system: establish your color palette, type scale, spacing grid, and component library once, then apply them uniformly. Define responsive breakpoints (mobile, tablet, desktop) and how components adapt\u2014typography scales down, spacing compresses, layouts stack. Support dark mode by deriving a complementary palette that maintains contrast and semantic meaning. Visual Designer guides you through documenting these rules so your entire team builds interfaces that feel cohesive, whether users view them on phones, tablets, or desktops.","q":"How do I design consistent interfaces across devices?"}],"shadow_tags":["design-systems","color-accessibility","typographic-scales","component-patterns","layout-grids","visual-polish","responsive-design","design-tokens","ui-consistency","elevation-shadows"],"summary_rewrite":"Visual Designer guides you through establishing design systems grounded in color theory, type scales, and spacing principles. It covers palette creation using the 60-30-10 rule, WCAG contrast requirements, font pairing strategies, and responsive layout techniques to ensure every visual decision serves your users."},"files":[{"bytes":13711,"path":"skills/visual-designer/SKILL.md","sha256":"52f4d509bd49274987bd1653b9b5bfeaadac34aee3ac35abf959e20190d25748","url":"https://skillfed.io/files/daffy0208/ai-dev-standards/visual-designer/16dc9bb9/SKILL.md"}],"id":"daffy0208/ai-dev-standards/visual-designer","links":{"html":"https://skillfed.io/daffy0208/ai-dev-standards/visual-designer","md":"https://skillfed.io/daffy0208/ai-dev-standards/visual-designer.md","repo":"https://github.com/daffy0208/ai-dev-standards"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":7,"language":"TypeScript","last_updated":"2025-12-25","license":"MIT","name":"Visual Designer","publisher":"daffy0208","stars":32},"relations":{"similar":[{"id":"jamesrochabrun/skills/frontend-designer"},{"id":"Pixel-Process-UG/superkit-agents/ui-design-system"},{"id":"johnlindquist/claude/design"},{"id":"doccker/cc-use-exp/ui-ux-pro-max"},{"id":"wshobson/agents/visual-design-foundations"},{"id":"skills-il/localization/israeli-ui-design-system"},{"id":"manutej/luxor-claude-marketplace/responsive-design"},{"id":"martinholovsky/claude-skills-generator/ui-ux-design"},{"id":"echoVic/boss-skill/design-system"},{"id":"Mindrally/skills/less-best-practices"}]},"slug":{"owner":"daffy0208","repo":"ai-dev-standards","skill":"visual-designer"},"version":"16dc9bb9"}