Skip to content
DesignMunkDesignMunk Submit a site

Opensend

opensend.com
Identify, engage, and retain high-value shoppers with first-party signals.
Marketing Software Next.js Tailwind Homepage Darker Grotesque Inter
Share Visit site
opensend.com DESKTOP · 1440
Opensend

AI Breakdown

Design export

---
version: alpha
name: Opensend
description: Identify, engage, and retain high-value shoppers with first-party signals.
colors:
  primary: "#1c1c1c"
  tertiary: "#288364"
  neutral: "#ffffff"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Darker Grotesque
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Darker Grotesque
    fontSize: 38px
    fontWeight: 600
    lineHeight: 1.26
    letterSpacing: -0.025em
  headline-sm:
    fontFamily: Darker Grotesque
    fontSize: 29px
    fontWeight: 600
    lineHeight: 1.38
    letterSpacing: -0.023em
  headline-xs:
    fontFamily: Darker Grotesque
    fontSize: 23px
    fontWeight: 600
    lineHeight: 1.04
    letterSpacing: -0.021em
  body-md:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.037em
rounded:
  sm: 4px
  md: 12px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 36px
  xl: 46px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 10px 24px
    height: 40px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 10px 24px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 24px
---

# Opensend: Green ROI Badges on Collaged Product Shots

## Overview

Opensend's UI aims for confident, data-forward marketing. The tone is practical and outcomes-led: show the metric, then invite action. Layouts are spacious but not airy; blocks are tightly composed with generous gaps between sections. The palette is minimal—ink, paper, and a single green accent—to keep proof points legible and scannable.

## Colors

