# Uplight Design System

> High-contrast electric blue and neon mint anchored by geometric precision and hexagonal motifs.

**Source:** https://uplight.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Uplight utilizes a high-voltage palette of electric blue (#0047ff) and neon mint (#00e297) to signal energy innovation. The system is built on a foundation of pure white (#ffffff) and deep charcoal (#111111), using the Mark OT typeface family to maintain a clean, geometric aesthetic. Visual interest is driven by hexagonal framing and large-scale display type with tight negative tracking. Components favor high-contrast pill shapes and cards with soft, multi-layered shadows that create a sense of floating depth against the white canvas.

## Signature DNA
1. **Hexagonal Framing** (Geometric hexagon containers for icons and photography, observed on the homepage "Uplight Difference" section and "About" page investor logos).
2. **Chromatic High-Contrast CTAs** (The use of neon mint #00e297 backgrounds with electric blue #0047ff text for primary actions, creating maximum visual vibration).
3. **Geometric Sans Display** (Mark OT at heavy weights (700-800) with significant negative letter-spacing (-0.9px) for a modern, architectural feel).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.white}` | #ffffff | Page background, card surfaces, button text | 44 | 1 | Computed Style |
| `{color.dark-gray}` | #111111 | Primary body text, secondary button text | 38 | 1 | `--wp--preset--color--dark-gray` |
| `{color.black}` | #000000 | Deep emphasis text, shadow base | 31 | 1 | `--wp--preset--color--black` |
| `{color.border-light}` | #ededed | Subtle card borders and dividers | 7 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.electric-blue}` | #0047ff | Primary brand color, CTA text, link color | 20 | 1 | Brand Page |
| `{color.neon-mint}` | #00e297 | Primary CTA background, success indicators | 8 | 0.6 | Computed Style |
| `{color.coral}` | #ff845a | Tertiary accent, sub-labels, decorative text | 7 | 0.6 | Computed Style |
| `{color.primary-alt}` | #0073aa | Decorative only (low occurrence) | 1 | 1 | `--wp--preset--color--primary` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Mark OT | 400, 500, 700, 800 | Display, Headings, UI | Montserrat | Licensed |
| Mark W01 Book | 400, 700 | Body copy, Tabs | Inter | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display-xl}` | 45px | 50px | -0.9px | 700 | Page Hero H1 | `h1.h2.lg:max-w-[530px]` |
| `{type.display-lg}` | 42px | 46px | -0.84px | 700 | Section Headers | `h3.h3.mb-[10px]` |
| `{type.heading-md}` | 30px | 30px | -0.6px | 800 | Sub-section Heads | `h3.text-[30px].m-0` |
| `{type.heading-sm}` | 21px | 26px | -0.42px | 700 | Card Titles | `h3.h4.text-white` |
| `{type.body-lg}` | 18px | 25.2px | normal | 400 | Intro Paragraphs | `p.max-w-[450px]` |
| `{type.button}` | 18px | 22px | normal | 500 | Primary CTA | `a.button-green-lg` |
| `{type.body-md}` | 16px | 28.8px | normal | 400 | Standard Body | `section.w-full.bg-blue-dark` |
| `{type.label-caps}` | 14px | 25.2px | 3px | 700 | Overlines/Badges | `p.text-[14px].text-orange` |

### Principles
1. **Tight Display Tracking:** All headings above 21px utilize negative letter-spacing (ranging from -0.42px to -0.9px) to create a compact, high-impact look.
2. **Geometric Consistency:** Typography follows the geometric nature of the Mark OT family, avoiding humanist curves in favor of circular forms.
3. **Hierarchy via Weight:** Bold transitions from 400 (body) to 700/800 (headings) are used to define section breaks without needing heavy dividers.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 5px | 20 |
| `{space.sm}` | 10px | 13 |
| `{space.md}` | 15px | 14 |
| `{space.lg}` | 20px | 8 |
| `{space.xl}` | 30px | 12 |
| `{space.section}` | 80px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Section containers | 98 occurrences |
| `{radius.sm}` | 4px | Form inputs, small cards | 7 occurrences |
| `{radius.md}` | 8px | Interactive cards | 4 occurrences |
| `{radius.lg}` | 12px | Featured content cards | 6 occurrences |
| `{radius.pill}` | 9999px | Primary/Secondary Buttons | 7 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.natural}` | rgba(0,0,0,0.1) 0px 20px 25px -5px | Standard Cards | `about` page cards |
| `{shadow.mint}` | rgb(204,255,213) 0px 24px 36px 0px | Mint-themed cards | Homepage feature cards |
| `{shadow.blue}` | rgb(204,214,255) 0px 24px 36px 0px | Blue-themed cards | Homepage feature cards |

## Components

