Skip to content
DesignMunkDesignMunk Submit a site

WMail

wmail.download
The calm, fast inbox built for Fastmail.
Apps & Mobile Communication Homepage Instrument Sans
Share Visit site
wmail.download DESKTOP · 1440
WMail

AI Breakdown

Design export

# Design brief: the WMail 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/10/03064328/wmail-download-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/10/03064328/wmail-download-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/wmail/

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

# WMail: Quiet two-column hero and confident dark band

## Overview

WMail markets a native iPhone email client with a calm, product-first tone. The interface aims for quiet confidence: light surfaces, dark text, and minimal accent color. Typography leads — large, softly tracked display paired with compact system body copy. Density is deliberate: content blocks are tight but separated by generous vertical spacing, so the page reads as spacious without feeling empty.

## Page Structure

- Header: single-line bar with left-aligned wordmark and right-aligned links (Fastmail, Features, FAQ, Changelog) plus a filled "Get the app" button.
- Hero: two-column layout; left column carries display headline, short paragraph, and App Store badge; right column shows a rounded, lilac-tinted product mockup stack with soft shadow.
- Dark proof band: full-width near-black section with centered headline and supporting paragraph; light-on-dark type, minimal decoration.
- Feature cluster — Masked Email & Replies: stacked feature blocks pairing concise copy with UI panels (masked address list, reply/composer) and a small schedule sheet.
- Feature cluster — Send later & Private memos: text with adjacent mock cards demonstrating scheduling and an in-thread memo.
- Comparison section: explanatory heading followed by a simple table comparing WMail vs. Fastmail app vs. Apple Mail.
- Pause Inbox: explanatory headline, three bullets, and a phone-like schedule card showing paused state and timings.
- Newsletter bundles: text with bullets and a right-hand inbox/newsletters panel; includes a "waiting until" status row.
- Quick reply: copy plus a conversation view with bottom reply bar; two-point bullet list.
- Templates: headline, explanatory paragraph, and a panel showing template shortcuts and expansion example.
- "And so much more": a compact grid of small feature blurbs with short heads and body lines.
- FAQ: question-and-answer list with a link to more help.
- Changelog highlights: two dated entries with titles and read-more links.
- Final CTA: centered copy and an App Store badge with platform requirements and an affiliate link.
- Footer: utility links, social profiles, legal text and trademark disclaimer.

## Colors

