Skip to content
DesignMunkDesignMunk Submit a site

Sendr

sendr.ai
Personalised outreach, powered by signals.
AI Marketing Framer Homepage Hedvig Letters Serif Inter
Share Visit site
sendr.ai DESKTOP · 1440
Sendr

AI Breakdown

Design export

# Design brief: the Sendr design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/07095642/sendr-ai.webp
- Above the fold: https://cdn.designmunk.com/2026/09/07095642/sendr-ai.webp
- On DesignMunk: https://designmunk.com/sendr/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Sendr: Monochrome Sales Site with Italic Serif Subheads

## Overview

Sendr's UI is assertive, minimal, and conversion-minded: black type on a paper-light surface with a single accent blue. It targets SDRs and RevOps teams who value speed and clarity over decoration. Layouts are spacious but not airy; headlines are dense and tight, with supporting copy set more softly. When no token exists, default to high contrast, restrained color, and compact components.

## Colors

- **primary (#000000):** Core ink for headlines, body text, and icons.
- **secondary (#848c8c):** Muted grey for captions, logo strip tinting, and low-emphasis text.
- **tertiary (#0000ee):** Accent/link blue for interactive states and in-card links.
- **neutral (#fafafa):** Page background and light card grounds; the default surface.
- **brand-cold-wind (#e2e3e4):** Divider lines, subtle borders, and input outlines.
- **surface ({colors.neutral}):** Alias to the paper background used for sections.
- **on-surface ({colors.primary}):** Alias to the default text color on surfaces.

## Typography

- Inter Display — custom/self-hosted. Role: headline-lg at 64px, weight 700, tight tracking (-0.03em) for primary hero and major section claims. Substitutes: Inter (Google), Manrope (Google), Plus Jakarta Sans (Google).
- Inter Variable — custom/self-hosted. Role: headlines md/sm/xs for secondary headings (50/39/31px) with normal contrast and light tracking. Substitutes: Inter (Google), Work Sans (Google), Public Sans (Google).
- Hedvig Letters Serif — Google font, freely available. Role: body-md at 24px for narrative lines, callouts, and italic asides. If unavailable, fall back to Source Serif 4 or Georgia, then system serif.
Pairing guidance: keep headlines sans; reserve the serif for short supporting sentences to avoid texture clash in dense sections.

## Layout

Spacing follows a compact, stepped scale: 6, 14, 24, 40, 88px. Use xl (88px) for section top/bottom, lg (40px) for intra-section blocks, md (24px) for card padding and grid gutters, sm (14px) for button gaps and small stacks, xs (6px) for micro-gaps. Grids are simple 1–2–3 column patterns that collapse to a single column on mobile with md (24px) side padding.

## Elevation & Depth

Depth is conveyed with soft, neutral shadows over a paper surface: sm for pills and small popovers, md for floating UI (nav, app chrome), lg for large screenshots, and xl/inner for framed mockups. Borders are minimal; when needed, use brand-cold-wind (#e2e3e4) for dividers and input outlines. Whitespace and scale differences handle most hierarchy.

## Shapes

Radii are intentionally subtle: sm 8px for inputs and secondary buttons, md 9px for primary buttons and key CTAs, lg 10px for cards and app nodes. The near-square language feels product-grade and keeps dense layouts from looking bubbly.

## Components

Buttons
- Primary: #ffffff background, #19191d text, height 36px, horizontal padding 20px, radius 9px. Use for main CTAs.
- Secondary: #f7f7f8 background, #202024 text, height 36px, padding 20px, radius 8px. Use for supportive actions.
- Link: #000000 text, radius 0. Use for inline actions.

Card
- #FAFAFA background, #0000EE text for links, radius 10px, padding 26px top, 20px sides, 18px bottom. Pair with md shadow for prominence.

Distinctive components
### Hero Banner
- Headline 64px Inter Display 700, -0.03em; supporting line 24px Hedvig Letters Serif; CTA group uses button-primary then button-secondary; spacing xl top/bottom.
### Logo Marquee
- Grayscale client logos laid on #FAFAFA with secondary (#848C8C) tint; gap md; reduce opacity to keep focus on the headline.
### Sequencer Canvas
- Canvas on #FAFAFA with dotted or subtle texture; nodes are cards (radius 10px) with sm–md shadows; connectors use brand-cold-wind for lines.
### KPI Stat Row
- Stats like "5M+" set in headline-md (50px) or lg for impact; labels in body-md (24px) Hedvig Letters Serif; spacing lg between items.
### Workflow Step List
- Two-column list of tasks with status chips; use brand-cold-wind dividers and tertiary (#0000EE) for "Learn ..." links.
### Unibox Preview
- Inbox panel as a card with lg radius and md shadow; message rows use primary text with secondary metadata; use sm spacing inside rows.
### Pricing Plans
- Plan cards on neutral (#FAFAFA), lg radius 10px, md shadow; primary CTA uses the 36px button-primary; feature lists separated by brand-cold-wind dividers.
### Chrome Extension Promo
- Single-column banner with headline-sm (39px) and a primary CTA; keep background neutral to maintain page rhythm.

## Do's and Don'ts

Do keep text color #000000 on #FAFAFA and reserve #0000EE strictly for links and key interactive affordances.
Do use xl (88px) spacing to separate major sections and md (24px) inside cards and grids.
Do apply subtle radii (8/9/10px) consistently; mix them only as specified (buttons vs. cards).
Don't introduce additional brand colors for emphasis; use scale, spacing, or shadows instead.
Don't add heavy borders; prefer brand-cold-wind (#e2e3e4) hairlines or shadows.
Don't set long paragraphs in the serif; limit Hedvig to short, narrative lines to maintain readability.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #FAFAFA
- Border/Divider: #E2E3E4
- Accent/Link: #0000EE

1) Build the hero
- Section background #FAFAFA with xl (88px) top/bottom padding.
- H1: 64px Inter (Google) at 700 as a substitute for Inter Display 700; line-height 1; letter-spacing -0.03em; color #000000.
- Supporting line: 24px Hedvig Letters Serif 400; line-height 1.4; color #000000.
- CTA row: primary button 36px tall, padding 0 20px, radius 9px, background #FFFFFF, text #19191D; secondary button 36px, padding 0 20px, radius 8px, background #F7F7F8, text #202024; gap sm (14px).

2) Logo strip
- Container on #FAFAFA; horizontal list with md (24px) gaps; set logo tint or captions in #848C8C; keep max-height to maintain visual quiet.

3) Feature card grid
- Three cards per row on desktop, collapsing to one on mobile; card background #FAFAFA, radius 10px, padding 26px 20px 18px, md shadow; headings 39px Inter (substitute for Inter Variable), body 24px Hedvig; links inside cards use #0000EE.

4) Pricing plans
- Two plan cards on #FAFAFA with lg (40px) gap; each card uses lg radius 10px and md shadow; plan price in 50px Inter (sub for Inter Variable), features in 24px Hedvig; primary CTA uses the 36px white button; dividers #E2E3E4; section padding xl (88px).

## Similar Brands

- Outreach: similar monochrome emphasis and workflow storytelling; more enterprise tone and denser navigation.
- Apollo: shares the SDR audience and product-screenshot selling; Apollo leans more blue and uses heavier iconography.
- HubSpot Sales Hub: comparable proof-driven layout; HubSpot injects brand orange where Sendr stays grayscale.
- lemlist: personalization-first pitch and GIF emphasis; lemlist is bolder with color and playful tone.
- Instantly: AI-assisted cold email with stat blocks; Instantly uses sharper radii and brighter accents.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #848c8c;
  --color-tertiary: #0000ee;
  --color-neutral: #fafafa;
  --color-brand-cold-wind: #e2e3e4;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 64px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 50px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.004em;
  --text-headline-sm-size: 39px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.21;
  --text-headline-sm-tracking: -0.005em;
  --text-headline-xs-size: 31px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 24px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.4;
  --font-inter-display: "Inter Display";
  --font-inter-variable: "Inter Variable";
  --font-sans-serif: "sans-serif";
  --font-hedvig-letters-serif: "Hedvig Letters Serif";

  /* Rounded */
  --radius-sm: 8px;
  --radius-md: 9px;
  --radius-lg: 10px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 88px;

  /* Components */
  --button-primary-background-color: #ffffff;
  --button-primary-text-color: #19191d;
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 0px 20px;
  --button-primary-height: 36px;
  --button-secondary-background-color: #f7f7f8;
  --button-secondary-text-color: #202024;
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 0px 20px;
  --button-secondary-height: 36px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-tertiary);
  --card-rounded: var(--radius-lg);
  --card-padding: 26px 20px 18px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-secondary: #848c8c;
  --color-tertiary: #0000ee;
  --color-neutral: #fafafa;
  --color-brand-cold-wind: #e2e3e4;
  --color-surface: #fafafa;
  --color-on-surface: #000000;
  --font-headline-lg: "Inter Display";
  --font-headline-md: "Inter Variable";
  --font-headline-sm: "Inter Variable";
  --font-headline-xs: "sans-serif";
  --font-body-md: "Hedvig Letters Serif";
  --text-headline-lg: 64px;
  --text-headline-md: 50px;
  --text-headline-sm: 39px;
  --text-headline-xs: 31px;
  --text-body-md: 24px;
  --tracking-headline-lg: -0.03em;
  --tracking-headline-md: -0.004em;
  --tracking-headline-sm: -0.005em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --radius-md: 9px;
  --radius-lg: 10px;
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 88px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.518,
                    0.549,
                    0.549
                ],
                "hex": "#848c8c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0.933
                ],
                "hex": "#0000ee"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.98,
                    0.98,
                    0.98
                ],
                "hex": "#fafafa"
            }
        },
        "brand-cold-wind": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.886,
                    0.89,
                    0.894
                ],
                "hex": "#e2e3e4"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.98,
                    0.98,
                    0.98
                ],
                "hex": "#fafafa"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 88,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 9,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Display",
                "fontSize": {
                    "value": 64,
                    "unit": "px"
                },
                "fontWeight": 700,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Variable",
                "fontSize": {
                    "value": 50,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.004,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Variable",
                "fontSize": {
                    "value": 39,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.005,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans-serif",
                "fontSize": {
                    "value": 31,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Hedvig Letters Serif",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Sendr**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
zaro.ai
Zaro AI
Zaro
fellow.ai
Fellow AI
Fellow
thedrive.ai
The Drive AI AI
The Drive AI
workleap.com
Workleap AI
Workleap