# Agentisenergy Design System

> High-contrast utility blue anchored by geometric precision and vibrant energy-sector accents.

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

## TL;DR
Agentisenergy utilizes a "Utility Chromatic" system where a deep electric blue `#0047ff` serves as the primary functional anchor against a stark white foundation `#ffffff`. The identity is defined by the high-contrast pairing of this blue with a vibrant "Energy Green" `#00e297` used for high-priority conversion actions. Typography is strictly geometric, utilizing the Mark OT and Mark W01 families to maintain a technical, infrastructure-aligned aesthetic. Layouts rely on generous vertical spacing (up to 120px) and a rigid 0px radius for most structural surfaces, punctuated only by pill-shaped buttons and specific 8px radius cards.

## Signature DNA
1. **The Blue-Green Switch** (Primary actions alternate between Electric Blue `#0047ff` and Energy Green `#00e297` depending on background luminance, ensuring maximum "signal" strength on both light and dark surfaces.)
2. **Geometric Infrastructure Type** (The use of Mark OT at weight 700 for displays with tight negative tracking (-0.9px) mimics industrial signage and technical documentation.)
3. **Floating Energy Glows** (Soft, large-scale shadows in tinted hues like `rgb(204, 255, 213)` create a sense of "active power" behind otherwise flat, white cards.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, primary surface, button text | 81 | 1.0 | `--wp--preset--color--white` |
| `{color.dark-gray}` | `#111111` | Primary body text | 51 | 1.0 | `--wp--preset--color--dark-gray` |
| `{color.black}` | `#000000` | Headings, high-contrast text | 42 | 1.0 | `--wp--preset--color--black` |
| `{color.border-light}` | `#ededed` | Card borders, section dividers | 12 | 0.8 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#0047ff` | Primary CTA background, links, brand anchor | 27 | 0.8 | Computed style |
| `{color.success}` | `#00e297` | High-priority CTA background (Energy Green) | 12 | 0.8 | Computed style |
| `{color.warning}` | `#ff845a` | Secondary accents, status indicators | 12 | 0.8 | Computed style |
| `{color.deep-blue}` | `#000f9f` | Dark section backgrounds, footer top-band | 3 | 0.6 | Computed style |
| `{color.muted}` | `#88889c` | Form labels, de-emphasized metadata | 3 | 0.6 | Computed style |

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

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-lg}` | 45px | 50px | -0.9px | 700 | Hero H1 | `h1.h2.lg:max-w-[530px]` |
| `{type.display-md}` | 42px | 46px | -0.84px | 700 | Section Headers | `h3.h3.mb-[10px]` |
| `{type.heading-lg}` | 30px | 30px | -0.6px | 800 | Feature Titles | `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 | CTA Labels | `a.button-green-lg` |
| `{type.body-md}` | 16px | 28.8px | normal | 400 | Default Body | `section.w-full` |
| `{type.label}` | 14px | 25.2px | 1.4px | 500 | Form Labels | `label.text-[14px]` |

### Principles
1. **Negative Tracking on Display:** All headings above 20px must use negative letter-spacing (approx -2% of font size) to maintain a dense, authoritative feel.
2. **High-Contrast Legibility:** Body text never drops below `#111111` on white, maintaining a minimum 16:1 contrast ratio.
3. **Uppercase Labels:** Small labels (14px) utilize wide tracking (1.4px) to distinguish them from running prose.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 51 |
| `{space.sm}` | 15px | 18 |
| `{space.md}` | 30px | 18 |
| `{space.lg}` | 50px | 24 |
| `{space.xl}` | 80px | 6 |
| `{space.section}` | 120px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers, primary surfaces | 162 occurrences |
| `{radius.input}` | 4px | Form fields, small cards | Pricing page inputs |
| `{radius.card}` | 8px | Feature cards, pricing tiers | Homepage feature grid |
| `{radius.pill}` | 9999px | All primary and secondary buttons | `a.button-green-lg` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.green-glow}` | `rgb(204, 255, 213) 0px 24px 36px 0px` | Active energy cards | Homepage "Our Impact" |
| `{shadow.blue-glow}` | `rgb(204, 214, 255) 0px 24px 36px 0px` | Technical feature cards | Homepage grid |

## Components

### Tier 1: Foundational

#### Pill Button
**Role:** Primary and Secondary Call to Action
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `{color.success}` (#00e297) / Text `{color.primary}` (#0047ff) / Radius `{radius.pill}` / Padding 15px 30px
**States observed:** Default | Hover: Not captured

#### Surface
**Role:** Main content sections
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.dark-gray}` (#111111) / Radius `{radius.sharp}` / Padding 30px
**States observed:** Default

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product benefits or impact metrics
**Pages observed:** Homepage, Pricing
**Spec:** Background `rgba(255, 255, 255, 0.88)` / Border 1px `{color.border-light}` / Radius `{radius.card}` / Shadow `{shadow.blue-glow}`
**States observed:** Default

#### Dark Section Surface
**Role:** High-impact hero or transition bands
**Pages observed:** Homepage, About
**Spec:** Background `{color.deep-blue}` (#000f9f) / Text `{color.white}` (#ffffff) / Radius `{radius.sharp}` / Padding 105px 0px 0px
**States observed:** Default

### Tier 3: Surface-specific

#### Pricing Card
**Role:** Tiered pricing display
**Pages observed:** Pricing
**Spec:** Background `{color.white}` (#ffffff) / Border 1px `{color.border-light}` / Radius `{radius.input}` (4px) / Shadow `{shadow.green-glow}`
**States observed:** Default

#### Navigation Bar
**Role:** Global header
**Pages observed:** All
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.black}` (#000000) / Height 80px / Padding 0px 50px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Gap | 120px |
| Column Gutter | 30px |
| Container Padding | 50px (Desktop) |

## Do's
- Use `{color.success}` (#00e297) for the most critical "Contact" or "Get Started" actions.
- Apply negative tracking to all Mark OT headings to maintain the "Infrastructure" aesthetic.
- Use 0px border radius for large structural sections to emphasize geometric rigidity.
- Pair `{color.primary}` (#0047ff) text with `{color.success}` (#00e297) backgrounds for high-contrast buttons.
- Use tinted shadows (`{shadow.blue-glow}`) instead of neutral grays to imply "energy."

## Don'ts
- Do not use `{color.primary}` as a background for text that is also blue; use white text on blue backgrounds.
- Do not round the corners of section containers; keep structural layout `{radius.sharp}`.
- Do not use standard gray shadows; all elevation must use a brand-tinted glow.
- Do not use Mark OT for long-form body prose; reserve it for headings and UI labels.
- Wrong: Using `#0073a8` (WP Primary) as the brand blue. Right: Use `#0047ff`. Reason: `#0047ff` is the specific brand identity color, not the CMS default.

## Similar brands
- GE Vernova
- Siemens Energy
- NextEra Energy
- Schneider Electric

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #0047ff;
  --color-success: #00e297;
  --color-warning: #ff845a;
  --color-white: #ffffff;
  --color-dark-gray: #111111;
  --font-heading: "Mark OT", sans-serif;
  --font-body: "Mark W01 Book", sans-serif;
  --radius-pill: 9999px;
  --shadow-energy: 0px 24px 36px 0px rgba(204, 214, 255, 1);
}
```

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://agentisenergy.com | 1440px | 2026-06-06 |
| Pricing | https://agentisenergy.com/pricing | 1440px | 2026-06-06 |
| About | https://agentisenergy.com/about | 390px | 2026-06-06 |