# usetalkify.app

Source: https://usetalkify.app/
Captured: 2026-09-13
Tags: saas, landing, dark, both, editorial, minimal, dark-techno, premium, confident, calm, technical, elegant
Colors: #080d14, #0545c1, #032480, #07194d, #3d69ca, #ab6943, #7473ad, #aa7b7b
Type (h1): ui-serif · 118px/115.64px · 700 · tracking -4.13px — "Speak. It's written."
Type (h2): ui-serif · 64px/66.56px · 700 · tracking -1.92px — "Powered by Apple's new SpeechAnalyzer."
Type (h3): -apple-system · 21px/normal · 650 · tracking -0.315px — "It answers as you speak"
Type (body): -apple-system · 21px/31.5px · 400 — "Fast, private voice dictation for macOS, right from the notch. Free and open sou"
Type (small): -apple-system · 12.5px/20px · 400 — "The full name is what makes it one command: it adds the tap and trusts this one "
Type (button): -apple-system · 12.5px/12.5px · 600 · tracking 0.125px — "Glow · Sunset"
Button (primary): "Glow · Sunset" — fill #ff9650, text #f5f5f7, radius 999px, border 1px, padding 7px 14px, height 29px, type 12.5px/600
Button (secondary): "Download for macOS" — text #1a1006, radius 999px, border 0px, padding 15px 30px, height 50px, type 16px/600
Radii: 999px (23), 12px (5), 28px (5), 5px (5)

## Images

- Hero (desktop): https://media.lvly.design/library/usetalkify-app/hero.webp?v=d660e6c0
- Page crop (mid-1): https://media.lvly.design/library/usetalkify-app/mid-1.webp?v=688746fb
- Page crop (mid-2): https://media.lvly.design/library/usetalkify-app/mid-2.webp?v=2d55ab10
- Hero (mobile): https://media.lvly.design/library/usetalkify-app/mobile-hero.webp?v=6517f8d9
- Full page (desktop): https://media.lvly.design/library/usetalkify-app/full.jpg?v=c90ed529
- Full page (mobile): https://media.lvly.design/library/usetalkify-app/mobile-full.jpg?v=f50d5537
- Clip preview (mp4): https://media.lvly.design/library/usetalkify-app/video-kxkg0m.preview.mp4?v=a780e6d2

Talkify's landing page is a macOS desktop cosplaying as a website: the hero is a full-bleed macOS 26 wallpaper — a sunset alpenglow over blue mountains, a real menu bar reading "Notes · File · Edit" at the top — with the app's own notch HUD glowing amber at the top edge, six pill chips beneath it switching the HUD's visual theme (Glow · Sunset, Aurora, Spectrum, Ocean, Compact, Siri Wave). The headline "Speak. It's written." is set in the system serif (New York) at 118px/700 with -4px tracking, white on the photograph, followed by 21px SF Pro body copy and a two-button row: a solid orange pill "Download for macOS" and a translucent dark pill "View on GitHub · 548". Below the fold the page drops to near-black (#060608) and turns into a benchmark report — large rounded cards (28px radius) with a serif section title ("Dictation speed"), side-by-side latency screenshots of Talkify vs Wispr Flow, and horizontal bar charts in a warm orange gradient with tabular millisecond figures. The whole thing reads like an Apple keynote page written by an indie developer: native-feeling, quietly premium, and confident enough to publish head-to-head numbers.

## Steal-worthy details

- The hero literally *is* the product's environment: a macOS wallpaper plus a real menu bar, so a notch utility is shown where it lives rather than in a floating mockup.
- Theme chips above the fold change the HUD's glow live — an interactive product demo disguised as a segmented control, and the chips use a small coloured dot as a swatch for each theme.
- System font stacks as the brand: `ui-serif` (New York) for display, `-apple-system` for body — zero web fonts, and the page still feels intentional because the sizes and tracking (-4.13px at 118px) are so specific.
- A hero copy pattern of "one verb, one result": "Speak. / It's written." with the period as rhythm, two lines, and a one-sentence subhead that names the platform, the privacy angle and the license.
- The GitHub button doubles as social proof: "View on GitHub | 548" with a hairline vertical divider separating label from star count, echoed in the sticky nav's "⭐ Star | 548".
- A sticky floating pill nav with ten text links and two pill buttons (ghost "Star" + solid orange "Get Talkify") sits on a translucent dark capsule — the round-13 style nav-in-a-pill done at 999px radius.
- Benchmark section shows the *evidence* as well as the number: two app screenshots of the latency bench (128 ms vs 619 ms) sit under the two big figures, so the claim is visibly reproducible.
- Bar charts with a warm orange gradient fill and a muted "1.8×", "2.6×" multiplier next to each ms figure — the comparison is told in one glance without a legend.
- Consistent radius vocabulary from facts: 999px pills for everything clickable, 28px for large cards, 12px for inset screenshots.
- "Free & open source · macOS 26 · Apple Silicon · 100% on-device" — a spec ribbon of four facts joined by middle dots under the CTA row, in small muted text.

## Style recipe

Build a dark, Apple-native product page. Ground: #060608 near-black; large containers are #0d0d10-ish cards with a 1px hairline border at ~8% white and a 28px radius; inset screenshots use 12px. Hero sits on a full-bleed photograph (a wide landscape with a warm horizon and a cool blue sky) and text is pure white with no scrim — pick imagery dark enough at the headline's position. Type: display in the system serif stack `ui-serif, "New York", "Iowan Old Style", Palatino, Georgia, serif` at 96–120px, weight 700, tracking around -3.5% (-4px at 118px), line-height 0.98; body in `-apple-system, "SF Pro Display", "Helvetica Neue", sans-serif` at 21px/1.5 for lead copy and 15–17px for card text; section titles in the serif at ~36px/600. Accent is a warm orange — a #ab6943–#f0883e gradient for bars and a saturated orange (#f28c38-ish) solid for the primary pill; secondary pills are translucent black (rgba(0,0,0,.4)) with a 1px white/15% border and backdrop-blur; a light pill (#f5f5f7 text on dark, 13.5px/600, 8px 15px padding, 34px tall) for the ghost/Star action. Every clickable is a 999px pill. Navigation is a floating capsule with text links at 14px, a ghost button and one solid accent button. Use small coloured dots (8px) as swatches inside chips when chips represent themes or colors. Data is shown as horizontal gradient bars with tabular-nums figures on the right and a muted gray multiplier; put the raw evidence (a screenshot) directly under any headline number. Copy voice: short declaratives, a period after each clause, one line of specs joined by "·" under the CTAs. Motion: keep it to a soft glow around the product element and a hover brighten on pills; no parallax.