Ulysses — Focused Writing, Cinematic Product Tour

---
version: alpha
name: Ulysses — Focused Writing, Cinematic Product Tour
colors:
  ink: "#27272B"
  paper: "#F7F7F5"
  white: "#FFFFFF"
  charcoal: "#3E3D3C"
  deep: "#373635"
  primary: "#FFCC00"
typography:
  hero:
    fontFamily: "interstate, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.2
  feature:
    fontFamily: "interstate, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.04
  body:
    fontFamily: "interstate, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  action:
    fontFamily: "interstate, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.334
spacing:
  mobile-gutter: 20px
  button-y: 6px
  button-x: 36px
rounded:
  button: 3px
  story-link: 10px
components:
  hero:
    textColor: "{colors.ink}"
    backgroundColor: "{colors.paper}"
    typography: "{typography.hero}"
  feature-band:
    textColor: "{colors.white}"
    backgroundColor: "{colors.charcoal}"
    typography: "{typography.feature}"
  secondary-band:
    backgroundColor: "{colors.deep}"
  action:
    typography: "{typography.action}"
    rounded: "{rounded.button}"
  footer-link:
    textColor: "{colors.primary}"
---

## Overview

Ulysses presents writing software through a quiet white opening followed by a long, dark product demonstration. The distinctive ingredients are an angled multi-device still life, narrow humanist sans-serif typography, bright yellow butterfly branding, large application windows and alternating left/right feature stories. Keep the product UI dominant rather than substituting generic abstract illustration.

Evidence: a 1440px desktop page and a 390 × 844 mobile opening viewport, captured in light color preference. Values below come from computed styles unless explicitly called estimates. Images and overview were reviewed; animation, hover, menu-open and carousel transitions were not tested. Brand claims, quotations and award artwork belong to the source, not to a new product using this guide.

## Colors

Use ink #27272B for the opening copy, paper #F7F7F5 for the light section surfaces and white for the header and download strip. Feature sections use closely related warm charcoals including #3E3D3C and #373635; this tonal variation creates chapter boundaries without bright separators. White text and white editor windows provide the contrast. Yellow #FFCC00 is an accent for the butterfly, active navigation underline, small annotations and footer links. Do not turn it into a full-page background or use it for long body text on white.

## Typography

The sampled family is Interstate with system sans-serif fallbacks. Desktop opening title: 48px, 700, 57.6px leading in a 565px-wide text column. Feature titles retain 48px bold but tighten to 49.92px leading. Body copy is 18px with 28.8px leading in the opening and about 28.08px in feature stories. These are not all-purpose heading sizes: small navigation is about 16px and action labels are 15px medium.

At 390px the opening title becomes 38px/41.8px, centered in a 350px column. Feature titles compute to 37.5px/39px and body copy to 16px with approximately 25px leading. Preserve the strong title/body ratio and avoid artificially heavy tracking. The heading hierarchy in the source DOM differs from its visual hierarchy; reproduce visual roles with accessible semantic headings.

## Layout

Desktop has a slim white header, left-aligned brand and right-aligned text navigation. The opening text begins at x=145px; the large device arrangement occupies the right side and deliberately crops at the page edge. A separate white download strip holds the App Store badge, trial note and award artwork. Below it, edge-to-edge dark chapters alternate screenshot and copy, with text columns approximately 383px wide and outer content anchors near x=125px and x=1315px. Use generous vertical breathing room; roughly 80–120px chapter padding is a visual estimate, not a measured global token.

On mobile the header uses a hamburger affordance, the title centers, the introductory paragraph is absent in the captured opening and a large upright phone replaces the desktop device arrangement. The download strip stacks its badge, trial line and award. Measured mobile content gutter is 20px, with a 350px text width. Do not simply shrink the entire desktop composition. Lower-page responsive styles were sampled, but only the mobile opening was visually captured; do not treat every lower breakpoint as tested.

## Elevation & Depth

Photorealistic device frames, angled hardware and native app-window drop shadows create depth. Dark backgrounds also carry quiet oversized linework and symbols. Keep ordinary text sections flat. Shadow blur/spread values were not measured; match the reference visually rather than assigning a supposedly exact shadow token. Avoid imposing floating SaaS cards on every section.

## Shapes

Most structural sections are rectangular and full width. The large rounded corners belong primarily to devices and editor windows. Small outlined Get Ulysses links use a measured 3px radius and 6px vertical, 36px horizontal padding. The book-story link has a measured 10px radius. Preserve the contrast between restrained web controls and softer product imagery.

## Components

- Header: butterfly mark plus compact wordmark; four restrained desktop links and a thin yellow active underline. Mobile shows a two-line menu icon; its expanded state was not inspected.
- Hero: a bold three-line desktop headline and short body column beside angled hardware. On mobile use centered type and a single prominent phone.
- Download strip: black App Store badge, trial text and light-gray award graphic; keep the badge recognizable rather than redrawing it as a yellow pill.
- Feature chapter: large editor screenshot paired with white title, short explanatory paragraph and small white outline action. Alternate sides on desktop to sustain rhythm.
- Use-case groups: centered section title, four small icon-led benefits and supporting book covers or publishing artwork. Keep icons subordinate to writing outcomes.
- Closing sections: pale testimonial and author-story areas, a compact download card and dark footer with yellow text links. Any rotating testimonials are represented by one captured state only.

## Do's and Don'ts

- Do show real writing interfaces with readable content at native resolution.
- Do reserve yellow for navigation, identity and small emphasis.
- Do use a deliberately different mobile hero rather than a miniature hardware collage.
- Do retain strong light-to-dark section contrast and generous paragraph leading.
- Don't repeat the source's testimonials, award or commercial claims for an unrelated product.
- Don't infer hover or mobile-menu behavior from these static views.
- Don't replace restrained outline actions with large rounded gradient buttons.