ui-visual-design-system

name	UI Visual Design System
description	Visual design mastery covering typography systems, color theory and accessible palettes, spacing and layout grids, visual hierarchy, iconography, elevation and depth, and responsive visual design across platforms.
triggers	["visual design","typography","color palette","design system","spacing system","visual hierarchy","icon design","UI design","color theory"]

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

1. Hierarchy is communication — visual weight directs attention and reveals structure
2. Consistency breeds trust — systematic visual rules create predictable, professional interfaces
3. White space is not empty space — it is the most powerful tool for grouping, separating, and emphasizing
4. Restraint over decoration — every visual element must serve function; remove those that do not
5. 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, 96px

Base-8 scale (recommended for spacious UIs):

8px, 16px, 24px, 32px, 48px, 64px, 80px, 96px, 128px

Spacing 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)

1. Size — larger elements command attention first
2. Color/Contrast — high-contrast and saturated colors draw the eye
3. Position — top-left (LTR languages) and center-screen hold priority
4. Weight — bolder elements stand out from regular weight
5. White space — isolated elements surrounded by space demand attention
6. 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