---
version: alpha
name: Mimestream landing-page reference
description: A native-Mac email landing page with crisp white space, a centered headline,
  blue trial action, large inbox screenshot, pastel feature cards and a structured
  multi-account/productivity story.
colors:
  primary: '#007AFF'
  surface: '#FFFFFF'
  on-surface: '#000000'
  secondary: '#F9F9F9'
  accent: '#F09A38'
typography:
  headline-sample:
    fontFamily: system-ui, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif
    fontSize: 48px
    fontWeight: 500
    lineHeight: 48px
    letterSpacing: -0.72px
  secondary-sample:
    fontFamily: system-ui, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif
    fontSize: 28.8px
    fontWeight: 500
  mobile-heading-sample:
    fontFamily: system-ui, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif
    fontSize: 48px
    fontWeight: 500
    lineHeight: 48px
    letterSpacing: -0.72px
  paragraph-sample:
    fontFamily: system-ui, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif
    fontSize: 16.8px
    fontWeight: 300
---

# Mimestream landing-page reference

## Overview

Observed at https://mimestream.com/ on 2026-09-19 at 1440px desktop and 390px mobile widths. A native-Mac email landing page with crisp white space, a centered headline, blue trial action, large inbox screenshot, pastel feature cards and a structured multi-account/productivity story. This is an independent visual reference, not an official brand specification.

## Colors

Tokens record sampled CSS RGB values, converted to hex. Artwork and interface imagery contain additional colors; the tokens are a compact reference palette, not an exhaustive brand system.

## Typography

The first measured headline sample uses system-ui, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif at 48px, weight 500, line height 48px and tracking -0.72px. The YAML records this sample, a secondary heading, a mobile heading and a substantial paragraph where available. These are observed elements, not an invented universal scale. Font-family declarations are measured; exact glyph rendering depends on font availability and licensed assets.

## Layout

Place the wordmark opposite a compact navigation row, then center headline, short description, paired trial/video actions and compatibility note. Show a wide email-client window immediately below. Alternate centered chapter introductions with asymmetrical feature-card grids; include account profiles, writing tools, privacy, system integration, press logos and newsletter signup.

Replace the desktop navigation row with a left menu icon and centered wordmark. The 48px heading retains its size and wraps into three lines within a 340px text region at x=25. Trial and video buttons stack. The inbox artwork scales to the available width below the compatibility note. No horizontal document overflow was detected at either inspected width. Intermediate breakpoints and full mobile scroll behavior were not visually reviewed. Section spacing and component arrangements are visual observations rather than an exhaustive measured spacing scale.

## Elevation & Depth

Subtle window shadows and fine borders distinguish white interface imagery from the white page. Pale tinted cards group capabilities without deep elevation. Exact shadow values were not measured.

## Shapes

Use moderate rounded rectangles for buttons, screenshots and feature panels. Small multicolored interface icons and colored feature headings create variation within the otherwise monochrome page. Radius descriptions are visual estimates.

## Components

Keep the blue trial action visually dominant and preserve full inbox context in the hero. Use the pastel feature colors sparingly; do not apply the orange, green and purple accents indiscriminately to primary controls. The desktop overview supplies the section ordering; the mobile evidence supplies only the inspected opening composition. Video previews and animation frames are static captured states, not a specification for playback.

## Do's and Don'ts

- Do preserve the reference-specific hierarchy, imagery and responsive ordering described above.
- Do maintain legibility when adapting the palette or replacing fonts.
- Don't infer hover, focus, open-menu or form-validation states: those interactions were not exercised.
- Don't treat a single capture as a complete animation or carousel specification.