Skip to content
DesignMunkDesignMunk Submit a site

EVO Marketing

evomarketing.co
More Than Views: The Organic Engine That Scales Revenue
Agency Marketing Framer Homepage Red Hat Transducer Test Extended
Share Visit site
evomarketing.co DESKTOP · 1440
EVO Marketing

AI Breakdown

Design export

---
version: alpha
name: EVO Marketing
description: "More Than Views: The Organic Engine That Scales Revenue"
colors:
  primary: "#ffffff"
  tertiary: "#e16100"
  neutral: "#000000"
  border: "#374151"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Transducer Test Extended Black
    fontSize: 120px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: -0.02em
  headline-md:
    fontFamily: sans-serif
    fontSize: 77px
    fontWeight: 700
    lineHeight: 1.19
  headline-sm:
    fontFamily: sans-serif
    fontSize: 49px
    fontWeight: 600
    lineHeight: 1.2
  headline-xs:
    fontFamily: Red Hat Text
    fontSize: 31px
    fontWeight: 600
    lineHeight: 1.19
    letterSpacing: -0.017em
  body-md:
    fontFamily: Red Hat Text
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.02em
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 6px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 100px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#0000ee"
    rounded: "{rounded.full}"
    padding: 16px 26px
    height: 49px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 16px 26px
    height: 49px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# EVO Marketing: Ultra-Wide Headlines on Smoky Black

## Overview

EVO runs in dark mode with high contrast and a single orange accent. The tone is assertive and performance-driven: oversized headlines, tight copy, and evidence-first sections. Spacing is roomy and modular so blocks of UGC thumbnails and stat tiles feel scannable rather than crowded. When tokens don't cover a case, bias toward black surfaces, white type, and orange as a sparing highlight for action.

## Colors

