# Genesis.global Design System

> High-contrast architectural precision where electric blue accents punctuate a clean, light-weight Aeonik typographic grid.

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

## TL;DR
Genesis.global utilizes a "monochrome plus one" strategy, where a stark white canvas and deep charcoal text (`#1c272e`) are energized by a singular, high-voltage primary blue (`#0000ff`). The typographic system is anchored by **Aeonik Light**, used at large scales (up to 72px) with tight tracking to create an "architectural" display feel. Layouts rely on generous whitespace and a 10px-20px border radius scale for cards and interactive elements. Elevation is achieved through subtle, large-spread shadows (`rgba(27, 27, 27, 0.1)`) rather than heavy borders, maintaining a light, digital-native aesthetic.

## Signature DNA
1. **Architectural Display Typography** (Aeonik Light at 70px+ with negative tracking, used for primary headlines across all pages to signal precision and scale).
2. **The "Blue-on-White" Voltage** (Pure `#0000ff` used exclusively for primary CTAs, icons, and active states against a `#ffffff` background, creating a 15.2:1 contrast ratio).
3. **Soft-Depth Containers** (Large-radius cards (10px-20px) paired with extremely soft, wide-spread shadows like `rgba(10, 0, 74, 0.07) 0px 20px 40px`, avoiding harsh lines).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Page background, card surface, primary button text | 180 | 1 | `--bs-body-bg` |
| `{colors.charcoal}` | `#1c272e` | Primary body text, secondary headings | 183 | 1 | `--bs-body-color` |
| `{colors.grey}` | `#5b5b5e` | Secondary text, subtle borders | 101 | 1 | `--bs-grey` |
| `{colors.black}` | `#1d1d1f` | High-emphasis text, display headings | 80 | 1 | `--bs-light-black` |
| `{colors.light-grey}` | `#dadada` | Default dividers and card outlines | 20 | 1 | `--bs-light-grey` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | `#0000ff` | Primary CTAs, icon strokes, active links | 86 | 1 | `--bs-primary` |
| `{colors.deep-blue}` | `#0a004a` | Dark mode surfaces, footer backgrounds | 14 | 1 | `--bs-dark-blue` |
| `{colors.off-red}` | `#ff0000` | Pricing highlights (decorative_only) | 4 | 1 | `--bs-off-red` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{colors.success}` | `#198754` | Valid form states |
| `{colors.error}` | `#dc3545` | Invalid form states |
| `{colors.warning}` | `#fdc500` | Alert states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Aeonik Light | 400 | Display, Primary Headlines | Inter Light | Proprietary |
| Aeonik Regular | 300, 400, 500 | Subheadings, Body, UI Labels | Inter | Proprietary |
| Aeonik Medium | 400, 700 | Emphasis, Navigation, Buttons | Inter Medium | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-xl}` | 72px | 79.7px | -0.72px | 400 | Hero Headlines | `h2.wp-block-heading` |
| `{type.display-lg}` | 70px | 77px | -0.7px | 400 | Section Titles | `h1.wp-block-heading` |
| `{type.display-md}` | 50px | 55px | -0.5px | 400 | Secondary Hero | `h2.wp-block-heading` |
| `{type.heading}` | 32px | 35.2px | -0.32px | 500 | Card Titles | `h3.wp-block-heading` |
| `{type.body-lg}` | 22px | 30.8px | normal | 400 | Lead Paragraphs | `p.description` |
| `{type.body}` | 18px | 25.2px | normal | 400 | Default Body | `header.wp-block-template-part` |
| `{type.body-sm}` | 14px | 16.8px | 0.14px | 400 | Button Labels | `a.e-btn__link` |
| `{type.caption}` | 12px | 16.8px | normal | 400 | Navigation Links | `a.wp-block-navigation-item__content` |

### Principles
1. **Light Weight, Large Scale:** Headlines must use Aeonik Light. Never use Bold for display text.
2. **Negative Tracking on Display:** All text above 32px must apply negative letter-spacing (approx -1% of font size).
3. **Tight Button Leading:** Button text uses a 1.2 line-height ratio (`16.8px` on `14px` text) to keep the pill compact.

## Spacing
**Base unit:** 5px (derived from common multiples 10, 15, 20, 30, 50)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 41 |
| `{space.sm}` | 10px | 24 |
| `{space.md}` | 20px | 32 |
| `{space.lg}` | 30px | 37 |
| `{space.xl}` | 50px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sm}` | 6px | Small UI elements | 10 occurrences |
| `{radius.md}` | 10px | Default Cards, Inputs | 48 occurrences |
| `{radius.lg}` | 20px | Feature Sections | 11 occurrences |
| `{radius.pill}` | 50px | Primary Buttons | 17 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.subtle}` | `rgba(27, 27, 27, 0.1) 0px 10px 25px` | Standard Cards | 13 occurrences |
| `{shadow.deep}` | `rgba(10, 0, 74, 0.07) 0px 20px 40px` | Floating UI/Modals | 8 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Action
**Pages observed:** Home, Pricing
**Spec:** Background: `#0000ff` | Text: `#ffffff` | Radius: `50px` | Padding: `14px 24px` | Typography: `14px Aeonik Bold`
**States observed:** Default | Hover: captured | Active: captured

