AgentAlley

Skills · Design & UI

Visual Design Foundations

Unverified●30/40

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.

Originally by wshobson · MIT

Claude Code◐PartialHas SKILL.md but declares no allowed-tools — Claude Code will ask for permission each time
Cursor◐PartialPlain prose you can paste in — but no Cursor rules file
Codex◐PartialPlain prose you can paste in — but no AGENTS.md
Gemini CLI◐PartialPlain prose you can paste in
Copilot◐PartialPlain prose you can paste in — but no Copilot instructions file
npx agentalley add visual-design-foundations

This command does not work yet — the CLI is still being built. Until then, use Raw in the reader below to take the file.

Who is stuck, and on what

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.

The whole source

No sign-in, no blur, nothing truncated
visual-design-foundations/SKILL.md319 lines7.0 KBRawView on GitHub
Frontmatter — 2 properties
namevisual-design-foundations
descriptionApply 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.
1---
2name: visual-design-foundations
3description: 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.
4---A5 — No allowed-tools declared — no way to tell what this skill may touch
5 
6# Visual Design Foundations
7 
8Build cohesive, accessible visual systems using typography, color, spacing, and iconography fundamentals.
9 
10## When to Use This Skill
11 
12- Establishing design tokens for a new project
13- Creating or refining a spacing and sizing system
14- Selecting and pairing typefaces
15- Building accessible color palettes
16- Designing icon systems and visual assets
17- Improving visual hierarchy and readability
18- Auditing designs for visual consistency
19- Implementing dark mode or theming
20 
21## Core Systems
22 
23### 1. Typography Scale
24 
25**Modular Scale** (ratio-based sizing):
26 
27```css
28:root {
29 --font-size-xs: 0.75rem; /* 12px */
30 --font-size-sm: 0.875rem; /* 14px */
31 --font-size-base: 1rem; /* 16px */
32 --font-size-lg: 1.125rem; /* 18px */
33 --font-size-xl: 1.25rem; /* 20px */
34 --font-size-2xl: 1.5rem; /* 24px */
35 --font-size-3xl: 1.875rem; /* 30px */
36 --font-size-4xl: 2.25rem; /* 36px */
37 --font-size-5xl: 3rem; /* 48px */
38}
39```
40 
41**Line Height Guidelines**:
42| Text Type | Line Height |
43|-----------|-------------|
44| Headings | 1.1 - 1.3 |
45| Body text | 1.5 - 1.7 |
46| UI labels | 1.2 - 1.4 |
47 
48### 2. Spacing System
49 
50**8-point grid** (industry standard):
51 
52```css
53:root {
54 --space-1: 0.25rem; /* 4px */
55 --space-2: 0.5rem; /* 8px */
56 --space-3: 0.75rem; /* 12px */
57 --space-4: 1rem; /* 16px */
58 --space-5: 1.25rem; /* 20px */
59 --space-6: 1.5rem; /* 24px */
60 --space-8: 2rem; /* 32px */
61 --space-10: 2.5rem; /* 40px */
62 --space-12: 3rem; /* 48px */
63 --space-16: 4rem; /* 64px */
64}
65```
66 
67### 3. Color System
68 
69**Semantic color tokens**:
70 
71```css
72:root {
73 /* Brand */
74 --color-primary: #2563eb;
75 --color-primary-hover: #1d4ed8;
76 --color-primary-active: #1e40af;
77 
78 /* Semantic */
79 --color-success: #16a34a;
80 --color-warning: #ca8a04;
81 --color-error: #dc2626;
82 --color-info: #0891b2;
83 
84 /* Neutral */
85 --color-gray-50: #f9fafb;
86 --color-gray-100: #f3f4f6;
87 --color-gray-200: #e5e7eb;
88 --color-gray-300: #d1d5db;
89 --color-gray-400: #9ca3af;
90 --color-gray-500: #6b7280;
91 --color-gray-600: #4b5563;
92 --color-gray-700: #374151;
93 --color-gray-800: #1f2937;
94 --color-gray-900: #111827;
95}
96```
97 
98## Quick Start: Design Tokens in Tailwind
99 
100```js
101// tailwind.config.js
102module.exports = {
103 theme: {
104 extend: {
105 fontFamily: {
106 sans: ["Inter", "system-ui", "sans-serif"],
107 mono: ["JetBrains Mono", "monospace"],
108 },
109 fontSize: {
110 xs: ["0.75rem", { lineHeight: "1rem" }],
111 sm: ["0.875rem", { lineHeight: "1.25rem" }],
112 base: ["1rem", { lineHeight: "1.5rem" }],
113 lg: ["1.125rem", { lineHeight: "1.75rem" }],
114 xl: ["1.25rem", { lineHeight: "1.75rem" }],
115 "2xl": ["1.5rem", { lineHeight: "2rem" }],
116 },
117 colors: {
118 brand: {
119 50: "#eff6ff",
120 500: "#3b82f6",
121 600: "#2563eb",
122 700: "#1d4ed8",
123 },
124 },
125 spacing: {
126 // Extends default with custom values
127 18: "4.5rem",
128 88: "22rem",
129 },
130 },
131 },
132};
133```
134 
135## Typography Best Practices
136 
137### Font Pairing
138 
139**Safe combinations**:
140 
141- Heading: **Inter** / Body: **Inter** (single family)
142- Heading: **Playfair Display** / Body: **Source Sans Pro** (contrast)
143- Heading: **Space Grotesk** / Body: **IBM Plex Sans** (geometric)
144 
145### Responsive Typography
146 
147```css
148/* Fluid typography using clamp() */
149h1 {
150 font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
151 line-height: 1.1;
152}
153 
154p {
155 font-size: clamp(1rem, 2vw + 0.5rem, 1.125rem);
156 line-height: 1.6;
157 max-width: 65ch; /* Optimal reading width */
158}
159```
160 
161### Font Loading
162 
163```css
164/* Prevent layout shift */
165@font-face {
166 font-family: "Inter";
167 src: url("/fonts/Inter.woff2") format("woff2");
168 font-display: swap;
169 font-weight: 400 700;
170}
171```
172 
173## Color Theory
174 
175### Contrast Requirements (WCAG)
176 
177| Element | Minimum Ratio |
178| ------------------ | ------------- |
179| Body text | 4.5:1 (AA) |
180| Large text (18px+) | 3:1 (AA) |
181| UI components | 3:1 (AA) |
182| Enhanced | 7:1 (AAA) |
183 
184### Dark Mode Strategy
185 
186```css
187:root {
188 --bg-primary: #ffffff;
189 --bg-secondary: #f9fafb;
190 --text-primary: #111827;
191 --text-secondary: #6b7280;
192 --border: #e5e7eb;
193}
194 
195[data-theme="dark"] {
196 --bg-primary: #111827;
197 --bg-secondary: #1f2937;
198 --text-primary: #f9fafb;
199 --text-secondary: #9ca3af;
200 --border: #374151;
201}
202```
203 
204### Color Accessibility
205 
206```tsx
207// Check contrast programmatically
208function getContrastRatio(foreground: string, background: string): number {
209 const getLuminance = (hex: string) => {
210 const rgb = hexToRgb(hex);
211 const [r, g, b] = rgb.map((c) => {
212 c = c / 255;
213 return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
214 });
215 return 0.2126 * r + 0.7152 * g + 0.0722 * b;
216 };
217 
218 const l1 = getLuminance(foreground);
219 const l2 = getLuminance(background);
220 const lighter = Math.max(l1, l2);
221 const darker = Math.min(l1, l2);
222 
223 return (lighter + 0.05) / (darker + 0.05);
224}
225```
226 
227## Spacing Guidelines
228 
229### Component Spacing
230 
231```
232Card padding: 16-24px (--space-4 to --space-6)
233Section gap: 32-64px (--space-8 to --space-16)
234Form field gap: 16-24px (--space-4 to --space-6)
235Button padding: 8-16px vertical, 16-24px horizontal
236Icon-text gap: 8px (--space-2)
237```
238 
239### Visual Rhythm
240 
241```css
242/* Consistent vertical rhythm */
243.prose > * + * {
244 margin-top: var(--space-4);
245}
246 
247.prose > h2 + * {
248 margin-top: var(--space-2);
249}
250 
251.prose > * + h2 {
252 margin-top: var(--space-8);
253}
254```
255 
256## Iconography
257 
258### Icon Sizing System
259 
260```css
261:root {
262 --icon-xs: 12px;
263 --icon-sm: 16px;
264 --icon-md: 20px;
265 --icon-lg: 24px;
266 --icon-xl: 32px;
267}
268```
269 
270### Icon Component
271 
272```tsx
273interface IconProps {
274 name: string;
275 size?: "xs" | "sm" | "md" | "lg" | "xl";
276 className?: string;
277}
278 
279const sizeMap = {
280 xs: 12,
281 sm: 16,
282 md: 20,
283 lg: 24,
284 xl: 32,
285};
286 
287export function Icon({ name, size = "md", className }: IconProps) {
288 return (
289 <svg
290 width={sizeMap[size]}
291 height={sizeMap[size]}
292 className={cn("inline-block flex-shrink-0", className)}
293 aria-hidden="true"
294 >
295 <use href={`/icons.svg#${name}`} />
296 </svg>
297 );
298}
299```
300 
301## Best Practices
302 
3031. **Establish Constraints**: Limit choices to maintain consistency
3042. **Document Decisions**: Create a living style guide
3053. **Test Accessibility**: Verify contrast, sizing, touch targets
3064. **Use Semantic Tokens**: Name by purpose, not appearance
3075. **Design Mobile-First**: Start with constraints, add complexity
3086. **Maintain Vertical Rhythm**: Consistent spacing creates harmony
3097. **Limit Font Weights**: 2-3 weights per family is sufficient
310 
311## Common Issues
312 
313- **Inconsistent Spacing**: Not using a defined scale
314- **Poor Contrast**: Failing WCAG requirements
315- **Font Overload**: Too many families or weights
316- **Magic Numbers**: Arbitrary values instead of tokens
317- **Missing States**: Forgetting hover, focus, disabled
318- **No Dark Mode Plan**: Retrofitting is harder than planning
319 

Reviews

Installed this one?Write the first review and take the Trailblazer badge.

Reviews only open after a real install, so this is empty — and we leave it empty rather than invent one.

Alternatives

Also in Design & UI
Brand Protection — Amazon 🛡️Amazon brand protection toolkit. Detect hijackers, counterfeits, and unauthorized sellers. Includes MAP violation monitoring, trademark abuse detection, complaint templates for Brand Registry, and test buy evidence collection guides. No API key required.Design & UI · MIT◐····●35/40Brand Protection — eBay 🛡️eBay brand protection toolkit. Detect unauthorized sellers, counterfeits, and VeRO violations. Includes price monitoring, trademark abuse detection, VeRO complaint templates, and enforcement guides. No API key required.Design & UI · MIT◐····●35/40Brand Protection — Shopify/DTC 🛡️Shopify/DTC brand protection toolkit. Detect counterfeit stores, unauthorized resellers, and trademark violations. Includes DMCA takedown templates, domain monitoring, and social media infringement detection. No API key required.Design & UI · MIT◐····●35/40Brand Protection — TikTok Shop 🛡️TikTok Shop brand protection toolkit. Detect unauthorized sellers, counterfeit products, and affiliate abuse. Includes TikTok IP Protection reporting, influencer misuse detection, and complaint templates. No API key required.Design & UI · MIT◐····●35/40