usetalkify.app

Talkify - Speak and it's writtensaved 26d ago · captured 26d ago

Ten details, nine pinned.

View as Markdown ↗

Colors8 colors · ground #080D14

ground#080d14·35.36%#0545c1·18.76%#032480·12.67%#07194d·7.15%#3d69ca·7.05%accent#ab6943·3.55%#7473ad·3.14%#aa7b7b·2.17%

Sized by coverage · click to copy.

Typography2 families · 5 styles · ui-serif, -apple-system

Speak. It's written.

ui-serif · 118/116 · 700 · -4.13px

ui-serif · 64/67 · 700 · -1.92px

It answers as you speak

-apple-system · 21/normal · 650 · -0.315px

Body

Fast, private voice dictation for macOS, right from the notch. Free and open sou

-apple-system · 21/32 · 400 · normal

Small

The full name is what makes it one command: it adds the tap and trusts this one

-apple-system · 13/20 · 400 · normal

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsGlow · Sunset2 styles

Glow · SunsetDownload for macOS

primary · fill #ff9650 · label #f5f5f7 · radius 999px · border 1px · padding 7px 14px · height 29px · type 12.5px / 600

secondary · fill — · label #1a1006 · radius 999px · border 0px · padding 15px 30px · height 50px · type 16px / 600

Shape4 radii · 38 uses

999px23 uses · 61%

12px5 uses · 13%

28px5 uses · 13%

5px5 uses · 13%

AnalysisTalkify'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…

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.

Style recipeBuild a dark, Apple-native product page.

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.

Details10 worth noting

usetalkify.app — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1Wallpaper and menu bar as hero
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.
2Live theme chips as segmented control
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.
3System fonts as the brand
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.
4Two-line verb-then-result headline
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.
5Star count inside the GitHub button
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".
6Floating pill nav capsule
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.
7Screenshots as benchmark evidence
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.
8Gradient bar charts with multipliers
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.
9Three-step radius vocabulary
Consistent radius vocabulary from facts: 999px pills for everything clickable, 28px for large cards, 12px for inset screenshots.
10Spec ribbon under the CTAs
"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.

saas · landing · dark · editorial, minimal, dark-techno · premium, confident, calm, technical, elegant

usetalkify.app

More like this