Style Guide

Design System & Component Reference

Brand Identity

Logo

Brand Values

Primary Color:#4A7732 — Forest Green

Used for all primary CTAs, brand accents, and active states

Font Family:Satoshi

Used for all headings, body copy, and UI text across the site

Border Radius:0.5rem (8px)

Default radius for cards, inputs, and containers. Buttons use rounded-full (pill shape)

Button Style:Pill / Rounded Full

All primary CTAs use rounded-full with uppercase tracking-[0.04em]

Color System

Brand Colors

#4A7732

Brand Green--color-brand

#FFF

Brand Foreground--color-brand-foreground

#EEF4EC

Brand Light--color-brand-light

globals.css :root

--color-brand: 99 41% 33%;        /* #4A7732 */
--color-brand-foreground: 0 0% 100%; /* White */
--color-brand-light: 99 30% 95%;     /* Light green tint */

UI / Semantic Colors

#FFF

Background--background

#062D1B

Foreground--foreground

#FFF

Card--card

#F0F2F0

Muted--muted

#4A7732

Primary--primary

#F0F2F0

Secondary--secondary

#EF4444

Destructive--destructive

#D8DDD5

Border--border

#4A7732

Ring--ring

Chart Colors

Chart 1--chart-1

Chart 2--chart-2

Chart 3--chart-3

Chart 4--chart-4

Chart 5--chart-5

Dark Mode

Dark mode uses CSS class strategy (.dark). All semantic tokens remap automatically. Brand green shifts to a brighter shade for contrast on dark backgrounds.

.dark overrides

.dark {
  --color-brand: 99 41% 45%;      /* Brighter green for dark */
  --background: 150 43% 4%;       /* Near-black with green tint */
  --foreground: 0 0% 98%;         /* Off-white */
  --card: 150 30% 6%;             /* Dark card surface */
  --muted: 150 10% 17%;           /* Dark muted */
  --border: 150 20% 18%;          /* Dark border */
}

Typography

Font Stack

Heading

Satoshi Bold

All h1-h6, display text

--font-heading

Body

Satoshi Regular

Paragraphs, UI labels, navigation

--font-body

Mono

Fira Code

Code snippets, technical data

--font-mono

Heading Scale

text-h154px / 78px @lg, weight 700, tracking -0.03em

The quick brown fox jumps

text-h244px / 64px @lg, weight 700, tracking -0.02em

The quick brown fox jumps

text-h334px / 40px @lg, weight 700, tracking -0.01em

The quick brown fox jumps

text-h428px / 32px @lg, weight 700, tracking -0.01em

The quick brown fox jumps

text-h524px, weight 600, tracking -0.01em

The quick brown fox jumps

text-h620px, weight 600, tracking -0.01em

The quick brown fox jumps

Body Text Styles

text-body-lg18px, weight 400, line-height 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

text-body16px, weight 400, line-height 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

text-subheading18px, weight 350, line-height 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

text-small14px, weight 400, line-height 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

text-button14px, weight 600, uppercase, tracking 0.04em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

Section Overline / Label

Used above section headings throughout the site to categorize content areas.

Our Solutions

Comprehensive Energy Management

End-to-end solutions for utility expense management, procurement, and sustainability.

Pattern

<span className="text-[13px] font-semibold uppercase tracking-[0.08em] text-brand">
  Section Label
</span>
<h2 className="text-h3 mt-2">Section Heading</h2>
<p className="text-subheading text-muted-foreground mt-2">
  Supporting description text.
</p>

Buttons & CTAs

Primary Brand CTA

The main call-to-action style used in heroes, navbar, and CTA banners. Pill shape, uppercase, brand green with ArrowRight icon.

Learn More Book a Demo

<a className="inline-flex items-center justify-center gap-2 
  rounded-full font-semibold uppercase tracking-[0.04em] 
  bg-brand text-brand-foreground hover:brightness-110 
  h-[52px] px-8 text-[14px] transition-all duration-200">
  Learn More <ArrowRight className="w-4 h-4" />
</a>

Secondary / Outline Buttons

Our Solutions Learn More

On Dark Background

Schedule a Free Audit (713) 358-5400 See How It Works

Frosted glass secondary: border-white/30 bg-white/[0.08] backdrop-blur-sm

Shadcn Button Variants

Cards

Standard Card

Default card with header and content

Card content goes here. This is the default card style used throughout the application.

Hoverable Card

Uses hover-elevate class

Hover to see the subtle elevation effect.

