UI Visual Design System — Visual Excellence Framework
Visual Design Philosophy
"Good design is as little design as possible. Less, but better — because it concentrates on the essential aspects, and the products are not burdened with non-essentials." — Dieter Rams
Visual design is the language through which interfaces communicate hierarchy, meaning, and emotional tone. Every visual decision — typeface, color, spacing, elevation — either clarifies or obscures the user's path. Pursue clarity ruthlessly.
Core Principles
- Hierarchy is communication — visual weight directs attention and reveals structure
- Consistency breeds trust — systematic visual rules create predictable, professional interfaces
- White space is not empty space — it is the most powerful tool for grouping, separating, and emphasizing
- Restraint over decoration — every visual element must serve function; remove those that do not
- Accessibility is non-negotiable — visual choices that exclude users are design failures
Typography System
Type Scale Design
Build a modular type scale using a consistent ratio. The most common scales:
- Minor Third (1.200): Subtle, elegant — suited for content-heavy apps
- Major Third (1.250): Balanced — good default for most applications
- Perfect Fourth (1.333): Strong contrast — suited for marketing and editorial
- Augmented Fourth (1.414): Dramatic — suited for expressive, creative products
Example scale (Major Third, base 16px):
xs: 10px (0.625rem)
sm: 13px (0.8125rem)
base: 16px (1rem)
lg: 20px (1.25rem)
xl: 25px (1.5625rem)
2xl: 31px (1.9375rem)
3xl: 39px (2.4375rem)
4xl: 49px (3.0625rem)Typography Best Practices
Font Selection:
- Limit to 2 typefaces maximum: one for headings, one for body (or one typeface at different weights)
- Sans-serif for UI elements and body text on screens (Inter, SF Pro, Roboto, Geist)
- Variable fonts reduce file size and enable fluid weight/width adjustment
- Ensure selected fonts support all required character sets and languages
Readability Rules:
- Body text: 16px minimum on web, 14px acceptable on desktop apps, never below 12px
- Line height: 1.4-1.6 for body text, 1.1-1.3 for headings
- Line length: 45-75 characters per line (measure) for optimal readability
- Paragraph spacing: 0.5-1.0x the body line height
- Letter spacing: slight increase (+0.01-0.02em) for all-caps text, reduce (-0.01em) for large headings
Hierarchy Through Typography:
- Use weight (bold/medium/regular) more than size for subtle hierarchy
- Reserve size jumps for major structural distinctions (page title vs. section heading)
- Color/opacity variation as tertiary hierarchy tool (primary text vs. secondary/caption)
- Limit distinct text styles to 6-8 across the entire application
Color System
Color Architecture
Semantic Color Categories:
- Primary: Brand identity color — used for key actions, active states, links
- Secondary: Complementary accent — used for secondary actions, highlights
- Neutral: Gray scale — used for text, borders, backgrounds, surfaces
- Success: Green spectrum — confirmations, completed states
- Warning: Amber/orange spectrum — caution, pending states
- Error: Red spectrum — errors, destructive actions, required indicators
- Info: Blue spectrum — informational messages, tips
Color Scale Generation:
- Generate 10-step scale per color (50-900) for systematic flexibility
- 50 = lightest (background tint), 500 = base value, 900 = darkest (text on light)
- Ensure perceptual uniformity across steps (use OKLCH or CIELAB color space)
- Tools: Leonardo by Adobe, Radix Colors, Tailwind color generator
Accessibility Color Requirements
Contrast Ratios (WCAG 2.2):
- Normal text (<24px): 4.5:1 minimum against background
- Large text (>=24px or >=18.67px bold): 3:1 minimum
- UI components and graphical objects: 3:1 minimum against adjacent colors
- Enhanced (AAA): 7:1 for normal text, 4.5:1 for large text
Color Independence:
- Never use color as the sole indicator of meaning — pair with icons, text, or patterns
- Error states: red color + error icon + descriptive text
- Charts and graphs: use patterns, labels, and distinguishable hues (not just red/green)
- Test with color blindness simulators (protanopia, deuteranopia, tritanopia)
Dark Mode Design
- Do not simply invert colors — redesign the elevation and emphasis model
- Dark mode backgrounds: not pure black (#000) — use desaturated dark grays (#121212-#1E1E1E)
- Reduce color saturation by 10-20% for dark backgrounds to prevent vibration
- Elevated surfaces get lighter in dark mode (opposite of light mode shadow approach)
- Text contrast: use 87% white (not 100%) for primary text on dark backgrounds to reduce eye strain
Spacing System
Spacing Scale
Use a base-4 or base-8 scale for consistent spacing:
Base-4 scale (recommended for dense UIs):
4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 96pxBase-8 scale (recommended for spacious UIs):
8px, 16px, 24px, 32px, 48px, 64px, 80px, 96px, 128pxSpacing Application Rules
- Component internal padding: 8-16px (compact) or 12-24px (comfortable)
- Between related elements: 8-12px (grouping by proximity — Gestalt law)
- Between unrelated groups: 24-32px (separation)
- Section spacing: 48-80px
- Page margins: 16px (mobile), 24-32px (tablet), 48-80px (desktop)
Layout Grid
- 12-column grid for maximum flexibility (divisible by 2, 3, 4, 6)
- Column gutter: 16-24px (responsive, wider on larger screens)
- Max content width: 1200-1440px for readability, centered with side padding
- Use CSS Grid and Flexbox — avoid float-based layouts
- Subgrid (CSS subgrid) for component-level alignment to parent grid
Visual Hierarchy
The Visual Hierarchy Toolkit (ordered by impact)
- Size — larger elements command attention first
- Color/Contrast — high-contrast and saturated colors draw the eye
- Position — top-left (LTR languages) and center-screen hold priority
- Weight — bolder elements stand out from regular weight
- White space — isolated elements surrounded by space demand attention
- Motion — animated elements capture attention (use sparingly)
Hierarchy Application
- Every screen should have exactly one primary focal point — the main action or content
- Create clear layers: primary (what to notice), secondary (supporting context), tertiary (background/metadata)
- Squint test: when blurred, the visual structure should remain distinguishable
- Test hierarchy with grayscale rendering to verify it does not rely solely on color
Elevation and Depth
Elevation System
Level 0: Flat surface (0px shadow) — background, canvas
Level 1: Low (0 1px 3px rgba(0,0,0,0.12)) — cards, tiles
Level 2: Medium (0 4px 6px rgba(0,0,0,0.12)) — dropdowns, popovers
Level 3: High (0 8px 16px rgba(0,0,0,0.12)) — modals, dialogs
Level 4: Highest (0 16px 32px rgba(0,0,0,0.16)) — toasts, floating elements- Higher elevation = closer to user = more important/temporary
- Use elevation consistently: persistent UI at level 0-1, transient UI at level 2-4
- Dark mode: use surface tint (lighter background) instead of shadow for elevation
Iconography
Icon Design Rules
- Consistent style: outline OR filled, not mixed (pick one system-wide)
- Minimum touch target: 44x44pt even if icon is visually 24x24
- Always pair icons with text labels in navigation — icons alone are ambiguous
- Standard sizes: 16px (inline), 20px (buttons), 24px (navigation), 32px (feature)
- Consistent stroke width across all icons (typically 1.5-2px at 24px size)
Cross-Referencing
- For design token implementation, reference
design-systems-architecture - For accessibility requirements, reference
accessibility-inclusive-design - For motion and animation, reference
interaction-motion-design - For mobile-specific visual design, reference
mobile-ux-design
v3.0 Cross-References
The v3.0 upgrade introduces production CSS implementation references, Figma workflow integration, and multi-brand design system architecture that extend visual design systems into implementation and scale.
Modern CSS Implementation — component-patterns-code/references/css-modern-patterns.md
The component-patterns-code/references/css-modern-patterns.md reference provides production CSS patterns that implement the visual design system principles above. Key coverage includes: container queries for component-level responsive design (replacing media query dependence); :has() selector for parent-aware styling enabling contextual visual variations; anchor positioning for tooltip, popover, and dropdown placement without JavaScript; view transitions API for smooth page and state transitions; OKLCH color space for perceptually uniform color manipulation (superior to HSL for generating accessible color scales as described in the Color System section); and @layer for cascade management in multi-team design system environments. Essential for translating visual design specifications into maintainable, modern CSS.
Figma Design Tool Workflows — figma-design-tool-workflows
The figma-design-tool-workflows skill covers Figma-specific workflows for visual design system implementation. Includes: Figma variable modes for encoding the spacing scales, type scales, and color systems defined in this skill as structured design tokens; design token extraction pipelines that export Figma variables to Style Dictionary or Tokens Studio formats; and the MCP-powered design-to-code flywheel that maintains synchronization between Figma design system files and production CSS/component libraries. Directly applicable to maintaining visual consistency across design and code.
Multi-Brand Theming Architecture — design-systems-architecture/references/maturity-model-multi-brand.md
The design-systems-architecture/references/maturity-model-multi-brand.md reference addresses scaling visual design systems across multiple brands, products, or white-label deployments. Covers multi-tier token architecture (global tokens, brand tokens, component tokens), theme switching strategies, and maturity model stages from single-product design systems through enterprise multi-brand platforms. Essential when the visual design system defined in this skill needs to support brand variants while maintaining structural consistency.
Key Sources
- Rams, D. "Ten Principles for Good Design"
- Muller-Brockmann, J. "Grid Systems in Graphic Design"
- Material Design 3 color and typography specifications
- Apple Human Interface Guidelines visual design
- W3C WCAG 2.2 contrast requirements