- **primary (#ffffff):** Core text and high-emphasis elements; also the fill for primary buttons per tokens.
- **tertiary (#e16100):** Hot accent for highlights, badges, and emphasized CTAs.
- **neutral (#000000):** Baseline background for the dark theme.
- **border (#374151):** Subtle separators, dividers, and card outlines on black.
- **surface ({colors.neutral}):** Page and section surfaces; identical to neutral in this theme.
- **on-surface ({colors.primary}):** Default on-surface text and icon color for dark surfaces.

## Typography

- Headline-lg (Transducer Test Extended Black, 120px/1.2, 900, -0.02em): Hero-level display with very wide, industrial geometry. Font source type is custom; an agent cannot load it directly. Substitutes: League Spartan, Archivo Black, Bowlby One.
- Headline-md (sans-serif, 77px/1.19, 700): Secondary display for section intros where the hero face isn't required. Use a strong system sans (system-ui, Inter, or similar) if Transducer is unavailable.
- Headline-sm (sans-serif, 49px/1.2, 600): Tertiary headings and large pull lines.
- Headline-xs (Red Hat Text, 31px/1.19, 600, -0.017em): Compact feature headlines and card titles. Red Hat Text is a Google font and can be loaded.
- Body-md (Red Hat Text, 20px/1.5, 400, -0.02em): Paragraphs, captions, and UI labels. Prefer sentence-case with tight but readable tracking.

## Layout

Spacing is a short, pragmatic scale: 6, 16, 24, 40, 100. Use md (24px) as the default gutter and block gap; lg (40px) for section padding within a band; xl (100px) to open the hero and major CTAs. A 12-column responsive grid with md gutters suits the thumbnail shelves and process lists; collapse to 2–3 columns on narrow viewports while preserving md gaps. Keep generous negative space around display headlines so the type reads as a shape.

## Elevation & Depth

Depth is minimal. Cards may use the measured sm shadow (rgba(0,0,0,0.2) 0 15px 45px 6.25px) to float thumbnails on black. Larger surfaces are defined by tone and spacing rather than shadow. Where separation is needed, rely on the border color or a slight shift between surface elements instead of heavy elevation.

## Shapes

The system uses two radii: sm (8px) for cards and media, and full (9999px) for pills. Apply full only to buttons and compact status chips. Consistency here signals interaction (pills) versus content (8px blocks).

## Components

- Buttons
  - Primary: background #ffffff, text #0000ee, pill radius (9999px), 16px×26px padding, 49px height.
  - Secondary: text #ffffff on transparent/dark, pill radius (9999px), 16px×26px padding, 49px height.
  - Link: text #ffffff, square corners (0px).
- Card: black background, white text, 8px radius, 16px padding; optionally add the sm shadow for media.

Distinctive components on this page:

### Frosted Top Bar
- Black surface with a translucent feel, left logo, right "LET'S TALK" pill. Height padded with sm–md; keep items horizontally spaced by md.

### Hero Headline Stack
- Centered block using headline-lg. Three stacked lines with tight letter-spacing; surround with xl top/bottom padding. Subhead in Body-md centered beneath.

### Dual CTA Row
- Two side-by-side pills beneath the hero: primary action and a secondary "Creator?" path. Maintain md gap and consistent 49px heights.

### Client Logo Strip
- A single row of monochrome brand marks. Use on-surface (#ffffff) with reduced opacity for de-emphasis and md gaps between items.

### UGC Reels Grid
- A responsive grid of 9:16 thumbnails inside 8px-radius cards, md gaps, optional sm shadow. Titles or overlays set in Body-md.

### Performance Stat Tiles
- Repeating three-number groups (views, likes, posts). Use the Card spec with tight internal md spacing and right-aligned numerals for scanability.

### Four-Step Process
- A 2×2 or 4-column block using Headline-xs for headings and Body-md for copy. md gaps, lg section padding.

### Attribution Pipeline List
- Five sequential items with short headings and support text. Use Headline-xs for labels; arrange in a horizontal scroller on mobile with md gaps.

## Do's and Don'ts

- Do reserve #e16100 for emphasis and key CTAs; overuse dilutes the signal on a black canvas.
- Do keep display type large (120/77/49) with the specified negative tracking; avoid thin weights.
- Do use md (24px) gaps for grids and lg (40px) for section padding; open the hero with xl (100px).
- Don't add new shadow sizes; use the measured sm shadow or stay flat with borders (#374151).
- Don't round content blocks beyond 8px; full radius is for interactive pills only.
- Don't introduce gray text on black; rely on #ffffff for readability and use layout to set hierarchy.

## Agent Prompt Guide

Quick color reference — Text: #ffffff, Background: #000000, Border: #374151, Accent: #e16100.

1) Build the hero
- Background #000000. Center a three-line headline using "Transducer Test Extended Black" at 120px, 900, line-height 1.2, letter-spacing -0.02em. Subhead in Red Hat Text 20px/1.5 beneath. Add two buttons: Primary pill (height 49px, padding 16px 26px, background #ffffff, text #0000ee, border-radius 9999px). Secondary pill (transparent on black, text #ffffff, same size and radius). Section padding top/bottom: 100px.

2) Create a UGC reels grid
- Page surface #000000. Use a responsive 12-col grid with 24px gutters. Cards follow: background #000000, text #ffffff, border-radius 8px, padding 16px, optional shadow rgba(0,0,0,0.2) 0 15px 45px 6.25px. Maintain 24px gaps.

3) Four-step features block
- Section padding 40px. Headline uses Red Hat Text at 31px, 600, letter-spacing -0.017em. Body copy in Red Hat Text 20px/1.5. Lay out 4 columns with 24px gaps; on small screens stack with 24px spacing.

4) Performance stat tiles
- Use Card spec (8px radius, 16px padding) in a grid with 24px gaps. Headings in sans-serif 49px/1.2, 600 for key numerals; labels in Red Hat Text 20px/1.5. Optional border #374151 for subtle separation.

5) Footer CTA band
- Background #000000. Short headline in sans-serif 49px/1.2, 600; paragraph in Red Hat Text 20px/1.5. Include a primary pill button (as above) and a text link button (#ffffff, radius 0). Section padding: 40–100px depending on viewport.

## Similar Brands

- Viral Nation — Dark, performance-first aesthetic with bold type; they lean heavier on photography while EVO uses oversized display type as the main graphic.
- GRIN — Influencer marketing platform with dark UI, strong contrast, and pill CTAs; more product-software framing versus EVO's agency proof grid.
- Influencer.com — Black surfaces, bright accent color and stat-driven case rows; their typography is narrower and less display-driven than EVO's.

More like this

Browse Agency →
customer.io
Customer.io AI
Customer.io
Supercharge your messaging with compounding customer engagement
Homepage · 16 hours ago
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 1 day ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 1 day ago
lev8.com
Lev8 AI
Lev8
Turn the live web into people and business intelligence.
Homepage · 2 days ago