# How monocle.heyiam.dk is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/monocle.heyiam.dk-design)

Last updated: 2026-08-10

## Captured pages

[![Dark page section with handwritten script '...just wiggle your mouse' and pricing details for a macOS focus app](https://pin.fontofweb.com/5623?format=jpg)](https://design.withfudge.com/share/pin-5623)

[Dark page section with handwritten script '...just wiggle your mouse' and pricing details for a macOS focus app](https://design.withfudge.com/share/pin-5623)

[![Hero section with gradient app icon, handwritten 'monocle' logotype, pill download button, and floating navigation bar](https://pin.fontofweb.com/5622?format=jpg)](https://design.withfudge.com/share/pin-5622)

[Hero section with gradient app icon, handwritten 'monocle' logotype, pill download button, and floating navigation bar](https://design.withfudge.com/share/pin-5622)

## Overview

Monocle presents itself as a noise-cancelling utility for macOS, and its landing page communicates that purpose through radical visual restraint. The entire experience unfolds on a near-black canvas where content floats with generous breathing room. Two typefaces divide the labor: Inter handles all functional communication in clean, neutral strokes, while Pecita—a flowing handwritten script—delivers the emotional payload and brand identity. This pairing creates a distinctive tension between utility and personality, between the machine and the human. The page avoids conventional marketing density; instead, it offers sparse, centered compositions that let the handwritten messages land with deliberate impact. A single warm-to-cool gradient appears only in the app icon, making that chromatic moment feel earned rather than decorative. The overall impression is of a tool that respects attention rather than demanding it.

## Colors

The color system is intentionally austere, built on a dark-mode foundation with minimal chromatic intervention.

| token | value | use |
|---|---|---|
| canvas | `#080808` | Primary page background; deep black with subtle warmth |
| surface | `#1a1a1a` | Elevated navigation bar and card backgrounds |
| ink | `#ffffff` | Primary text, handwritten headlines, and icon marks |
| muted-ink | `#a0a0a0` | Secondary body text, pricing details, and supporting information |
| action | `#e5e5e5` | Primary button fill; near-white for maximum contrast against canvas |
| accent-gradient-start | `#ff6b6b` | App icon gradient origin; warm coral |
| accent-gradient-end | `#8b5cf6` | App icon gradient terminus; cool violet |

The interface operates in a single dark mode. The canvas color establishes an immersive, low-luminance environment that lets the white ink and handwritten elements read with exceptional clarity. The muted-ink token creates a clear hierarchy for secondary information without introducing additional hue. The action color is deliberately close to white, ensuring that the download button feels immediate and pressable. The gradient accent is sequestered to the app icon alone, where it serves as the sole chromatic event on the page—drawing the eye to the product identity without bleeding into the surrounding interface. No light mode variant is visible in the supplied material.

## Typography

The typographic system relies on a strict functional division between two families. Inter, designed by Rasmus Andersson and available from Rsms, handles all interface text with neutral clarity. Pecita, a handwritten script with no attributed designer or vendor in the available records, carries brand expression and emotional emphasis.

| token | family | size | weight | leading | tracking | use |
|---|---|---:|---:|---:|---:|---|
| hero-display | Pecita | 4rem | 400 | 1.2 | 0em | Primary brand logotype and large emotional statements |
| section-display | Pecita | 2.5rem | 400 | 1.3 | 0em | Mid-page handwritten headlines and callouts |
| body | Inter | 1.25rem | 400 | 1.5 | -0.01em | Primary descriptive paragraphs |
| body-small | Inter | 1rem | 400 | 1.5 | 0em | Secondary descriptions and pricing context |
| label | Inter | 0.875rem | 400 | 1.4 | 0em | Navigation items, button text, and metadata |
| caption | Inter | 0.75rem | 400 | 1.4 | 0.01em | Fine print, version requirements, and legal notes |

Pecita appears at large sizes only, never below 2.5rem, preserving its legibility and expressive impact. The script's natural irregularities are treated as a feature, not a bug—its slightly uneven baseline and variable stroke weight contribute to the human, unpolished voice. Inter compensates with consistent metrics and subtle negative letter spacing at body scale, creating tight, confident lines that don't compete with the script. The weight range is limited to Regular (400) throughout; no bold or medium weights are employed in the visible system. Verify licensing for these families before production use.

## Layout

The page employs a centered, single-column composition with extreme vertical spaciousness. Content blocks are separated by substantial negative space, often exceeding several viewport heights, which forces sequential reading and prevents scanning. The maximum content width is approximately 42rem, keeping line lengths comfortable for the body scale and maintaining focus on the centered elements.

The navigation bar floats at the top of the viewport as a compact, pill-shaped container. It spans roughly two-thirds of the viewport width on desktop, with the brand mark at the left, text links centered, and the primary action at the right. This bar uses the surface color with rounded corners, creating a subtle elevation effect without shadow.

Hero sections center all elements vertically and horizontally. The app icon sits above the logotype, which sits above the tagline, which sits above the action button—each separated by consistent but generous margins. The hierarchy is strictly vertical; no side-by-side arrangements appear in the primary content areas.

Lower sections continue this centered rhythm. Text blocks align to the same central axis, with handwritten statements receiving even more surrounding space than Inter text. Pricing information clusters tightly in the lower left of one section, breaking the absolute centering but maintaining left alignment within the overall content column. The author attribution appears as a floating pill near the bottom, centered horizontally.

## Visual language

The visual language is defined by contrast and restraint: maximum darkness against maximum lightness, mechanical regularity against organic irregularity, silence against occasional voice. The near-black canvas is not merely a background but an active design element—it creates the conditions for focus that the product promises.

The handwritten script functions as the brand's visual signature. It appears in white against black, never colored, never outlined. Its scale varies dramatically: the logotype commands the hero, while mid-page statements feel like whispered asides. The script's casual, slightly childlike quality softens the technical premise of a productivity utility.

The app icon introduces the only color beyond grayscale. Its rounded-square shape with smooth gradient fill from coral to violet reads as friendly and contemporary. The icon's internal mark—a simple wavy line suggesting a face or horizon—echoes the script's organic quality while remaining geometrically contained.

Imagery is absent from the page itself; product demonstration appears only in a partial screenshot at the bottom edge, showing the app in context within a browser chrome. This keeps the landing page clean while hinting at real-world utility.

## Components

### Navigation bar

- **Anatomy**: Brand mark (wavy line icon), three text links, primary action button with Apple icon
- **Surface**: Background color `{colors.surface}` with full pill rounding
- **Typography**: Links use `{typography.label}` in `{colors.ink}`; button uses same label style
- **Shape**: `border-radius: {rounded.pill}`; height approximately 2.5rem
- **Spacing**: Internal horizontal padding of 1rem; items spaced with gap of approximately 1.5rem
- **Composition**: Flex row with space-between alignment; brand left, links center, action right

### Primary action button

- **Anatomy**: Apple logo icon followed by text label
- **Surface**: Background `{colors.action}`; text `{colors.canvas}`
- **Typography**: `{typography.label}` with weight 400
- **Shape**: Full pill rounding with generous horizontal padding
- **Spacing**: Padding approximately 0.75rem vertical, 1.5rem horizontal
- **Variants**: Two visible instances—one in navigation bar (compact), one in hero (standard)

### App icon

- **Anatomy**: Rounded square with gradient fill and internal wavy line mark
- **Surface**: Linear gradient from `{colors.accent-gradient-start}` to `{colors.accent-gradient-end}`
- **Shape**: `border-radius: 1.5rem`; size approximately 5rem square
- **Composition**: Centered in hero, above logotype

### Handwritten headline

- **Anatomy**: Single line or short phrase in Pecita script
- **Surface**: Text color `{colors.ink}` on `{colors.canvas}` background
- **Typography**: `{typography.hero-display}` or `{typography.section-display}` depending on position
- **Spacing**: Generous margins above and below; often 3-4rem separation from adjacent content

### Pricing cluster

- **Anatomy**: Link with external arrow, label, and price line
- **Surface**: Text only, no containing box
- **Typography**: Link uses `{typography.label}` with underline; details use `{typography.body-small}` in `{colors.muted-ink}`
- **Composition**: Left-aligned within content column; stacked vertically with tight line spacing

### Author attribution

- **Anatomy**: Circular avatar image, text label, external link arrow
- **Surface**: Background `{colors.surface}` with pill rounding
- **Typography**: `{typography.caption}` in `{colors.muted-ink}`
- **Shape**: Full pill with avatar at left
- **Spacing**: Compact internal padding; floats near page bottom

## Responsive behavior

The supplied images show only desktop presentation. Based on the centered, single-column structure, several adaptive strategies are recommended. The content column should maintain its maximum width constraint while gaining horizontal padding on narrower viewports—suggesting 1.5rem minimum side margins. The navigation bar may need to collapse to a simplified mark-plus-action arrangement on smaller screens, with text links moving to a menu or disappearing entirely. Handwritten headlines should scale down proportionally; the 4rem hero display might reduce to 2.5rem on mobile to prevent overflow. The extreme vertical spacing between sections should compress modestly, perhaps to 60% of desktop values, while preserving the sense of breathing room. The pricing cluster, currently left-aligned, should likely remain left-aligned rather than centering, as its compact stack reads naturally from the margin.

## Practical implementation guidance

### Preserve
- The absolute darkness of the canvas; any lightening will destroy the immersive quality
- The two-typeface system; do not substitute another script for Pecita or another sans-serif for Inter
- The generous vertical spacing; this is the primary luxury signal of the design
- The single gradient accent confined to the app icon
- The centered, single-column reading experience

### Avoid
- Adding color to text or backgrounds beyond the defined tokens
- Using Pecita at small sizes or for body text
- Introducing shadows or borders that would break the flat, dark continuity
- Crowding the navigation bar with additional items
- Side-by-side layouts that would compete with the vertical rhythm

### Recommended build order
1. Establish the canvas color and Inter body typography as the foundation
2. Implement the centered content column with maximum width constraint
3. Add the floating navigation bar with pill shape and surface color
4. Build the hero section with gradient icon, Pecita logotype, and primary action
5. Create the handwritten headline component for mid-page statements
6. Add pricing and attribution clusters with proper hierarchy
7. Tune vertical spacing between sections for deliberate pacing

### Accessibility
- Ensure the `{colors.muted-ink}` text meets WCAG AA contrast against `{colors.canvas}`; if it falls short, lighten to approximately `#b0b0b0`
- Provide `prefers-reduced-motion` respect for any scroll-triggered animations
- Consider a focus indicator that uses `{colors.action}` with sufficient offset for keyboard navigation
- The handwritten script should have `aria-label` or visually hidden fallback where it carries meaning
- Maintain logical heading order despite the visual dominance of script elements

## Scope note

This guide covers the Monocle landing page hero and introductory sections as visible in desktop presentation. Mobile breakpoints, motion design, additional interior pages, and checkout or download flows are not represented in the supplied material. Measurements are practical adaptation targets derived from visual inspection.

## More website design guides

[Browse website design guides by pattern and website](/design-guides).