- **primary (#1f1f22):** Deep ink for headlines, main body text, and high-contrast UI labels.
- **secondary (#040404):** Near-black used for full-bleed emphasis sections and the filled CTA background in the header.
- **tertiary (#a9b4d0):** Soft lilac accent seen in hero mockup tints and subtle highlights; use sparingly.
- **neutral (#f7f6f3):** Warm light background for the page surface and light cards.
- **border (#5e6b8a):** Slate blue-gray for subtle dividers, input rings, and link-styled elements.
- **surface (#f7f6f3):** Default surface, same as neutral, for cards and panels on light sections.
- **on-surface (#1f1f22):** Standard text color when placed on surface/neutral backgrounds.

## Typography

- Instrument Sans — display. Used for headline-lg (62px/1.04, -0.035em), headline-md (48px/1.08, -0.03em), and headline-sm (22px/1.08, -0.02em). Source is self-hosted custom; treat as not guaranteed for agents. Good substitutes: Inter, Plus Jakarta Sans, or Manrope (all freely available on Google Fonts) for similar geometric, low-contrast shapes. Roboto is also acceptable if those are unavailable.
- System Sans (-apple-system) — UI and small heads. Used for headline-xs (18px/1.22) and body-md (14px/1.55). This keeps paragraphs compact and familiar, reading like app copy rather than promotional text.
- Tracking is slightly negative on large heads to reduce air between letters; keep body tracking normal for legibility.

## Layout

- Spacing scale is tight in the smalls (2/10/18/26px) with a large section spacer at 120px. Use xl for vertical section rhythm; md and lg for intra-section gaps; sm for element padding and compact lists.
- Page grid reads as two columns for most feature rows with image/mockup opposite copy; switch to a centered single column for the dark band, comparison table, FAQ, and final CTA.
- Content density: 14px body and short paragraphs enable higher information density; maintain generous top/bottom padding so sections don't blur together.
- Cards use internal padding ~12px and sit within the grid rather than bleeding to edges.

## Elevation & Depth

- Shadows are soft and infrequent: md shadow for prominent mockups and hero card; sm for floating pills or small overlays. Large and xl shadows are unused.
- Borders (1px, #5e6b8a) and tonal contrast do more work than elevation for separation, especially in the comparison table and FAQ.
- An inner ring (inset #5e6b8a) can be used to imply focus or selected states on light panels.

## Shapes

- Radii are gentle and consistent: sm 4px for compact controls, md 10px for primary buttons and medium panels, lg 11.2px for hero and major cards.
- Rounded panels communicate friendliness without feeling playful; reserve the largest radius for hero and marquee mockups to signal prominence.

## Components

- Buttons
  - Primary: 42px height; 10px radius; 10px×16px padding; background #1f1f22; text #f7f6f3. Use for the main CTA.
  - Secondary: 42px height; 4px radius; 10px×16px padding; text #1f1f22 on transparent or light backgrounds.
  - Link: text #5e6b8a; no radius; for inline or tertiary actions.
- Card: #f7f8fb background; 11.2px radius; ~12px padding; primary text color.

### Hero Mockup Stack
- A large rounded panel (~11px radius) with a lilac tint (lean on #a9b4d0) holding layered inbox and mini-dialog screenshots; apply md shadow for lift.

### Dark Proof Band
- Full-width section with #040404 background, centered 48px headline and 14px paragraph; optional light card overlay to echo masked-email UI.

### Feature Comparison Table
- Three columns with 1px #5e6b8a borders and compact 14px cells; checkmarks/Yes rendered as plain text to keep the minimalist tone.

### Pause Schedule Card
- Light card showing "Paused" state, next unpause time, and schedule rows; md radius; sm shadow; primary text on neutral surface.

### Masked Email Panel
- List of masked addresses with status chips (Active/Blocked/All); light card, md–lg radius; subtle border or sm shadow.

### Send Later Sheet
- Bottom sheet-style panel listing quick times (Today 17:30, 18:00, Tomorrow 09:00, etc.); 14px labels; strong primary text; md radius.

### Quick Reply Bar
- Fixed bar at conversation bottom with a single-line input and submit; 14px text; minimal border top using #5e6b8a.

## Do's and Don'ts

- Do keep most sections on the neutral #f7f6f3 surface and reserve #040404 for one or two emphasis bands.
- Do set display heads in Instrument Sans (or Inter/Manrope substitute) with the specified negative tracking; keep body at 14px system sans.
- Do use md or sm shadows sparingly on hero/feature mockups; rely on borders for structure elsewhere.
- Don't introduce bright accent colors; limit accent to the soft #a9b4d0 lilac and textual emphasis.
- Don't mix radii; use 10–11.2px for featured panels, 4px for compact elements.
- Don't over-broaden paragraphs; lines should be short and scannable in this system.

## Agent Prompt Guide

Quick colour reference — Text: #1f1f22; Background: #f7f6f3; Border: #5e6b8a; Accent: #a9b4d0.

1) Two-column hero with mockup
- Section background #f7f6f3, 120px top/bottom padding. Grid: left text, right media.
- H1: "Instrument Sans", 62px, line-height 1.04, letter-spacing -0.035em, color #1f1f22; fallback: -apple-system, Roboto.
- Paragraph: -apple-system, 14px/1.55, color #1f1f22 at 80% opacity.
- Primary CTA: 42px height, 10px radius, 10px×16px padding, background #1f1f22, text #f7f6f3.
- Mockup card: background #f7f8fb, radius 11.2px, md shadow (rgba(31,31,34,0.06) 0 1px 2px, rgba(35,40,52,0.18) 0 18px 50px), inner tint using #a9b4d0 at 6%.

2) Dark proof band
- Full-bleed background #040404; center content to 720–880px.
- H2: Instrument Sans 48px/1.08, -0.03em, color #f7f6f3.
- Body: -apple-system 14px/1.55, color #f7f6f3 at 80%.
- Optional overlay card: #f7f8fb, radius 11.2px, sm shadow, border 1px #5e6b8a.

3) Feature row with text and panel
- Two columns with 26px gutter; 120px section padding.
- Kicker: -apple-system 18px/1.22, color #1f1f22 at 80%.
- H2: Instrument Sans 48px, -0.03em; body 14px.
- Feature panel: #f7f8fb, radius 11.2px, padding 12px, border 1px #5e6b8a or md shadow.

4) Comparison table
- Single-column container, max-width 900px.
- Header row: -apple-system 18px/1.22, color #1f1f22.
- Cells: -apple-system 14px/1.55; grid with 1px borders #5e6b8a; row height 48–56px; zebra optional at #f7f8fb.

5) Final download CTA
- Centered section on #f7f6f3; H2 Instrument Sans 48px; supporting body 14px.
- Primary button per spec; include small requirement line at 14px beneath.

## Similar Brands

- Fastmail: similarly quiet palette and product-first screenshots; WMail diverges by leaning harder on large, display heads and a single dramatic dark band.
- HEY by Basecamp: big type and confident claims; HEY uses brighter color accents and chunkier components where WMail stays restrained.
- Superhuman: minimalist, dark-leaning marketing with tight typography; WMail flips to a light default and uses smaller body text.
- Spark Mail: screenshot-heavy with gradients; Spark is more vibrant and playful, while WMail keeps accents muted and copy denser.
- Proton Mail: privacy-forward and sober; Proton's visuals are heavier and more security-themed, while WMail focuses on workflow features.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #1f1f22;
  --color-secondary: #040404;
  --color-tertiary: #a9b4d0;
  --color-neutral: #f7f6f3;
  --color-border: #5e6b8a;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 62px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.04;
  --text-headline-lg-tracking: -0.035em;
  --text-headline-md-size: 48px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.08;
  --text-headline-md-tracking: -0.03em;
  --text-headline-sm-size: 22px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.08;
  --text-headline-sm-tracking: -0.02em;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 14px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.55;
  --font-instrument-sans: "Instrument Sans";
  --font-apple-system: "-apple-system";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 11.2px;

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 10px;
  --spacing-md: 18px;
  --spacing-lg: 26px;
  --spacing-xl: 120px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 10px 16px;
  --button-primary-height: 42px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 10px 16px;
  --button-secondary-height: 42px;
  --button-link-text-color: var(--color-border);
  --button-link-rounded: 0px;
  --card-background-color: #f7f8fb;
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-lg);
  --card-padding: 11.9px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #1f1f22;
  --color-secondary: #040404;
  --color-tertiary: #a9b4d0;
  --color-neutral: #f7f6f3;
  --color-border: #5e6b8a;
  --color-surface: #f7f6f3;
  --color-on-surface: #1f1f22;
  --font-headline-lg: "Instrument Sans";
  --font-headline-md: "Instrument Sans";
  --font-headline-sm: "Instrument Sans";
  --font-headline-xs: "-apple-system";
  --font-body-md: "-apple-system";
  --text-headline-lg: 62px;
  --text-headline-md: 48px;
  --text-headline-sm: 22px;
  --text-headline-xs: 18px;
  --text-body-md: 14px;
  --tracking-headline-lg: -0.035em;
  --tracking-headline-md: -0.03em;
  --tracking-headline-sm: -0.02em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 11.2px;
  --spacing-xs: 2px;
  --spacing-sm: 10px;
  --spacing-md: 18px;
  --spacing-lg: 26px;
  --spacing-xl: 120px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.122,
                    0.122,
                    0.133
                ],
                "hex": "#1f1f22"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.016,
                    0.016,
                    0.016
                ],
                "hex": "#040404"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.663,
                    0.706,
                    0.816
                ],
                "hex": "#a9b4d0"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.969,
                    0.965,
                    0.953
                ],
                "hex": "#f7f6f3"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.369,
                    0.42,
                    0.541
                ],
                "hex": "#5e6b8a"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.969,
                    0.965,
                    0.953
                ],
                "hex": "#f7f6f3"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.122,
                    0.122,
                    0.133
                ],
                "hex": "#1f1f22"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 2,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 18,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 26,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 120,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 11.2,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Instrument Sans",
                "fontSize": {
                    "value": 62,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.035,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Instrument Sans",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Instrument Sans",
                "fontSize": {
                    "value": 22,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "-apple-system",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "-apple-system",
                "fontSize": {
                    "value": 14,
                    "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 WMail**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Apps & Mobile →
birdtab.app
BirdTab Apps & Mobile
BirdTab
reloop.sh
Reloop Communication
Reloop
loom.com
Loom Communication
Loom
plumby.app
Plumby Pricing Apps & Mobile
Plumby Pricing