Brand System

Pinnacle Roofing
Professionals

UI Style Guide — Certified Tesla Solar Installer Partnership Brand "Making the World a Better Place by Accelerating the World's Transition to Sustainable Energy, One Roof at a Time"

Version 2.0 PRP / Tesla Solar

Brand Foundation

Primary Typeface Oswald Display & Headings

Secondary Typeface Inter Body & UI Text

Brand Color #00C853

Certification Tesla Certified Solar Installer

Color System

Color Palette

Brand Colors

#00C853 RGB(0, 200, 83) Primary Green CTAs, accents, icons, borders

#00D26A RGB(0, 210, 106) Secondary Green Hover states, gradients

#00B248 RGB(0, 178, 72) Dark Teal Pressed states

#000000 RGB(0, 0, 0) Black Hero overlays

Surface Colors — Dark

#1A1A1A RGB(26, 26, 26) Surface Dark Dark cards, sections

#222222 RGB(34, 34, 34) Surface Dark 2 Secondary dark panels

#2A2A2A RGB(42, 42, 42) Surface Dark 3 Elevated dark surfaces

Surface Colors — Light

#F9F9F9 RGB(249, 249, 249) Surface Light Light section backgrounds

#FFFFFF RGB(255, 255, 255) Surface White Cards on light background

#E5E7EB RGB(229, 231, 235) Border Light dividers

Text Colors

Aa #0A0A0A Text Primary Main body on light

Aa #4B5563 Text Secondary Supporting text on light

Aa #9CA3AF Text Muted Captions, meta

Aa #FFFFFF Text White All text on dark

Aa #D1D5DB Text Dark on Dark Muted on dark bg

Type System

Typography

Oswald Display & Headings

Inter Body & UI Text

Display Hero Oswald Bold 72px Uppercase · tracking 0.02em Color: #FFFFFF (on dark)

Tesla Solar Panels

H1 Heading Oswald Bold 56px Uppercase Color: #0A0A0A

Pinnacle Roofing Professionals

H2 Heading Oswald SemiBold 40px Uppercase Color: #0A0A0A

Why Homeowners Choose Tesla Solar

H3 Heading Oswald SemiBold 32px Uppercase Color: #0A0A0A

Proven Performance

H4 Heading Oswald Medium 24px Color: #0A0A0A

Washington's Flagship Tesla Solar Panel Installer

H5 Heading Oswald Medium 20px Color: #0A0A0A

One App. Total Control

Eyebrow Label Inter SemiBold 14px Uppercase · tracking 0.15em Color: #00C853

No Limits

Body Large Inter Regular 18px Line-height 1.75 Color: #0A0A0A

Engineered for maximum durability and energy production, Tesla's monocrystalline solar panels deliver up to 380W of power with all-black aesthetics, backed by a 25-year performance warranty.

Body Inter Regular 16px Line-height 1.7 Color: #4B5563

Pinnacle Roofing Professionals is Washington State's premier Tesla Solar Panel Installer. With years of installation experience and a team of Tesla-certified professionals, we deliver flawless installations that meet Tesla's exacting standards.

Body Small Inter Regular 14px Line-height 1.65 Color: #4B5563

Tesla solar panels feature concealed wire connections and a low-profile mount that sits flush to your roof — so solar looks just sleeker than it already does. Our comprehensive approach means you get a single point of contact for your entire project.

Caption & Label Inter Regular/SemiBold 14px

Caption — Regular 14px / #6B7280 Learn More →

Label — SemiBold 14px / uppercase · tracking 0.08em About the Installer

Stat Number & Label Oswald Bold 48px / #00C853 Inter Regular 14px / #9CA3AF

25yrPerformance Warranty

2Ctsper kWh Avg Cost

400k+Installations Nationwide

100%Customer Satisfaction

Interactions

Button System

On Light Background

Primary bg #00C853 · pad 14/32 · shadow glow

Primary Hover bg #00D26A · shadow stronger

Secondary Outlined border 2px #00C853 · text #00C853

Small Button pad 12/24 · 14px font

Nav CTA pad 10/20 · 14px font

Icon Button 48×48 · border 1px #00C853

On Dark Background

Primary (dark bg)

Ghost Dark border 2px #FFF · text #FFF

Secondary Outlined (dark bg)

Small (dark bg)

Icon Button

Input System

Form Elements

Default State

Full Name height 48px · border #E5E7EB · radius 8px Service Type Solar Installation Message

Focus State

Email Address Focus — border #00C853 + ring rgba(0,200,83,0.15) Phone Number Address

Error State

Email Address Please enter a valid email address Service Area Select a county This field is required Notes

Visual Elements

Icon Badges & Indicators

Feature Badge 48×48 · radius 12 · bg 12%

Large Badge 64×64 · radius 16 · icon 28px

Status Dot Active 10×10 · glow rgba(0,200,83,0.8)

1 Step Number 32×32 · Oswald Bold 16px

1 2 3 Step Sequence Active · Complete · Upcoming

Tesla Certified Installer Washington State Licensed

Credential Badge Dark card · 4px green left border

Icon Badge Set Roofing · Electrical · Shield · Eco

Components

Card Components

Sleek, Low-Profile Design

Tesla's ultra-efficient panels feature concealed wire connections, sitting flush to your roof for maximum aesthetic appeal and performance.

Learn More bg #1A1A1A · border rgba(0,200,83,0.2) · radius 12

Integrated Panel Mount

Tesla Panel Mount secures panels close to your roof with an exposed hardware-free look. Integrated front and side rails create a seamless, finished look from every angle.

Learn More bg #FFFFFF · border #E5E7EB · shadow card

400k+ Installations Nationwide

25yr Performance Warranty

Stat Card — Dark

About the Installer

Pinnacle Roofing

Washington's premiere Tesla Solar Panel installer serving the entire Puget Sound region with flawless installations and Tesla-certified professionals.

Installer card — dark bg · top accent bar

25yr Performance Warranty Light Stat Card

380W Panel Output Light Stat Card

100% Satisfaction Rate Light Stat Card

2K+ Happy Customers Light Stat Card

Global UI

Navigation

Light Variant — bg #FFFFFF

Pinnacle Roofing Built on a Reputation of Quality

206-555-6473

Dark Variant — hero overlay bg rgba(0,0,0,0.8)

Pinnacle Roofing Built on a Reputation of Quality

206-555-6473

Spatial System

Spacing & Layout

Spacing Tokens

4px space-1

8px space-2

12px space-3

16px space-4

20px space-5

24px space-6

32px space-8