#### Text Input
**Role:** Form entry
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` | Text: `#1b1b1f` | Border: `1px #dadada` | Radius: `10px` | Padding: `15px 20px`
**States observed:** Default | Focus: captured

### Tier 2: Patterns

#### Standard Card
**Role:** Content grouping
**Pages observed:** Home, About
**Spec:** Background: `#ffffff` | Border: `1px #dadada` | Radius: `10px` | Padding: `20px` | Shadow: `none`
**States observed:** Default

#### Elevated Card
**Role:** Featured content
**Pages observed:** About
**Spec:** Background: `#ffffff` | Radius: `10px` | Padding: `64px 57px` | Shadow: `rgba(27, 27, 27, 0.1) 0px 10px 25px`
**States observed:** Default

### Tier 3: Surface-specific

#### Pricing Card
**Role:** Tier selection
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` | Border: `1px #dadada` | Radius: `10px` | Padding: `50px 34px`
**States observed:** Default

#### Navigation Item
**Role:** Top-level site navigation
**Pages observed:** All
**Spec:** Text: `#1c272e` | Typography: `16px Aeonik Bold` | Padding: `0px 15px`
**States observed:** Default | Hover: captured

## Layout
| Property | Value |
|---|---|
| Max Width | 1440px |
| Section Gap | 120px |
| Grid | 12-column |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked cards, 100% width buttons, reduced display type to 43px |
| Desktop | 1440px | Multi-column grids, 72px display type |

## Imagery & decoration
Genesis uses high-fidelity photography of professional environments and abstract "tech-mesh" gradients. It avoids illustrative icons, preferring thin-stroke geometric glyphs in `#0000ff`.

## Do's
- Use **Aeonik Light** for any text larger than 32px.
- Apply a **50px radius** to all primary buttons to create the signature pill shape.
- Use `#0000ff` as the only chromatic color for interactive elements.
- Maintain a minimum of **120px vertical spacing** between major homepage sections.
- Ensure all cards on white backgrounds use the `{shadow.subtle}` token.

## Don'ts
- **Don't** use bold weights for display headlines; it breaks the "architectural" feel.
- **Don't** use the sub-brand blue (if any) in place of the parent `#0000ff`.
- **Don't** use sharp corners (0px radius) for interactive components; the brand requires a minimum of 6px.
- **Don't** use pure black `#000000` for body text; use the charcoal `#1c272e` for better readability.

## Similar brands
- Stripe (Typography and clean grid)
- Linear (High-contrast monochrome with blue accents)
- Vercel (Minimalist architectural aesthetic)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #0000ff;
  --color-charcoal: #1c272e;
  --color-white: #ffffff;
  --font-display: "Aeonik Light", sans-serif;
  --radius-pill: 50px;
  --shadow-subtle: 0 10px 25px rgba(27, 27, 27, 0.1);
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #0000ff;
  --color-charcoal: #1c272e;
  --font-display: "Aeonik Light";
  --radius-md: 10px;
  --shadow-subtle: 0 10px 25px rgba(27, 27, 27, 0.1);
}
```

## Agent prompt examples
- "Generate a primary CTA button using the Genesis.global spec: `#0000ff` background, white text, 50px border radius, and 14px Aeonik Bold font."
- "Create a content card with a 10px border radius, white background, and the Genesis subtle shadow: `rgba(27, 27, 27, 0.1) 0px 10px 25px`."
- "Style an H1 headline using Aeonik Light at 72px with -0.72px letter spacing in `#1c272e`."

## Known gaps
- Hover state transitions (durations/easing) were not captured in the static CSS variable analysis.
- Mobile-specific menu transition logic was not fully detailed in the source evidence.
- The specific "Aeonik" font-face files were not accessible for direct weight verification beyond computed styles.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://genesis.global | 1440x900 | 2026-06-06 |
| Pricing | https://genesis.global/pricing | 1440x900 | 2026-06-06 |
| About | https://genesis.global/about | 1440x900 | 2026-06-06 |