Design System

Comprehensive component library and design guidelines for building consistent, beautiful interfaces

Component Library Design Tokens Interactive Examples Code Snippets

Quick Navigation

Colors Typography Components Patterns Utilities

Colors

Color palette used throughout the design system, optimized for accessibility and visual hierarchy

Primary

Blue-Purple Gradient

Blue: #3b82f6

Indigo: #6366f1

Purple: #8b5cf6

Dark Mode

Background

Primary: #09090b

Secondary: #18181b

Card: rgba(24,24,27,0.85)

Light Mode

Background

Primary: #ffffff

Secondary: #f8f9fa

Card: #ffffff

Accents

Purple

Purple Light

Purple: #8b5cf6

Purple Light: #ede9fe

Semantic Colors

Colors for specific use cases and states

Success

#22c55e

Error

#ef4444

Warning

#fb923c

Info

#3b82f6

Typography

Type scale and font weights for creating clear visual hierarchy and readable content

Heading 1

Font: System fonts | Weight: 700 | Size: 3rem | Line-height: 1.2

Heading 2

Font: System fonts | Weight: 700 | Size: 2.25rem | Line-height: 1.3

Heading 3

Font: System fonts | Weight: 600 | Size: 1.875rem | Line-height: 1.4

Body Large - This is body text at large size for better readability on important content and key messages.

Font: System fonts | Weight: 400 | Size: 1.125rem | Line-height: 1.6

Body Regular - This is regular body text used throughout the website for paragraphs and general content.

Font: System fonts | Weight: 400 | Size: 1rem | Line-height: 1.6

Body Small - This is small body text used for captions, labels, and secondary information.

Font: System fonts | Weight: 400 | Size: 0.875rem | Line-height: 1.5

Code/Mono - This is monospace text used for code snippets and technical content.

Font: Monospace | Weight: 400 | Size: 0.875rem | Line-height: 1.5

Font Weights

Light (300)

font-weight: 300

Regular (400)

font-weight: 400

Medium (500)

font-weight: 500

Semibold (600)

font-weight: 600

Bold (700)

font-weight: 700

Components

Reusable UI components with interactive examples and implementation code

Buttons

Interactive button components with different styles, states, and use cases

<button class="btn-primary px-6 py-3 rounded-xl text-white font-semibold">
    Primary Button
</button>
                        

Cards

Different card styles for various use cases with hover effects

Glass Card

Card with glassmorphism effect

Stat Card

Card for displaying statistics

Project Card

Card for project showcases

<div class="glass-card rounded-xl p-6">
    <h4>Glass Card</h4>
    <p>Card content</p>
</div>
                        

Input Fields

Form input components with focus states and validation styles

Text Input

Textarea

Select

Checkbox

Checkbox option

Radio

Option 1

Option 2

<input type="text" 
       class="w-full px-4 py-3 border rounded-xl focus:outline-none focus:ring-2" 
       style="background: var(--input-bg); border-color: var(--border-color);">
                        

Badges & Tags

Color-coded badges for categorization and status indicators

Blue Badge Purple Badge Green Badge Red Badge Orange Badge

<span class="px-3 py-1 rounded-full text-sm font-medium" 
      style="background: rgba(59, 130, 246, 0.1); color: #3b82f6;">
    Blue Badge
</span>
                        

Alerts & Notifications

Interactive notification system with different types, actions, and animations

Success Alert

This is a success message indicating a successful operation

Error Alert

This is an error message indicating something went wrong

Warning Alert

This is a warning message requiring attention

Info Alert

This is an informational message

Test Interactive Notifications:

showNotification('success', 'Success!', 'Operation completed successfully');
showNotification('error', 'Error!', 'Something went wrong');
showNotification('warning', 'Warning!', 'Please review your input');
showNotification('info', 'Info', 'Here is some information');
                        

Loading States

Loading indicators and spinners for async operations

Small spinner

<div class="loading-spinner"></div>
<button disabled>
    <div class="loading-spinner"></div>
    Loading...
</button>
                        

Progress Bars

Visual indicators for progress and completion status

Progress 25% 25%

Progress 50% 50%

Progress 75% 75%

Progress 100% 100%

<div class="progress-bar">
    <div class="progress-fill" style="width: 50%;"></div>
</div>
                        

Tooltips

Contextual help text that appears on hover

<div class="tooltip">
    <button>Hover me</button>
    <span class="tooltip-text">Tooltip message</span>
</div>
                        

Tabs

Organize content into multiple panels

Content for Tab 1. This is where you would place your tab content.

Content for Tab 2. Each tab can contain different information.

Content for Tab 3. Tabs help organize related content.

<div class="tabs-container">
    <button class="tab-button active" onclick="switchTab(this, 'tab1')">Tab 1</button>
    <button class="tab-button" onclick="switchTab(this, 'tab2')">Tab 2</button>
</div>
<div id="tab1" class="tab-content active">Content</div>
                        

Design Patterns

Common UI patterns and best practices for consistent user experiences

Empty States

Helpful messages when there's no content to display

No items found

Get started by adding your first item

<div class="empty-state">
    <svg>...</svg>
    <h4>No items found</h4>
    <p>Get started by adding your first item</p>
    <button>Add Item</button>
</div>
                        

Error States

Clear error messages with recovery options

Something went wrong

Unable to load content. Please try again.

<div class="error-state">
    <svg>...</svg>
    <h4>Something went wrong</h4>
    <p>Error message</p>
    <button>Retry</button>
</div>
                        

Utilities

Helper classes and utilities for spacing, layout, and common styling needs

Spacing & Layout

Spacing Scale

xs (4px)

sm (8px)

md (16px)

lg (24px)

xl (32px)

Border Radius

4px

8px

12px

16px

full

9999px

Shadows

Elevation system using shadows for depth and visual hierarchy

0 1px 3px rgba(0,0,0,0.1)

0 4px 12px rgba(0,0,0,0.15)

0 20px 40px rgba(0,0,0,0.3)

Icons

Icon sizing guidelines for consistent visual weight

16px

20px

24px

32px

Best Practices

Guidelines and recommendations for using the design system effectively

Accessibility

• Use semantic HTML elements
• Maintain proper color contrast ratios
• Provide alt text for images
• Ensure keyboard navigation works
• Use ARIA labels where appropriate

Performance

• Optimize images and assets
• Use CSS variables for theming
• Minimize JavaScript bundle size
• Implement lazy loading
• Use efficient animations

Consistency

• Follow spacing scale consistently
• Use design tokens for colors
• Maintain consistent typography
• Reuse components when possible
• Document component usage

Responsive Design

• Design mobile-first
• Test on multiple screen sizes
• Use flexible layouts
• Optimize touch targets
• Consider content hierarchy