Accent Border

border-brand/30 for emphasis

Apply border-brand class for emphasized cards.

Feature Card Pattern

Used in Solutions, Platform, and Sector grids. Icon + title + description with hover effect.

Utility Expense Management

Comprehensive audit, analysis, and optimization of all utility bills.

Risk Management

Proactive risk mitigation strategies for volatile energy markets.

Sustainability

Renewable energy procurement and carbon footprint reduction.

Badges & Links

Badges

Default

Secondary

Outline

Destructive

Link Styles

Inline link

This paragraph contains an inline link styled with brand green.

Navigation links

Nav Link Muted Link

Footer links (on dark)

Section TitleFooter Link One Footer Link Two

Section Patterns

Standard Content Section

Most homepage and internal page sections follow this pattern: overline label, heading, subheading, content area with consistent vertical spacing.

<section className="py-20 lg:py-28 bg-background">
  <div className="container mx-auto px-4 max-w-6xl">
    <div className="text-center mb-12 lg:mb-16">
      <span className="text-[13px] font-semibold uppercase tracking-[0.08em] text-brand">
        Section Label
      </span>
      <h2 className="text-h2 mt-3">Section Heading</h2>
      <p className="text-subheading text-muted-foreground mt-4 max-w-2xl mx-auto">
        Supporting description text for the section.
      </p>
    </div>
    {/* Content grid/cards here */}
  </div>
</section>

Alternating Image + Text Layout

Used in About page (founding story), Solution detail pages, and Platform pages. Image alternates left/right on each row.

<div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
  {/* Image side */}
  <div className={index % 2 === 1 ? "lg:order-2" : ""}>
    <div className="aspect-[4/3] rounded-xl overflow-hidden">
      <Image ... className="w-full h-full object-cover" />
    </div>
  </div>
  {/* Text side */}
  <div className={index % 2 === 1 ? "lg:order-1" : ""}>
    <span className="text-brand uppercase tracking-[0.08em] text-[13px] font-semibold">
      Overline
    </span>
    <h3 className="text-h3 mt-2">Heading</h3>
    <p className="text-body-lg text-muted-foreground mt-4">
      Description paragraph.
    </p>
  </div>
</div>

CTA Banner

A full-width dark banner used before the footer on most pages. Centered headline with brand CTA button.

Ready to take control of your energy costs?

Join the growing number of enterprises saving millions with GETCHOICE!

Book a Free Consultation

Dark Sections

Several sections use a dark green-tinted background. These are not dark-mode — they are explicit dark surfaces used for visual contrast.

Dark Background Palette

#0a1a0a

Hero Dark

#0d1f0d

Dark Surface

#12261a

Dark Card

#1a3a1a

Dark Border

#3DA647

Green Accent

Dark Section Example

Platform

Your energy command center

A unified dashboard for managing all your utility data, contracts, and procurement strategies.

Explore Platform

Text Colors on Dark

