iPseudo IDE

🎯 Design Principles

Glass Morphism: Soft UI with depth and backdrop blur
Modern Aesthetics: Clean typography with Inter font family
Performance First: Hardware-accelerated animations
Accessibility: High contrast ratios in both themes
Responsive Design: Adaptive layouts for all screen sizes

🎨 Color Palette

Purple 500

rgb(147, 51, 234)

Purple 600

rgb(139, 92, 246)

Blue 500

rgb(59, 130, 246)

Success

rgb(16, 185, 129)

🔤 Typography

Primary Font: Inter (UI and content)
Code Font: JetBrains Mono (code blocks)
Font Sizes: 12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px
Font Weights: 400 (regular), 500 (medium), 600 (semibold), 700 (bold), 800 (extrabold)

✨ Glass Morphism

Our signature design feature:

css

background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.08) 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 24px;
backdrop-filter: blur(24px) saturate(200%);
box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.3),
    0 0 100px rgba(147, 51, 234, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);

🎭 Components

Buttons

Cards

Example Card

This is how our glass morphism cards look with purple glow on hover.

📏 Spacing Scale

Variable	Size	Usage
`--space-xs`	0.5rem (8px)	Tiny gaps
`--space-sm`	1rem (16px)	Small spacing
`--space-md`	1.5rem (24px)	Medium spacing
`--space-lg`	2rem (32px)	Large spacing
`--space-xl`	3rem (48px)	Extra large spacing

🌟 Border Radius

Variable	Size	Usage
`--radius-sm`	8px	Small elements
`--radius-md`	12px	Buttons, badges
`--radius-lg`	16px	Cards
`--radius-xl`	24px	Large containers, modals

🎯 Key Features

24-32px backdrop blur for glass morphism effect
Purple/blue gradient accents throughout the UI
Layered shadows with purple glow for depth
Smooth transitions with cubic-bezier easing
Responsive design from mobile to desktop
Dark theme optimized for comfortable viewing

📦 Download Design Assets

Want to use our design system in your project? Check out the full documentation:

View Full Design System on GitHub

🎨 Design System