A complete guide to getting started with Solar Design System
Access the complete React + TypeScript design system with live component showcase, energy-aware components, and full documentation
Solar Design System is a comprehensive, energy-efficient design system built for modern web applications. Available as a React + TypeScript component library, SOLAR features a dark-first theme optimized for OLED displays, system-first typography, energy-aware components, and a carefully crafted color palette.
Get the React + TypeScript version from GitHub:
Visit github.com/ravipalwe/solardesignsystem and clone or download the repository.
git clone https://github.com/ravipalwe/solardesignsystem.git
cd solardesignsystem
Open your terminal in the project folder and run:
npm install
This will install all required packages (React, Vite, Tailwind CSS, TypeScript, etc.)
Run the development server:
npm run dev
You should see output like:
VITE v5.x.x ready in xxx ms
➜ Local: http://localhost:5173/
Open your browser and navigate to http://localhost:5173
You'll see the complete design system showcase with all components, design tokens, and energy-aware components in action!
All components are showcased in the React app at src/components/DesignSystem.tsx. The app has two views:
Shows 5 planet-first components that make environmental costs visible:
Complete showcase of all dashboard components, design tokens, and UI elements.
You can:
Browse the showcase and copy the code for any component you need.
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>
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)
The design system includes 8 accent colors, each with semantic meaning:
See the components in action with their code. Each example shows the rendered component followed by the code you can copy:
<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>
<button className="bg-transparent text-text-primary border border-borders-contrast rounded-button px-6 py-2.5 text-sm font-semibold hover:bg-background-cardSurfaceHover transition-colors">
Secondary Button
</button>
This is a simple card with title and description. Cards are great for organizing content.
<div className="bg-background-cardSurface border border-borders-subtle rounded-card p-6">
<h4 className="text-lg font-semibold mb-2">Card Title</h4>
<p className="text-sm text-text-secondary mb-4">
This is a simple card with title and description.
</p>
<button className="bg-accent-primary text-black rounded-button px-4 py-2 text-xs font-semibold">
Action
</button>
</div>
<div className="bg-background-cardSurface border border-borders-subtle rounded-card p-5">
<div className="text-xs text-text-secondary mb-2">Total Views</div>
<div className="text-3xl font-bold text-text-primary mb-1">2,543</div>
<div className="text-xs text-accent-success">↑ 12% from last week</div>
</div>
// Success Badge
<span className="inline-flex items-center px-3 py-1 rounded-badge text-xs font-semibold text-accent-success" style={{ backgroundColor: 'rgba(52, 211, 153, 0.2)' }}>
✓ Success
</span>
// Warning Badge
<span className="inline-flex items-center px-3 py-1 rounded-badge text-xs font-semibold text-accent-solar-amber" style={{ backgroundColor: 'rgba(245, 158, 11, 0.2)' }}>
⚠ Warning
</span>
// Error Badge
<span className="inline-flex items-center px-3 py-1 rounded-badge text-xs font-semibold text-accent-oled-rose" style={{ backgroundColor: 'rgba(225, 29, 72, 0.2)' }}>
✕ Error
</span>
<div>
<label className="block text-xs font-semibold text-text-primary mb-2">
Email Address
</label>
<input
type="email"
placeholder="your@email.com"
className="w-full bg-background-badgeNeutral border border-borders-subtle rounded-input px-4 py-2.5 text-sm text-text-primary focus:outline-none focus:border-accent-primary transition-colors"
/>
</div>
<div>
<label className="block text-xs font-semibold text-text-primary mb-2">
Message
</label>
<textarea
placeholder="Enter your message..."
rows="3"
className="w-full bg-background-badgeNeutral border border-borders-subtle rounded-input px-4 py-2.5 text-sm text-text-primary focus:outline-none focus:border-accent-primary transition-colors resize-vertical"
/>
</div>
// Success Alert
<div className="alert alert-success">
<div className="alert-icon">✓</div>
<div>
<strong>Success!</strong><br />
Your changes have been saved successfully.
</div>
</div>
// Info Alert
<div className="alert alert-info">
<div className="alert-icon">ℹ</div>
<div>
<strong>Info:</strong><br />
This is an informational message.
</div>
</div>
// Warning Alert
<div className="alert alert-warning">
<div className="alert-icon">⚠</div>
<div>
<strong>Warning:</strong><br />
Please review before proceeding.
</div>
</div>
The React design system includes 12+ pre-built components:
Complete documentation is included in the GitHub repository:
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
Clone the React design system from GitHub and start building planet-first interfaces today.
View on GitHub