Skip to content
DesignMunkDesignMunk Submit a site

Runner

runner.now
The AI app that saves you 14+ hours a week
AI Software Homepage Exposure Geist Mono
Share Visit site
runner.now DESKTOP · 1440
Runner

AI Breakdown

Design export

---
version: alpha
name: Runner
description: The AI app that saves you 14+ hours a week
colors:
  primary: "#1d1b1b"
  secondary: "#4b4b4b"
  tertiary: "#252116"
  neutral: "#fcfcfa"
  brand-sierra: "#a35c44"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Exposure
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.044em
  headline-md:
    fontFamily: Exposure
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: -0.014em
  headline-sm:
    fontFamily: Exposure
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.07
  headline-xs:
    fontFamily: Geist Mono
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: 0.014em
  body-md:
    fontFamily: Geist Mono
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.019em
rounded:
  sm: 6px
  md: 8px
spacing:
  xs: 6px
  sm: 16px
  md: 30px
  lg: 46px
  xl: 76px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#e7e7e7"
    rounded: "{rounded.sm}"
    padding: 5px 9.375px 5px 15px
    height: 45px
  button-secondary:
    textColor: "{colors.tertiary}"
    rounded: 0px
    padding: 5px 9.375px 5px 15px
    height: 45px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Runner: Display-Serif Headlines with Monospace Everything Else

## Overview

Runner's UI is tool-like and calm: mostly monochrome with a single warm accent. It targets professionals adopting AI for everyday work, so clarity and proof matter more than spectacle. Pages feel spacious, with generous white space between sections and compact, repeatable components. When tokens don't specify a case, prefer ink-on-porcelain, monospace body copy, and minimal decoration.

## Colors

