Brand Guidelines
Valley Solar's visual identity communicates trust, innovation, and sustainable energy. Use these guidelines to maintain consistency across all channels.
Logo & Wordmark
The Valley Solar logo is the primary visual identifier. Use the official logo files from assets/logos/.
Logo Files
valley-solar-primary-orange.svg — Primary logo with orange backgroundvalley-solar-primary-dark-bg-h.svg — Dark version for light backgroundsvalley-solar-primary-white-bg-h.svg — White version for dark backgrounds
Never: Stretch, skew, rotate, or alter the logo. Always maintain proper aspect ratio and spacing.
Color Palette
Valley Solar's colors evoke energy, growth, and reliability.
Primary Colors
--vs-orange
Primary action and calls-to-action. Use for buttons, links, and highlights.
--vs-navy
Secondary accent for headings and key information. Professional and trustworthy.
Semantic Colors
--color-success
Success, confirmation, and positive states.
--color-warning
Warnings, caution, and important notices.
--color-error
Errors, destructive actions, and failures.
Typography
Typography conveys hierarchy, personality, and readability.
Font Families
- Outfit (Headings) — Bold, distinctive, modern. Signals importance.
- Inter (Body) — Neutral, highly legible, works at any size.
Hierarchy
- H1 (Page Heading) — clamp(2.4rem, 4.2vw, 3.6rem). Set expectation and page topic.
- H2 (Section Heading) — 2.2rem. Organize main content sections.
- H3 (Subsection) — 1.4rem. Group related content within sections.
- Body — 1rem (16px). Standard reading text. Aim for 45–75 characters per line.
- Small — 0.875rem (14px). Labels, captions, supporting text.
Photography & Imagery
Photography should feel authentic, warm, and contextual.
Photography Style
- Real installations and people, not stock photos
- Warm, natural lighting that shows the installations in context
- Diverse representation of residential, commercial, and rural installations
- Environmental and natural settings that reinforce sustainability
Photography Guidelines
✓ Do:
- Use authentic installations
- Show happy, real customers
- Capture work in progress
- Feature beautiful landscapes
✗ Don't:
- Use generic stock photos
- Over-saturate or heavily filter
- Use clichéd business imagery
- Include recognizable people without consent
Icons
Icons simplify concepts and improve scanning. Keep them minimal and consistent.
- Icons are always solid (no outlines or complex details)
- Use the brand color system for icon fills
- Keep icons at 20px, 24px, or 32px sizes for clarity
- See
assets/icons/ for the complete icon library
Voice & Tone
Valley Solar's voice is professional, approachable, and educational.
Core Characteristics
- Knowledgeable — We understand solar and battery technology deeply
- Accessible — We explain complex concepts clearly for all audiences
- Optimistic — We believe in renewable energy and a sustainable future
- Trustworthy — We're honest about costs, timelines, and capabilities
Do's and Don'ts
✓ Do:
- Use "you" and "your" to connect with readers
- Be specific with numbers and timelines
- Use active voice
- Celebrate customer success stories
✗ Don't:
- Use industry jargon without explanation
- Make unrealistic promises
- Shame people for current energy use
- Sound corporate or robotic
Spacing & Layout
Generous spacing creates breathing room and improves readability.
- Use the spacing scale consistently
- Leave at least 40px margin around major sections
- Use CSS Grid or Flexbox with
gap for consistent spacing
- Avoid cramped layouts; white space is valuable
Accessibility
Every design should be usable by everyone.
- Color contrast — All text meets WCAG AA (4.5:1 for body text)
- Keyboard navigation — All interactive elements are keyboard accessible
- Screen readers — Proper heading hierarchy and semantic HTML
- Responsive — Works on mobile, tablet, and desktop
- Performance — Fast loading times (optimize images and code)
