Design System

ChargerGoGo UI Style Guide

The single source of truth for colors, typography, and UI components on chargergogo.com. Always reuse the canonical classes documented here. Never create numbered duplicates (e.g. “uui-button 27”) — select an existing class in the Designer instead.

1 · Color Tokens

Colors live in the Untitled UI variable collection — bind to the variable in the Designer, never hardcode hex values.

Primary 600 · Yellow Green

#89bf42

Primary CTAs, accents, overlines

Primary 700

#77a13f

Primary button hover state

Dark Green

#1b4221

Dark bands, footer background

Gray 900

#101828

Headlines

Gray 700

#344054

Sub-headings, badge text

Gray 600

#475467

Body copy (uui-text-size-*)

Gray 500

#667085

Placeholders, captions

Gray 300

#d0d5dd

Borders, dividers, input strokes

Gray 100

#f2f4f7

Badge fills, subtle backgrounds

Gray 50 · Green Tint

#dfecd6

Secondary button hover fill

White Smoke

#f8f8f8

Alternate section backgrounds

Black (legacy ink)

#2b2b2b

Legacy headings (uui-heading-medium)

2 · Typography

Font: system-ui stack. Weights 400 (body) and 600 (headings). Use the canonical classes below — there are 20+ numbered duplicates of these in the project that should not be used.

uui-heading-xlarge

3.75rem / 600 / Gray 900

Display heading

uui-heading-large

38px / 600 / Primary green, centered (legacy side margins)

Section heading

uui-heading-medium

600 / Black, centered

Medium heading

uui-heading-xsmall

1.5rem / 600 / Gray 900

Card heading

uui-heading-xxsmall

1.25rem / 600 / Gray 700

Feature heading
uui-heading-subheading

1rem / 600 / Primary green

Overline subheading
uui-text-size-xlarge

1.25rem / 400 / Gray 600

Hero subhead body text — keep people seamlessly powered wherever life takes them.

uui-text-size-large

1.125rem / 400 / Gray 600

Lead paragraph text — ChargerGoGo keeps guests charged and venues earning.

uui-text-size-medium

1rem / 400 / Gray 600

Standard body text — rent a portable battery, charge on the go, and return it at any station in the network.

3 · Buttons, Badges & Forms

Three button styles only. Radius 0.5rem, padding 0.625rem 1.125rem, weight 600, 300ms ease transition on all.

uui-button

Primary · #89bf42, hover #77a13f, white text

Book a Demo
uui-button-secondary-gray

Secondary · white, Gray 300 border, hover #dfecd6 fill

Talk to Sales
uui-button-link

Tertiary text link · Primary 700, no padding

Learn more
uui-button-row

Groups buttons · 0.75rem gap, wraps on mobile

Primary actionSecondary action
uui-badge

Pill · radius 10rem, Gray 100 fill, Gray 700 text

Badge label
uui-form_input

Input · min-height 2.75rem, radius 0.5rem, Gray 300 border. Real inputs must sit inside a Form block — shown here as a visual specimen.

you@company.com

4 · Card Pattern

Cards: white background, 1px Gray 300 (or #eaecf0) border, 1rem radius, 1.5rem padding, subtle shadow. Product cards on /products use the uui-blog01_* classes with this same recipe.

Popular

C8 Pro Charging Station

Flagship 8-slot station with a 10-inch display. Hassle-free, untethered charging for customers on the go.

View product

5 · Usage Rules

Do

  • Reuse the canonical classes on this page — pick them from the class dropdown in the Designer.
  • Bind colors to the Untitled UI variables (Primary 600/700, Gray 50–900).
  • Keep radius tokens: 0.5rem buttons and inputs, 1rem cards, 10rem pills.
  • Use white or light-green-tint text on Dark Green backgrounds.

Don't

  • Don't create numbered duplicate classes (uui-button 27, uui-text-size-large 26…). The project already carries 20+ identical copies — they should be consolidated, not extended.
  • Don't hardcode #89bf42 or any hex — always use the variable.
  • Don't use dark gray text on the Dark Green band.
  • Don't leave buttons without a link — every CTA needs a destination.