- **primary (#1d1b1b):** Ink for headlines, core text, and dark CTAs.
- **secondary (#4b4b4b):** Muted graphite for secondary text, borders, and dividers.
- **tertiary (#252116):** Espresso for subtle emphasis and dark UI elements outside primary actions.
- **neutral (#fcfcfa):** Porcelain base for the canvas and cards.
- **brand-sierra (#a35c44):** Warm accent for numerals, icons, and small highlights.
- **surface (#fcfcfa):** Default surface for blocks and cards; matches neutral.
- **on-surface (#1d1b1b):** Text color on surfaces; matches primary.

## Typography

- Exposure (custom): Display serif for headlines. Used at 48px (headline-lg), 36px (headline-md), and 28px (headline-sm) at weight 400 with tight letter-spacing. Not freely loadable by agents; substitutes with similar contrast and warmth: Fraunces (Google), Cormorant (Google), Spectral (Google).
- Geist Mono (Google): Body and small headlines. headline-xs runs 21px/1.19 with slight positive tracking; body-md runs 16px/1.5 with 0.019em letter-spacing. Use for paragraphs, labels, steps, and UI strings. Prefer weight 400 to keep the instrument-panel feel consistent.

## Layout

Spacing scale favors roomy sections and compact components: xs 6px, sm 16px, md 30px, lg 46px, xl 76px. Use xl for section separations and hero top/bottom padding; lg for major block gaps; sm for internal card padding (the card component sets 16px). Maintain a single content column with comfortable side gutters; switch to two columns for comparisons and pricing at desktop widths. Keep vertical rhythm by stacking multiples of 16/30/46.

## Elevation & Depth

Depth is quiet. Only a light sm shadow (rgba(0,0,0,0.08) 0 1px 3px) appears on featured cards; other layers are flat. Hierarchy relies on ink weight, whitespace, 1px graphite borders, and the porcelain surface. Prefer tonal separation over heavy shadows.

## Shapes

Corners are minimal and purposeful. Buttons use rounded.sm at 6px; cards use rounded.md at 8px. Secondary and link buttons are square (0px) to read as textual actions rather than primary controls. Avoid mixed radii within a single component.

## Components

Buttons and cards are the system's anchors.

- Button — Primary: 45px tall; background #1d1b1b; text #e7e7e7; radius 6px; padding 5px 9.375px 5px 15px. Use for main CTAs.
- Button — Secondary: 45px tall; text #252116; square corners; same padding; transparent background over porcelain.
- Button — Link: Text-only action in #1d1b1b; square corners.
- Card: Background #fcfcfa; text #1d1b1b; radius 8px; padding 16px; optional sm shadow.

Distinctive components on this page:

### Workflow Composer (Hero)
A floating card on surface #fcfcfa with 8px radius, sm shadow, and body-md copy in Geist Mono. Includes app pills and a right-aligned primary button at 45px height.

### "When You Ask" Comparison Panels
Two-column layout: left shows a competitor's generic reply, right shows Runner's step list in Geist Mono 16px. Headings in Exposure 28px; borders in #4b4b4b; primary CTA repeats the 45px pattern.

### Popular Workflows Grid
A list of titled workflow tiles using card styles (8px radius, 16px padding). Titles in Exposure 28px, descriptions in Geist Mono 16px; subtle use of #a35c44 for small cues.

### Integrations Grid
Compact app tiles presented on porcelain cards. Use 8px radius and 16px internal padding; labels in Geist Mono 16px, ink text #1d1b1b.

### Mobile Thread Preview
Phone-sized panel demonstrating a daily briefing. Body-md throughout, minimal borders in #4b4b4b; primary actions mirror the 45px dark button.

### Security & Compliance Badges
Row of small blocks with SOC/GDPR/CASA statuses. Use Geist Mono body-md for labels; borders in #4b4b4b and porcelain fill.

### Pricing Tiers
Four to five cards using the card component (8px radius; 16px padding). Plan names in Exposure 36px; prices in Geist Mono 16px; CTAs are 45px dark buttons.

## Do's and Don'ts

- Do set paragraphs and UI labels in Geist Mono 16px/1.5; don't switch to proportional sans for body copy on this site.
- Do reserve Exposure for headlines at 28–48px; don't use it for long paragraphs or small labels.
- Do keep CTAs at 45px height with 6px radius and #1d1b1b backgrounds; don't recolor primary buttons.
- Do use #a35c44 sparingly for small highlights; don't use it for body text or large backgrounds.
- Do separate blocks with xl (76px) or lg (46px) vertical space; don't stack dense components without breathing room.
- Do rely on thin borders and the sm shadow only; don't add heavy glows or multi-layer shadows.

## Agent Prompt Guide

Quick color reference — Text: #1d1b1b; Background: #fcfcfa; Border: #4b4b4b; Accent: #a35c44.

1) Build the hero
- Canvas #fcfcfa. Center a two-line H1 in Exposure, 48px, weight 400, line-height 1, letter-spacing -0.044em, color #1d1b1b. Below it, a subhead in Exposure 36px/1.04. Primary CTA: 45px height, background #1d1b1b, text #e7e7e7, radius 6px, padding 5px 9.375px 5px 15px. Section padding top/bottom: 76px.

2) Create the "You talk, Runner runs" features
- Three columns on desktop. Each card uses background #fcfcfa, radius 8px, padding 16px. Headings in Exposure 28px; body in Geist Mono 16px/1.5, color #1d1b1b. Use #a35c44 for small numerals or icons. Column gap: 30px; section gap: 46px.

3) Build a comparison panel
- Two columns. Left: label in Geist Mono 16px, color #4b4b4b. Right: steps as a vertical list in Geist Mono 16px/1.5, color #1d1b1b. Wrap each column in a card (8px radius, 16px padding) with a 1px border in #4b4b4b. Add a 45px primary CTA beneath.

4) Integrations grid
- 4–6 columns of tiles. Each tile: card with 8px radius, 16px padding, border #4b4b4b. App name in Geist Mono 16px, color #1d1b1b. Grid gap 16px.

5) Pricing
- Four plan cards using card styles. Plan name in Exposure 36px, price and copy in Geist Mono 16px. Primary action per card uses the 45px dark button. Section spacing: 76px above, 76px below.

## Similar Brands

- Notion — Similar monochrome restraint and roomy spacing; Runner diverges with display-serif headlines and a warmer accent.
- Zapier — Shares the integrations/workflow framing; Runner is quieter in color and leans on monospace typography.
- Linear — Equally disciplined and type-forward; Runner is lighter, with porcelain backgrounds and serif headings.
- Superhuman — Minimal palette and speed-first messaging; Runner's comparison panels and monospace body give it a more tool-like narrative.

More like this

Browse AI →
lev8.com
Lev8 AI
Lev8
Turn the live web into people and business intelligence.
Homepage · 5 hours ago
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 6 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 18 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 19 hours ago