iA Writer

---
version: alpha
name: iA Writer landing-page reference
description: A restrained writing-app landing page using near-white and charcoal chapters,
  compact blue acquisition controls, focus-mode text demonstrations, generous negative
  space and editorial testimonials.
colors:
  primary: '#1DB4F0'
  surface: '#F7F7F7'
  on-surface: '#222222'
  secondary: '#252525'
  accent: '#FFFFFF'
typography:
  headline-sample:
    fontFamily: iASansDay, system-ui, -apple-system, sans-serif, "Hiragino Sans",
      "ヒラギノ角ゴ Pro W4", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo,
      "ＭＳ Ｐゴシック", "MS PGothic", BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif
    fontSize: 57.8265px
    fontWeight: 700
    lineHeight: 57.8265px
    letterSpacing: -1.15653px
  secondary-sample:
    fontFamily: iASansDay, system-ui, -apple-system, sans-serif, "Hiragino Sans",
      "ヒラギノ角ゴ Pro W4", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo,
      "ＭＳ Ｐゴシック", "MS PGothic", BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif
    fontSize: 23px
    fontWeight: 500
    lineHeight: 31.05px
    letterSpacing: -0.345px
  mobile-heading-sample:
    fontFamily: iASansDay, system-ui, -apple-system, sans-serif, "Hiragino Sans",
      "ヒラギノ角ゴ Pro W4", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo,
      "ＭＳ Ｐゴシック", "MS PGothic", BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif
    fontSize: 35.1775px
    fontWeight: 700
    lineHeight: 35.1775px
    letterSpacing: -0.70355px
  paragraph-sample:
    fontFamily: iASansDay, system-ui, -apple-system, sans-serif, "Hiragino Sans",
      "ヒラギノ角ゴ Pro W4", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo,
      "ＭＳ Ｐゴシック", "MS PGothic", BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
---

# iA Writer landing-page reference

## Overview

Observed at https://ia.net/writer on 2026-09-19 at 1440px desktop and 390px mobile widths. A restrained writing-app landing page using near-white and charcoal chapters, compact blue acquisition controls, focus-mode text demonstrations, generous negative space and editorial testimonials. This is an independent visual reference, not an official brand specification.

## Colors

Tokens record sampled RGB colors. The small GET control uses the measured wide-gamut value color(display-p3 0 0.5 1), while the cyan accent also appears in product imagery; these are not an asserted single brand-blue token.

## Typography

The first measured headline sample uses iASansDay, system-ui, -apple-system, sans-serif, "Hiragino Sans", "ヒラギノ角ゴ Pro W4", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif at 57.8265px, weight 700, line height 57.8265px and tracking -1.15653px. 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

Use a compact persistent-looking top navigation with wordmark, two text links and blue GET pill. Center a small icon/product-name lockup and two-line benefit statement above a large writing window. Alternate pale and dark full-width chapters around interface demonstrations, paired explanatory columns and typography samples. Finish with customer portraits, long editorial testimonials, trial actions and footer links.

Keep the short text navigation rather than introducing the desktop's longer menu. The product name drops from about 58px to 35px. The opening demonstration changes from a wide writing window to a cropped phone frame; the tagline remains 23px and fits within 346px at x=22. Body paragraphs become 18px/27px below it. 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

A large soft shadow lifts the writing window from a nearly matching pale canvas. Elsewhere, background contrast and device frames provide depth with little card chrome. Exact shadow values were not measured.

## Shapes

Use quiet rectangular editor sheets, lightly rounded window corners, small pill controls and native device frames. The focused dark paragraph against faded surrounding text is an essential visual pattern. Radius descriptions are visual estimates.

## Components

Preserve the distinction between marketing sans-serif text and monospaced writing demonstrations. Do not interpret deliberately faded focus-mode paragraphs as failed contrast throughout the site. Keep promotional decoration minimal. 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.