Brand Kit

VRGN Solar

Logo, favicons, social images, business cards, stationery, and a QR code — built by TriState.Digital and matched to the live site. "Before" is what's on the current site; "After" is the cleaned-up brand asset.

Download the kit (.zip)

Color palette

Gold

#a2936c

rgb(162, 147, 108)

Sand

#bbb79e

rgb(187, 183, 158)

Black

#000000

rgb(0, 0, 0)

Grey

#404040

rgb(64, 64, 64)

White

#ffffff

rgb(255, 255, 255)

Tip: click a swatch to copy the hex to your clipboard.

Design tokens

:root custom properties

:root{
  --vrgn-gold:  #a2936c;   /* primary accent */
  --vrgn-sand:  #bbb79e;   /* secondary / soft accent */
  --vrgn-black: #000000;   /* background */
  --vrgn-ink:   #101010;   /* near-black surface */
  --vrgn-grey:  #404040;   /* muted text / hairlines */
  --vrgn-white: #ffffff;   /* text on dark */

  --vrgn-font-head: "Nexa Light","Nexa","Century Gothic","Futura",-apple-system,"Segoe UI",sans-serif;
  --vrgn-font-body: "Nexa","Century Gothic","Futura",-apple-system,"Segoe UI",Arial,sans-serif;
}

Type & components

Heading One

.vrgn-h1

.vrgn-h1{
  font-family: var(--vrgn-font-head);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 75px);
  line-height: 1.05;
  letter-spacing: .005em;
  color: var(--vrgn-white);
}

Heading Two

.vrgn-h2

.vrgn-h2{
  font-family: var(--vrgn-font-head);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.1;
  color: var(--vrgn-white);
}

Heading Three

.vrgn-h3

.vrgn-h3{
  font-family: var(--vrgn-font-head);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.2;
  color: var(--vrgn-white);
}

Eyebrow / Kicker

Heading Four

.vrgn-kicker .vrgn-h4

.vrgn-kicker{
  font-family: var(--vrgn-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vrgn-gold);
}
.vrgn-h4{
  font-family: var(--vrgn-font-head);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--vrgn-white);
}

Body copy sets the tone for everything else. This is an inline link in brand gold, and this is small / caption text in sand.

.vrgn-body .vrgn-link .vrgn-small

.vrgn-body{
  font-family: var(--vrgn-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  color: var(--vrgn-white);
}
.vrgn-link{
  color: var(--vrgn-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(162,147,108,.4);
}
.vrgn-small{
  font-size: 14px;
  line-height: 1.6;
  color: var(--vrgn-sand);
}

Get a Quote Learn More

.vrgn-btn .vrgn-btn--outline

.vrgn-btn{
  display: inline-block;
  font-family: var(--vrgn-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--vrgn-black);
  background: var(--vrgn-gold);
  padding: 14px 26px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.vrgn-btn--outline{
  background: transparent;
  color: var(--vrgn-gold);
  box-shadow: inset 0 0 0 1.5px var(--vrgn-gold);
}

A standard link in brand gold with an underline that brightens on hover.

.vrgn-link

.vrgn-link{
  color: var(--vrgn-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(162,147,108,.4);
  transition: border-color .15s ease;
}
.vrgn-link:hover{ border-color: var(--vrgn-gold); }
.vrgn-link:focus-visible{ outline: 2px solid var(--vrgn-gold); outline-offset: 2px; }

Switching to solar was the best decision we made for our home — VRGN made it effortless.— A Pittsburgh homeowner

.vrgn-quote

.vrgn-quote{
  margin: .7em 0;
  padding: .45em 0 .45em 1.1em;
  border-left: 3px solid var(--vrgn-gold);
  color: var(--vrgn-sand);
  font-style: italic;
}
.vrgn-quote cite{
  display: block; margin-top: .45em;
  font-style: normal; font-size: .85em;
  color: var(--vrgn-gold);
}

Scroll this box — the scrollbar is brand gold. Custom scrollbars apply page-wide.

More copy so a scrollbar appears and you can see the styled thumb and track in action.

And a little more text to be sure it overflows its box on any screen height.

custom scrollbar

html{
  scrollbar-color: var(--vrgn-gold) rgba(255,255,255,.06);
  scrollbar-width: thin;
}
::-webkit-scrollbar{ width: 11px; height: 11px; }
::-webkit-scrollbar-track{ background: rgba(255,255,255,.05); }
::-webkit-scrollbar-thumb{
  background: var(--vrgn-gold);
  border-radius: 6px;
  border: 2px solid rgba(0,0,0,.3);
}
::-webkit-scrollbar-thumb:hover{ background: var(--vrgn-sand); }

Content above the divider.

Content below the divider.

.vrgn-hr

.vrgn-hr{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vrgn-gold), transparent);
  margin: 1.4em 0;
}

Full name

.vrgn-input .vrgn-label

.vrgn-label{
  display: block;
  font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--vrgn-sand);
  margin-bottom: 6px;
}
.vrgn-input{
  display: block; width: 100%;
  font-size: 15px; color: var(--vrgn-white);
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(162,147,108,.5);
  border-radius: 8px; padding: 11px 14px; outline: none;
  transition: border-color .15s ease;
}
.vrgn-input:focus{
  border-color: var(--vrgn-gold);
  box-shadow: 0 0 0 3px rgba(162,147,108,.18);
}
.vrgn-input::placeholder{ color: #8a7d63; }

Logo

True vector (SVG), fully transparent. Shown on dark and on a transparency checkerboard.

Lotus + wordmark line1.svg

Lotus only2.svg

Favicon

His current site favicon has a baked-in black square. The remade set is transparent, so it sits cleanly on any browser tab or background.

Current (on Wix)Before

Remade — transparentAfter

Social / Open Graph image

The image that shows when the site is shared (Facebook, LinkedIn, iMessage, X). Before: the current unbranded, off-spec (1200×471) photo. After: the branded 1200×630 — logo, tagline, contact bar, and the 5.0 Google badge.

Current share imageBefore

Branded — 1200×630After

Downloads: OG image (1200×630) · X-card (1200×628).

Business cards

Print-ready at 300 DPI, in his colors and Nexa type, with a scannable QR to the site. Three formats: a single card, a single card with 1/8" bleed + crop marks, and a full 10-up sheet for Avery 38371 / 8371.