How to use Solar Design System

A complete guide to getting started with Solar Design System

🚀 Get Started in Minutes

Download the complete design system package and start building beautiful, energy-efficient interfaces

Download Design System View Installation Guide

What is Solar Design System?

Solar Design System is a comprehensive, energy-efficient design system built for modern web applications. It features a dark theme optimized for OLED displays, system-first typography, and a carefully crafted color palette.

🌑

Dark-First Design

Optimized for OLED energy savings

🎨

8 Accent Colors

Comprehensive color system with semantic meaning

📱

Fully Responsive

Mobile-first approach

♿

Accessible

WCAG AA compliant contrast ratios

⚡

Performance-Focused

System fonts, no shadows, minimal rendering

🎯

Type-Safe

Full TypeScript support

Installation Steps

Download & Extract

Download the solar-design-system.zip file and extract it to your desired location.
Install Dependencies

Open your terminal in the extracted folder and run:

npm install

This will install all required packages (React, Vite, Tailwind CSS, TypeScript, etc.)
Start Development Server

Run the development server:

npm run dev

You should see output like:

VITE v5.x.x ready in xxx ms ➜ Local: http://localhost:5173/
View Design System

Open your browser and navigate to http://localhost:5173

You'll see the complete design system showcase with all components and design tokens.

Using Components

All components are showcased in src/components/DesignSystem.tsx. You can:

1. Copy Component Code

Browse the showcase and copy the code for any component you need.

2. Use Tailwind Classes Directly

Apply design system classes directly in your components:

                <button className="bg-accent-primary text-black rounded-button px-6 py-2.5 text-sm font-semibold hover:bg-accent-primary-dim transition-colors">
  Click Me
</button>
            

3. Reference Design Tokens

All design tokens are configured in tailwind.config.js. You can use them directly:

                // Colors
bg-accent-primary
text-accent-solar-amber
border-borders-subtle

// Spacing
p-6 (24px)
gap-4 (16px)

// Border Radius
rounded-card (24px)
rounded-button (9999px)
            

Color System

The design system includes 8 accent colors, each with semantic meaning:

Primary (Matcha)

#DDEE88

Solar Amber

#F59E0B

OLED Rose

#E11D48

Deep Teal

#0D9488

Purple

#A78BFA

Cyan

#22D3EE

Success

#34D399

💡

Color Usage Guidelines:

Primary: Use for CTAs, active states, key highlights
Solar Amber: Use for warnings
OLED Rose: Use for errors and negative changes
Deep Teal: Use for informational content
Success: Use for positive metrics and success states

Component Examples

Button

                <button className="bg-accent-primary text-black rounded-button px-6 py-2.5 text-sm font-semibold hover:bg-accent-primary-dim transition-colors">
  Primary Button
</button>
            

Card

                <div className="bg-background-cardSurface border border-borders-subtle rounded-card p-6">
  <h3 className="text-lg font-semibold mb-4">Card Title</h3>
  <p className="text-sm text-text-secondary">Card content</p>
</div>
            

Input Field

                <input
  type="text"
  placeholder="Enter text..."
  className="w-full bg-background-badgeNeutral border border-borders-subtle rounded-input px-4 py-2.5 text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none focus:border-accent-primary transition-colors"
/>
            

Badge

                <span
  className="inline-flex items-center px-2 py-1 rounded-badge text-xs font-semibold text-accent-success"
  style={{ backgroundColor: 'rgba(52, 211, 153, 0.2)' }}
>
  Success Badge
</span>
            

Available Components

The design system includes 20+ pre-built components:

Buttons

Primary, Secondary, Time Range

Input Fields

Text, Search, Textarea

Form Controls

Select, Checkbox, Radio, Switch

Navigation

Tabs, Navigation Items

Feedback

Alerts, Badges, Tooltips

Progress

Progress Bars, Sliders

Cards

Stat, Chart, Activity, Content

Other

Avatars, Dividers, Loading, Empty States, Modals

Documentation

Complete documentation is included in the package:

📖 DESIGN_SYSTEM.md - Complete design system documentation with all tokens, components, and usage examples
🚀 QUICK_START.md - 5-minute quick start guide
⚙️ SETUP.md - Detailed setup and installation instructions
📚 README.md - Project overview and quick reference

Build for Production

When you're ready to build your project:

npm run build

The production files will be in the dist folder.

Preview the production build:

npm run preview

Tips & Best Practices

✓

Use Design Tokens
Always use tokens from tailwind.config.js instead of hardcoding values. This ensures consistency and makes updates easier.

ℹ

Check Component Showcase
View src/components/DesignSystem.tsx to see all components with their code. Copy and customize as needed.

⚠

Maintain Accessibility
Always ensure proper contrast ratios and include focus states for interactive elements. The design system follows WCAG AA standards.

Ready to Get Started?

Download the complete design system and start building beautiful interfaces today.

Download Solar Design System