- **primary (#1c1c1c):** Deep ink for headlines, body text, and dark-section backgrounds.
- **tertiary (#288364):** Accent green for success states, KPI badges, and highlight chips.
- **neutral (#ffffff):** Paper white for page background and most cards.
- **surface ({colors.neutral}):** Alias of neutral; use for containers that sit on the page background.
- **on-surface ({colors.primary}):** Alias of primary; standard text color on surfaces.

## Typography

- Headings: Darker Grotesque (Google). Used for all headline levels from 48px to 23px at weight 600 with tight negative tracking. Load directly from Google Fonts.
- Body: Inter 18px/1.5 (Google). Primary paragraph and UI copy; its neutral tone contrasts well with the expressive headings.
- Emoji: Noto Color Emoji (Google). Optional for inline symbol support.
- Substitutes (if Google is unavailable): For headings, consider Oswald or League Spartan (both Google) for condensed, geometric energy; for body, use System UI or Source Sans 3.

## Layout

- Spacing scale follows an 8px base: 8, 16, 24, 36, 46. Use xs/sm for internal control spacing, md for card padding, lg/xl for section gaps and column gutters.
- Grid: Two-column at large breakpoints (hero pattern), collapsing to a single column on small screens with lg (36px) vertical rhythm.
- Content blocks are card-based with 24px internal padding and clear separation via whitespace rather than lines or shadows.
- Logo and integration sections use a simple responsive grid with sm–md gaps.

## Elevation & Depth

Shadows are not used (all measured levels are none). Hierarchy is established with high contrast (ink on paper or paper on ink), md-radius cards, and sectional background flips. Overlaid KPI badges and imagery provide visual layering without relying on blur or drop shadows. Borders may be used sparingly; whitespace does most of the separation work.

## Shapes

Two radii communicate touch vs. container: sm 4px for interactive controls like buttons and small badges, md 12px for cards, media, and larger tiles. Use sm when elements should read as crisp and actionable; use md for content blocks and images to stay friendly and modern.

## Components

Buttons follow the minimal palette and emphasize clarity over decoration.

- Primary Button: 40px height, 10px 24px padding, 4px radius; background #1c1c1c, text #ffffff. Default CTA.
- Secondary Button: 40px height, 10px 24px padding, 4px radius; background #ffffff, text #1c1c1c. Sits on dark panels or when a lighter touch is needed.
- Link Button: Text-only control using #1c1c1c and 0px radius; reserve for in-line or low-emphasis actions.
- Card: #ffffff background, #1c1c1c text, 12px radius, 24px padding. Base container for most sections.

### KPI Badge
Compact stat tile used in the hero and proof sections. Background #288364, text in #1c1c1c, 4px radius, internal padding xs–sm. Numeral set in Darker Grotesque headline-xs (23px/600); label in Inter body-md (18px/400).

### Logo Strip
Row of customer logos on a neutral surface. Use a responsive grid with sm (16px) gaps and md (24px) vertical padding. Logos are presented monochrome for consistency and to keep emphasis on quantity over color.

### Testimonial Panel
A full-width section using #1c1c1c as background and #ffffff text. Section heading in headline-md (38px/600), quotes in body-md (18px/1.5). Optional metrics beneath quotes can use headline-sm (29px/600). Buttons switch to Secondary here.

### Solutions Tiles
Three cards (Connect, Reconnect, Ignite) presented in a grid. Each tile is a Card with 24px padding and 12px radius, title in headline-sm (29px/600), body in Inter 18px, and a Link Button for "Learn more."

### Persona Stepper
Numbered steps arranged vertically with md (24px) gaps. Step index uses headline-xs (23px/600); step title uses headline-sm (29px/600); description uses body-md.

### Integration Grid
Grid of partner logos and short descriptions. Use md (24px) gaps, Card containers when captions are present, or bare logos on surface when they're not. Buttons use Link style for setup docs.

### CTA Bar ($1 Trial)
Compact bar or card near the footer. Headline in headline-md (38px/600), body in Inter 18px, with Primary and Secondary buttons side by side using sm (16px) gap.

## Do's and Don'ts

- Do use Darker Grotesque for all headings at the specified sizes and weight 600; keep the negative letter-spacing from the tokens.
- Do keep body copy at Inter 18px/1.5 for readability; avoid dropping below 16px.
- Do reserve #288364 for accents like KPI badges and key highlights; keep links and default text in #1c1c1c.
- Do use md (12px) radius for cards and imagery; use sm (4px) on buttons and small badges.
- Don't introduce drop shadows; separate blocks with whitespace or a background flip.
- Don't mix sm and md radii within the same component cluster; pick one per cluster for consistency.

## Agent Prompt Guide

Quick color reference — text: #1c1c1c, background: #ffffff, border: #1c1c1c (use low opacity as needed), accent: #288364.

1) Build a hero with two columns. Left: H1 in Darker Grotesque 48px/600, letter-spacing -0.02em, color #1c1c1c; supporting copy in Inter 18px/1.5. Primary button 40px tall with 10px 24px padding, 4px radius; background #1c1c1c, text #ffffff. Right: three Card components (24px padding, 12px radius) arranged in a collage. Place a small KPI Badge (background #288364, 4px radius) on one card. Use a column gap of 36px and section padding of 46px.

2) Create a dark testimonial strip. Section background #1c1c1c, text #ffffff. Heading in Darker Grotesque 38px/600. Two testimonial Cards inside with 24px padding and 12px radius (transparent or #1c1c1c background). Quote text in Inter 18px; include a metric set in Darker Grotesque 29px/600. Add a Secondary button (#ffffff background, #1c1c1c text) for "Show More."

3) Lay out the "Our Solutions" grid. Three Cards, each 24px padding, 12px radius, on #ffffff. Titles in Darker Grotesque 29px/600; descriptions in Inter 18px; a Link Button (text color #1c1c1c, radius 0) labeled "Learn More." Use 24px gaps and 46px section spacing.

4) Build an integration logo grid. Section heading in Darker Grotesque 38px/600. A responsive grid of logos with 16px gaps and 24px vertical padding. If captions are needed, nest each logo in a Card (24px padding, 12px radius) on #ffffff.

5) Assemble a closing CTA bar. Container as Card (24px padding, 12px radius). Headline in Darker Grotesque 38px/600; supporting line in Inter 18px. Place Primary and Secondary buttons side by side with a 16px gap. Use #288364 for a small KPI Badge if you want to restate ROI.

## Similar Brands

- Klaviyo: Similar high-contrast marketing site with strong proof and integrations; Klaviyo leans more on product UI captures than lifestyle imagery.
- Attentive: Shares the green-accent palette and SMS/Email focus; Attentive uses more rounded, friendly shapes and larger motion.
- Wunderkind: Dense proof and comparisons like Opensend; typography is more conventional and relies on heavier dark sections.
- Drip: Headline-forward with simple palettes; Drip's accenting is brighter and UI screenshots are more prominent.
- Postscript: Minimal palette with bold numerals; emphasizes SMS-specific workflows where Opensend spreads across channels.

More like this

Browse Marketing →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 8 minutes 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 · 8 minutes ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 11 hours ago
polymer.co
Polymer HR & Recruiting
Polymer
Attract and hire great people with a powerful ATS and job board
Homepage · 13 hours ago