### Tier 1: Foundational

#### Pill Button
**Role:** Primary site-wide call to action.
**Pages observed:** https://uplight.com, https://uplight.com/about
**Spec:** 
- Background: `{color.neon-mint}` (#00e297)
- Text: `{color.electric-blue}` (#0047ff)
- Radius: `{radius.pill}` (9999px)
- Padding: 15px 30px 18px
- Typography: `{type.button}` (18px/500)
**States observed:** Default | Hover: captured (color shift) | Active: captured

#### Secondary Button
**Role:** Secondary actions or ghost buttons.
**Pages observed:** https://uplight.com/about
**Spec:**
- Background: `{color.white}` (#ffffff)
- Text: `{color.dark-gray}` (#111111)
- Border: 1px solid `{color.electric-blue}` (#0047ff)
- Radius: `{radius.pill}` (9999px)
- Typography: 16px Mark OT

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific product capabilities.
**Pages observed:** https://uplight.com
**Spec:**
- Background: Transparent
- Border: 1px solid `{color.border-light}` (#ededed)
- Radius: `{radius.sm}` (4px)
- Shadow: `{shadow.mint}` or `{shadow.blue}`
- Padding: 0px (content internal)

### Tier 3: Surface-specific

#### Impact Card
**Role:** Displaying metrics and awards.
**Pages observed:** https://uplight.com/about
**Spec:**
- Background: `{color.white}` (#ffffff)
- Radius: `{radius.lg}` (12px)
- Shadow: `{shadow.natural}`
- Padding: 20px

#### Navigation Bar
**Role:** Top-level site navigation.
**Pages observed:** https://uplight.com
**Spec:**
- Background: `{color.white}` (#ffffff)
- Text: `{color.dark-gray}` (#111111)
- Radius: `{radius.none}`
- Height: Not captured in source

## Layout
| Property | Value |
| :--- | :--- |
| Max Width | 1200px (approx) |
| Section Gap | 80px |
| Card Grid | 3-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; grid stacks to 1-column. |
| Desktop | 1440px | 3-column grid; horizontal navigation. |

## Imagery & decoration
Uplight uses photography of energy infrastructure (EV chargers, solar panels) and diverse people interacting with technology. A key decorative motif is the **Hexagon**, used as an icon container and as a subtle background pattern in dark blue sections. The brand avoids soft gradients, preferring solid blocks of high-saturation color.

## Do's
- Use `{color.neon-mint}` for primary action backgrounds.
- Apply negative letter-spacing to all headings above 20px.
- Use `{radius.pill}` for all interactive buttons.
- Frame icons and secondary photography within hexagon shapes.
- Set body copy in Mark W01 Book at 16px for readability.

## Don'ts
- **Wrong:** Using #0073aa as a primary button background. **Right:** Use #00e297. **Reason:** #0073aa is a legacy WordPress preset and not part of the active brand accent palette.
- Do not use sharp corners (0px) for interactive cards; use at least `{radius.sm}` (4px).
- Do not use standard tracking for display headers; it breaks the architectural feel of the brand.
- Avoid using black (#000000) for long-form body text; use `{color.dark-gray}` (#111111).

## Similar brands
- Octopus Energy (Shared investment, high-contrast palette)
- Schneider Electric (Energy sector, geometric precision)
- Tesla (Clean tech, geometric sans-serif focus)

## Quick start

### CSS Variables
```css
:root {
  --color-electric-blue: #0047ff;
  --color-neon-mint: #00e297;
  --color-dark-gray: #111111;
  --color-white: #ffffff;
  --font-display: "Mark OT", sans-serif;
  --font-body: "Mark W01 Book", sans-serif;
  --radius-pill: 9999px;
  --shadow-natural: 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #0047ff;
  --color-accent: #00e297;
  --font-display: "Mark OT";
  --spacing-base: 5px;
  --shadow-natural: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
```

## Agent prompt examples
- "Generate a primary CTA button using #00e297 background and #0047ff text with a 9999px border radius and 18px Mark OT font."
- "Create a feature card with a 12px border radius, a white background, and a soft shadow (rgba(0,0,0,0.1) 0px 20px 25px -5px)."
- "Style an H1 heading using Mark OT, 45px size, 700 weight, and -0.9px letter spacing."

## Known gaps
- Hover and focus states for navigation links were not explicitly captured in the token evidence.
- Specific mobile breakpoint pixel values are inferred from standard device widths (390px) rather than explicit CSS media query tokens.
- Z-index scale for modals and navigation was not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://uplight.com | Desktop 1440 | 2026-06-06 |
| About Page | https://uplight.com/about | Desktop 1440 | 2026-06-06 |
| Homepage Mobile | https://uplight.com | Mobile 390 | 2026-06-06 |