## 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); }

## Contact & links

Official brand contact

Web vrgnsolar.com

Email info@vrgnsolar.com

Phone 724-759-5498 · Pittsburgh, PA

Copied to clipboard