Visual Design Guidelines

Crafting immersive interfaces with principles of clarity, consistency, and creativity.

🎨 Explore the System

Core Design Principles

Clarity

Prioritize legibility and accessibility with typographic hierarchy and semantic contrast. Every element serves a purpose.

Consistency

Maintain visual parity across platforms with reusable components and systematic spacing. No accidental inconsistencies.

Creativity

Balance innovation with usability - delightful interactions without sacrificing function. Surprise with elegance.

Color Language

Color Palette

Primary
Accent
Highlight

Dynamic gradients and tonal variations create visual depth while ensuring WCAG AA/AAA contrast ratios.

Usage Principles

  • • Use gradients for depth and visual interest
  • • Maintain clear contrast between content and background
  • • Ensure colors remain readable in dark/light modes
  • • Follow accessibility guidelines (WCAG 2.1 AA/AAA)

Type System

Font Stack

Base font:

Inter Variable

Systemic scalability across all device sizes

Display weights:

Optimized for readability

Both dark and light mode friendly

Type Scales

Headings

Font scaling follows a 1.25x progression with variable weights

Body

Balanced line height and letter spacing for optimal readability

Code

Monospace font with semantic color styling for code blocks

Spacing Language

Spacing Units

• Base unit: 1rem

• Scale: 0.5x, 1x, 2x, 4x progression

• Responsive: Auto-detects device density

Layout Principles

  • • Use margin/padding from Tailwind's spacing scale
  • • Maintain consistent vertical rhythm across components
  • • Grid layouts should use auto-fit with minmax sizing
  • • Always provide safe area padding on mobile

Design Components

Buttons

Cards

Base card with shadow and glassmorphism effect

Inputs

Ready to Contribute?

We're always looking for designers who want to help shape our visual language.

🎨

UI/UX Components

View in Figma

📚

Design Challenges

Download Kit

💡

Submit Ideas

Contribution Form