← Home Gallery Getting Started Components Tokens Templates Contributing Brand

Getting Started

Learn how to integrate the Valley Solar Design System into your project and start building with our components and tokens.

Installation

The design system is distributed as a compiled bundle. Copy the design system folder into your project:

design-system/
├── _ds_bundle.js       # Compiled components
├── colors_and_type.css # Design tokens
├── assets/             # Logos, icons, brand files
├── components/         # Component source files
└── templates/          # Reusable page templates

Quick Start

1. Link the stylesheet

Add the design tokens stylesheet to your page head:

<link rel="stylesheet" href="path/to/colors_and_type.css">

2. Load the component bundle

Include the compiled bundle before your page markup:

<script src="path/to/_ds_bundle.js"></script>

3. Use components

Components are available via window.ValleySolar. Reference the Components Guide for usage examples.

4. Use design tokens

All colors, fonts, spacing, and shadows are available as CSS custom properties. See Tokens for the complete reference.

Using Templates

Templates are ready-to-use page layouts. Copy a template folder and customize the content:

Page templates — full-page layouts like product pages and support guides
Section templates — reusable sections like hero, features, testimonials
All templates use the design system tokens and components

See Templates for a complete list and usage guide.

Design Principles

Consistency — Use tokens and components instead of custom styles
Accessibility — All components meet WCAG AA standards
Performance — Components are optimized for speed and bundle size
Flexibility — Customize with CSS custom properties without overriding base styles

Need Help?

Check the Components Guide for component documentation
Review the Tokens reference for design primitives
Contributing guide explains how to modify the system
Open an issue on GitHub for questions or bugs