/* Text hierarchy on dark backgrounds (#0a1a0a) */
Headings:    text-white
Body:        text-white/70 or text-white/60
Muted/Meta:  text-white/40
Overline:    text-[#3DA647] (brand green, not the CSS variable)
Links:       text-white/40 hover:text-white

Animations & Motion

Scroll Animations (CSS)

Applied via scroll-animate class + IntersectionObserver that adds scroll-visible. Honors prefers-reduced-motion.

data-scroll-type="default"

Fade Up (default)

translateY(28px)

data-scroll-type="fade"

Fade Only

opacity only

data-scroll-type="fade-left"

Fade Left

translateX(-28px)

data-scroll-type="fade-right"

Fade Right

translateX(28px)

data-scroll-type="fade-down"

Fade Down

translateY(-24px)

data-scroll-type="zoom"

Zoom

scale(0.94)

Usage

<section className="scroll-animate" data-scroll-type="fade-right">
  {/* Animates from right when scrolled into view */}
</section>

Framer Motion (React)

Framer Motion is used for hero dashboard cards, page transitions, and interactive elements. Common patterns:

/* Fade + slide up on mount */
<motion.div
  initial={{ opacity: 0, y: 24 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.7, delay: 0.2 }}
/>

/* Staggered children */
<motion.div
  initial={{ opacity: 0, y: 16 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-50px" }}
  transition={{ duration: 0.5, delay: index * 0.1 }}
/>

Hover / Interaction Classes

hover-elevate

Applies subtle background elevation on hover. Works on any element. Already built into Button/Badge.

active-elevate-2

More dramatic elevation on press/active. Already built into Button/Badge.

hover:brightness-110

Used on brand-colored buttons instead of hover-elevate. Brightens the brand green on hover.

Loading Screen

The site uses a branded loading screen on first visit (stored in sessionStorage). Phase model:init → loading → exit → done. Total duration ~1.8s. Respects prefers-reduced-motion.

Icons

Icon Library

All icons come from lucide-react. No emojis are used anywhere in the site. Company/brand logos use react-icons/si.

Common Icon Sizes

12pxInline, breadcrumbs

14pxSmall buttons

16pxStandard buttons, nav

20pxFeature icons, cards

24pxHero elements

Icon Container Pattern

Icons in feature cards are wrapped in a tinted container.

Light bg

Solid bg

Circle

Pattern

<div className="w-10 h-10 rounded-lg bg-brand/10 flex items-center justify-center">
  <Zap className="w-5 h-5 text-brand" />
</div>

Layout & Spacing

Container

All page content uses a centered container. Max width varies by context.

max-w-6xl1152pxDefault content sections

max-w-7xl1280pxWide layouts, grids

max-w-4xl896pxBlog content, narrow pages

max-w-2xl672pxForms, centered content

Spacing Scale

Consistent vertical spacing between sections and within components.

Section Paddingpy-20 lg:py-2880px / 112px — Main vertical section spacing

Section Header ↔ Contentmb-12 lg:mb-1648px / 64px — Gap between section title and content

Card Grid Gapgap-624px — Standard grid gutter

Component Internalgap-416px — Inside cards, between elements

Text Stackmt-2 to mt-48-16px — Between heading and description

Container Paddingpx-416px — Horizontal page padding on mobile

Grid Patterns

/* 3-column feature grid */
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

/* 2-column image + text */
<div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">

/* 4-column stats/metrics */
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6">

/* 6-column sector/persona grid */
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

Forms

Form elements use gf-* CSS classes for Gravity Forms compatibility.

Text Inputs

Text Input

Email Input *

Helper text appears below

Textarea

Message

Select

Choose an option

Form in Card

Contact Us

Fill out the form below and we will get back to you.

Name *

Email *

Validation States

Email (Invalid) *

Please enter a valid email

Required (Empty) *

This field is required

Multi-Column Layout (12-col grid)

Multi-Column Form

Uses gf-fields-grid with 12-column spans

First Name *

Last Name *

Email *

Form CSS Variables

--form-field-spacing--form-label-weight--form-label-size--form-input-bg--form-input-border--form-input-focus-ring--form-placeholder--form-radio-checked--form-checkbox-checked

Accessibility

Skip to Content

Every page includes a skip-to-content link that appears on focus. Uses .skip-to-content class with brand green pill styling.

<a href="#main-content" className="skip-to-content">Skip to main content</a>

Focus Visible

All interactive elements show a 3px brand-colored outline ring on keyboard focus via :focus-visible.

:focus-visible { outline: 3px solid hsl(var(--ring)); outline-offset: 2px; }

Reduced Motion

All CSS animations (scroll-animate, marquee) and Framer Motion respect prefers-reduced-motion. Loading screen skips in reduced motion mode.

@media (prefers-reduced-motion: reduce) { .scroll-animate { opacity:1; transform:none; transition:none; } }

Semantic HTML

Pages use proper heading hierarchy (h1 → h6), landmark elements (<header>, <main>, <footer>, <nav>), and ARIA attributes where needed.

Color Contrast

Text on dark sections uses white or white/70 for sufficient contrast. Brand green (#4A7732) on white meets WCAG AA for large text.

data-testid

All interactive elements and meaningful display elements include data-testid attributes for automated testing.

Responsive Breakpoints

sm640px2-column grids, hide/show minor elements

md768px2-column form grids, tablet layouts

lg1024pxDesktop nav, 3-column grids, side-by-side layouts

xl1280pxWide content, TOC sidebars

Key Responsive Patterns

Navbar

Desktop mega-menu (lg+) with centered links. Mobile hamburger with full-screen drawer below lg.

Hero Dashboard

Hidden below lg. On desktop, shows parallax-tracked dashboard with floating metric cards.

Typography Scale

H1: 54px → 78px @lg. H2: 44px → 64px @lg. H3: 34px → 40px @lg. H4: 28px → 32px @lg.

Section Spacing

py-20 → py-28 @lg. Section header margin mb-12 → mb-16 @lg.