# Zengo Design System

> High-contrast crypto-utility interface pairing deep charcoal canvases with high-voltage gold accents and Proxima Nova precision.

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

## TL;DR
Zengo employs a "Dark Mode First" aesthetic that leverages a high-contrast palette of Gold (#ea9c2f) against Dark Charcoal (#1f2324) and Black (#000000). The system relies heavily on Proxima Nova across a wide range of weights (300 to 800) to establish a clear information hierarchy, particularly in complex pricing and data tables. Components feature a mix of sharp and moderately rounded corners (8px to 16px), often utilizing subtle semi-transparent backgrounds (rgba(255, 255, 255, 0.15)) to maintain depth on dark surfaces. The visual language is functional and technical, using teal accents (#61d6c8) for secondary data points and success states.

## Signature DNA
1. **The Gold Standard Action** (Primary CTAs use #ea9c2f background with dark charcoal text, creating a high-visibility focal point against dark backgrounds, observed on Homepage and Pricing).
2. **Proxima Nova Weight Layering** (Using weights from 300 for body to 800 for pricing integers to create extreme typographic contrast without changing font families).
3. **Glass-morphism Overlays** (Use of semi-transparent white backgrounds and borders for secondary buttons and "sticky" UI elements to sit naturally over dark hero imagery).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Page background, primary text on dark | 379 | 1 | `--wp--preset--color--white` |
| `{colors.black}` | `#000000` | Primary surface background, CTA background | 82 | 1 | `--wp--preset--color--black` |
| `{colors.dark-charcoal}` | `#1f2324` | Section backgrounds | 19 | 1 | `--wp--preset--color--dark-charcoal` |
| `{colors.light-charcoal}` | `#272c2f` | Primary button text | 28 | 1 | `--wp--preset--color--light-charcoal` |
| `{colors.text-muted}` | `#adb3b7` | Secondary text, footer links | 144 | 1 | `--text-color` |
| `{colors.border-soft}` | `#eef2f7` | Table borders, secondary surfaces | 10 | 1 | `--viewer-primary-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.gold}` | `#ea9c2f` | Primary CTA, active text, brand signals | 22 | 1 | `--color-gold` |
| `{colors.teal}` | `#61d6c8` | Secondary accents, success indicators | 181 | 0.8 | `computed_style` |
| `{colors.gray-900}` | `#111827` | Decorative only (About page text) | 2 | 1 | `--ep-gray-900` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Proxima Nova | 200, 300, 400, 500, 600, 700, 800 | Display, Heading, Body | Montserrat | Licensed |
| -apple-system | 300, 400, 500, 600, 700 | System fallback / UI | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 72px | 72px | -1.44px | 400 | Hero Headlines | `h1.elementor-heading-title` |
| `{type.display-lg}` | 54px | 59.4px | -1.08px | 300 | Section Headers | `h3.elementor-heading-title` |
| `{type.heading-lg}` | 48px | 52.8px | -0.96px | 700 | Block Headlines | `h2.wp-block-heading` |
| `{type.price-integer}` | 38px | 30.4px | -0.1px | 800 | Pricing Tables | `span.elementor-price-table__integer-part` |
| `{type.heading-md}` | 32px | 38.4px | -0.64px | 500 | Feature Titles | `h2.elementor-heading-title` |
| `{type.heading-sm}` | 24px | 26.4px | -0.48px | 700 | Sub-headings | `h3.wp-block-heading` |
| `{type.body-lg}` | 18px | 28.8px | -0.1px | 300 | Primary Body | `p.wp-block-paragraph` |
| `{type.button}` | 18px | 18px | -0.1px | 600 | CTA Labels | `a.elementor-button` |
| `{type.body-sm}` | 14px | 23.8px | -0.1px | 300 | Testimonials/Captions | `div.elementor-testimonial__text` |

### Principles
1. **Lightweight Body Text:** Body copy consistently uses weight 300 for a clean, modern feel on dark backgrounds.
2. **Tight Display Tracking:** As font size increases, letter spacing tightens significantly (up to -1.44px at 72px).
3. **Price Emphasis:** Pricing values use the heaviest weight (800) to ensure immediate visual scanning.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 27 |
| `{space.sm}` | 10px | 154 |
| `{space.md}` | 16px | 36 |
| `{space.lg}` | 24px | 95 |
| `{space.xl}` | 40px | 41 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Sharp containers | 857 occurrences |
| `{radius.sm}` | 4px | Input fields | `radius: 4px` |
| `{radius.md}` | 8px | Primary Buttons | `radius: 8px` |
| `{radius.lg}` | 16px | Feature Cards | `radius: 16px` |
| `{radius.pill}` | 50px | Badges / Tags | `radius: 50px` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.deep}` | `rgba(0, 0, 0, 0.4) 0px 4px 32px 0px` | Floating Cards | 19 occurrences |
| `{shadow.natural}` | `rgba(0, 0, 0, 0.25) 0px 16px 41px 0px` | Modals / Popups | 10 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** Homepage, Pricing
**Spec:** Background: `{colors.gold}` (#ea9c2f) / Text: `{colors.light-charcoal}` (#272c2f) / Radius: `{radius.md}` (8px) / Padding: 12px 24px / Typography: `{type.button}`
**States observed:** Default | Hover: Not captured | Active: Captured

#### Secondary Button (Ghost)
**Role:** Secondary actions on dark backgrounds
**Pages observed:** Homepage, Pricing
**Spec:** Background: `rgba(255, 255, 255, 0.15)` / Text: `{colors.white}` (#ffffff) / Border: `1px solid rgba(255, 255, 255, 0.4)` / Radius: 20px / Padding: 5px 14px
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Pricing Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background: `{colors.white}` (#ffffff) / Text: `{colors.black}` (#000000) / Radius: `{radius.lg}` (16px) / Shadow: `{shadow.deep}`
**States observed:** Default | Active: Captured (Featured state)

#### Feature Card (Dark)
**Role:** Product benefit display
**Pages observed:** Homepage
**Spec:** Background: `{colors.dark-charcoal}` (#1f2324) / Border: `{colors.border-soft}` (#e1e9ee) / Radius: `{radius.md}` (8px) / Shadow: `{shadow.deep}`
**States observed:** Default

### Tier 3: Surface-specific

#### Navigation Surface
**Role:** Global header
**Pages observed:** All
**Spec:** Background: `rgba(0, 0, 0, 0)` / Text: `{colors.white}` (#ffffff) / Font Size: 18px / Padding: 13px 10px
**States observed:** Default | Sticky: Captured

#### Pricing Table Row
**Role:** Detailed plan comparison
**Pages observed:** Pricing
**Spec:** Background: `{colors.white}` (#ffffff) / Border-bottom: `1px solid #c8c8c8` / Padding: 12px / Typography: 14px Weight 300
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1200px |
| Section Padding (Vertical) | 80px - 100px |
| Grid Columns | 12 |
| Column Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Navigation collapses to burger menu; Buttons become full-width (100%) |
| Desktop | 1440px | Multi-column pricing layouts (3-up) |

## Do's
- Use `{colors.gold}` (#ea9c2f) exclusively for primary conversion actions.
- Pair Proxima Nova weight 300 with weight 700 to create hierarchy.
- Use `{radius.lg}` (16px) for all content-heavy pricing cards.
- Ensure all text on dark surfaces uses `{colors.white}` or `{colors.text-muted}`.
- Apply `{shadow.deep}` to elements that need to float above the charcoal canvas.

## Don'ts
- **Wrong:** Using `{colors.teal}` (#61d6c8) for primary buttons. **Right:** Use `{colors.gold}`. **Reason:** Teal is reserved for secondary data signals and success states.
- **Wrong:** Using pure white (#ffffff) for section backgrounds. **Right:** Use Black (#000000) or Dark Charcoal (#1f2324). **Reason:** Zengo is a dark-mode first brand.
- **Wrong:** Applying sharp corners (0px) to interactive buttons. **Right:** Use `{radius.md}` (8px). **Reason:** Buttons require rounding to distinguish from container blocks.

## Similar brands
- Coinbase (Utility-focused crypto interface)
- Ledger (Hardware-security aesthetic)
- Revolut (High-contrast fintech layout)

## Quick start

```css
/* CSS Variables */
:root {
  --zengo-gold: #ea9c2f;
  --zengo-black: #000000;
  --zengo-charcoal: #1f2324;
  --zengo-white: #ffffff;
  --zengo-teal: #61d6c8;
  --zengo-radius-md: 8px;
  --zengo-radius-lg: 16px;
}
```

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-----|----------|--------------|
| Homepage | https://zengo.com | 1440px | 2026-06-06 |
| Pricing | https://zengo.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://zengo.com | 390px | 2026-06-06 |