Visual Language

Ghuo Design's visual language creates a cohesive and recognizable experience across all touchpoints. Our visual system is built on fundamental principles that ensure consistency, clarity, and brand recognition.

Color System

Primary Colors

Our primary color palette reflects professionalism and trustworthiness while maintaining accessibility.

Primary Blue

• #1890ff - Main brand color
• Used for primary actions, links, and key interactive elements
• Conveys trust, reliability, and professionalism

Secondary Colors

• #52c41a - Success states and positive actions
• #faad14 - Warning states and cautionary information
• #ff4d4f - Error states and destructive actions
• #722ed1 - Information and neutral states

Neutral Colors

A comprehensive grayscale palette for text, backgrounds, and borders.

• #000000 - Primary text
• #262626 - Secondary text
• #595959 - Tertiary text
• #8c8c8c - Disabled text
• #d9d9d9 - Borders
• #f0f0f0 - Background
• #fafafa - Light background
• #ffffff - Pure white

Color Usage

• High contrast for text and backgrounds (minimum 4.5:1 ratio)
• Semantic colors for consistent meaning across components
• Brand colors used sparingly for maximum impact
• Accessible combinations tested with color blindness simulators

Typography

Font Family

Primary Font Stack:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
             'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

This system font stack ensures:

• Optimal performance across platforms
• Native look and feel on each operating system
• Excellent readability at all sizes
• Consistent rendering across browsers

Type Scale

A harmonious type scale based on mathematical ratios:

• H1: 32px / 2rem - Page titles
• H2: 24px / 1.5rem - Section headings
• H3: 20px / 1.25rem - Subsection headings
• H4: 16px / 1rem - Component headings
• Body Large: 16px / 1rem - Primary body text
• Body: 14px / 0.875rem - Secondary body text
• Caption: 12px / 0.75rem - Captions and labels

Typography Guidelines

• Line height: 1.5 for body text, 1.2 for headings
• Letter spacing: Default for most text, slight adjustments for all-caps
• Font weight: Regular (400) for body, Medium (500) for emphasis, Bold (600) for headings
• Text alignment: Left-aligned for readability, center for special cases

Spacing System

Base Unit

Our spacing system is based on an 8px grid system:

• Base unit: 8px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px

Spacing Applications

• Component padding: Multiples of 8px
• Margins between elements: Consistent spacing scale
• Grid gutters: 16px or 24px depending on context
• Container padding: 16px on mobile, 24px on desktop

Iconography

Icon Style

• Style: Outlined icons for consistency
• Weight: 1.5px stroke width
• Size: 16px, 20px, 24px standard sizes
• Grid: Aligned to pixel grid for crisp rendering

Icon Usage

• Semantic meaning: Icons should have clear, universal meaning
• Consistency: Use the same icon for the same concept throughout
• Accessibility: Always provide text alternatives
• Color: Use system colors for consistency

Layout Principles

Grid System

24-column grid system for flexible layouts:

• Columns: 24 columns for maximum flexibility
• Gutters: 16px between columns
• Margins: 24px on desktop, 16px on mobile
• Breakpoints: 576px, 768px, 992px, 1200px, 1600px

Layout Guidelines

• Alignment: Use consistent alignment patterns
• Whitespace: Generous whitespace for breathing room
• Hierarchy: Clear visual hierarchy through size and spacing
• Balance: Balanced compositions with proper weight distribution

Elevation & Shadows

Shadow System

Subtle shadows to create depth and hierarchy:

• Level 1: 0 2px 8px rgba(0, 0, 0, 0.15) - Cards, buttons
• Level 2: 0 4px 12px rgba(0, 0, 0, 0.15) - Dropdowns, tooltips
• Level 3: 0 8px 24px rgba(0, 0, 0, 0.15) - Modals, overlays
• Level 4: 0 12px 32px rgba(0, 0, 0, 0.15) - Highest elevation

Usage Guidelines

• Consistent elevation for similar components
• Subtle shadows that don't overpower content
• Contextual depth to show relationships between elements

Motion & Animation

Animation Principles

• Purposeful: Animations should have clear functional purpose
• Subtle: Gentle transitions that don't distract
• Fast: Quick animations (200-300ms) for responsiveness
• Consistent: Same easing and timing across similar interactions

Easing Functions

• Ease-out: cubic-bezier(0.215, 0.61, 0.355, 1) - Entrances
• Ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19) - Exits
• Ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1) - Transitions

Accessibility Considerations

Visual Accessibility

• Color contrast: Minimum 4.5:1 for normal text, 3:1 for large text
• Focus indicators: Clear, high-contrast focus states
• Color independence: Information not conveyed by color alone
• Text sizing: Scalable text that works at 200% zoom

Implementation

These visual guidelines are implemented through:

• Design tokens: Centralized values for colors, spacing, typography
• CSS variables: Dynamic theming support
• Component library: Consistent implementation across components
• Documentation: Clear guidelines for designers and developers

By following these visual language guidelines, we create interfaces that are not only beautiful but also functional, accessible, and consistent across all applications.