hyperframes.dev

HyperFrames Studiosaved 1h ago · captured 1h ago

Eight details, eight pinned.

View as Markdown ↗

Colors8 colors · ground #F6F5F1

ground#f6f5f1·52.53%#070704·14.74%#42342a·10.27%#d4d5c8·6.28%#a6b6a0·3.79%#90b859·3.43%#66584a·2.52%#241b18·2.03%

Sized by coverage · click to copy.

Typography1 family · 4 styles · Studio TT Norms

HyperFrames Studio

Studio TT Norms · 101/91 · 700 · -5.544px

Get started

Studio TT Norms · 50/48 · 700 · -2.268px

Desktop

Studio TT Norms · 24/27 · 500 · -0.7344px

Body

Built by the team who open sourced HyperFrames.

Studio TT Norms · 16/22 · 400 · normal

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

ButtonsLog in1 style

primary · fill #3ce6ac · label #0a0a0a · radius 9999px · border 0px · padding 6px 12px · height 30px · type 12px / 600

Shape5 radii · 16 uses

999px7 uses · 44%

6px4 uses · 25%

9999px3 uses · 19%

48px1 use · 6%

28px1 use · 6%

AnalysisA short, almost brochure-like download page for a desktop video editor: warm off-white paper (#f6f5f1), near-black ink (#070704), and one geometric grotesk (TT Norms) doing all the work at extreme…

A short, almost brochure-like download page for a desktop video editor: warm off-white paper (#f6f5f1), near-black ink (#070704), and one geometric grotesk (TT Norms) doing all the work at extreme size contrasts. The hero splits the product name across two weights — a 100px Bold "HyperFrames" stacked over a Light "Studio" — with the one-line positioning floated far right at ~32px Light. Below, a full-width 48px-radius documentary video carries all the color (warm browns, clay-green mascot), and the rest of the page is hairline-ruled sections: a two-column "Get started" with a ruled platform table, then oversized light-weight GitHub stats. The only chromatic UI is a small mint "Log in" pill echoing the logo mark; everything else is ink on paper.

Style recipeWarm-paper minimalism with one grotesk at extreme scale.

Warm-paper minimalism with one grotesk at extreme scale. Background #f6f5f1, ink #070704, secondary text #66584a-ish warm gray at 400, hairlines in #d4d5c8 at 1px spanning the content width between sections. Use a single geometric sans (TT Norms or similar: Neue Haas Unica, Inter Display as fallback) for everything: display at ~100px/0.9, weight 700, tracking -0.055em, and pair it with the same size in weight 300 for a second line to build hierarchy within a heading; section heads 50px/0.95 Bold, -0.045em; card titles 24px weight 400–500, -0.03em; body 16px/1.4 Regular. Large numbers go in weight 300 at display size with unit suffixes at a third of the size. Layout on a 1200px container with generous 60–80px vertical gaps; split sections asymmetrically — heading and one-line descriptor in a narrow left column, content card in a wide right column. Radii: 999px pills for every button and input, 28px for content cards (1px #d4d5c8 border, fill a hair lighter than the page, no shadow), 48px for hero media. Primary CTA is a near-black pill (#0a0a0a fill, white 600 text, ~48px tall); secondary actions are underlined text links or outline pills, never a second filled button. Keep the brand accent mint #3ce6ac to tiny surfaces — a nav pill, a logo mark — and let photography or video carry the page's color. Lists are ruled rows: label left, action right, muted gray for unavailable states. Code snippets sit in a monospace pill with a copy icon.

Details8 worth noting

hyperframes.dev — the captured page — Landing, 1440 × 900 · captured Oct 16, 2026

1Bold-over-light stacked product name
Product name set in two weights of one family — Bold for the brand word, Light for the sub-name — stacked with tight 0.9 leading and -5.5% tracking, so the hierarchy lives inside the wordmark itself
2Tagline floated opposite the title
Positioning line parked top-right at a mid size in Light weight, opposite the giant title rather than under it — the asymmetric split reads as a magazine deck, not a hero stack
3Underlined alternates under one CTA
Primary CTA is a near-black pill with the Apple glyph, and the alternate builds sit beneath as tiny underlined text links ("Other Mac: Apple Silicon · Intel") — secondary paths without a second button
4Mint accent reserved for the login pill
The single brand color appears only as a small mint (#3ce6ac) Log in pill matching the logo's mark, so the accent signals identity without coloring any content
5Big-radius video with floating disc controls
Full-bleed-width film in a 48px-radius frame with ghosted circular controls (play, fullscreen, mute) floating top-right on translucent dark discs
6Ruled platform table in a card
Downloads presented as a ruled table inside a 28px-radius card — platform left, underlined action or gray "Coming soon" right — honest about availability and scannable at a glance
7Light-weight stats with small k suffix
Social-proof stats set huge in Light weight with a small lowercase "k" suffix and tiny gray captions, divided by vertical hairlines — numbers as typography, not badges
8Monospace install pill beside CTAs
Install command shown in a monospace pill with a copy icon, sitting in a row beside an outline "Docs" pill and a black "Star on GitHub" pill

saas · landing · light · minimal, swiss · confident, calm, technical, warm

cuelume.dev2Oct 13

steel.dev2Oct 9

getartcraft.com0Oct 6

bland.com0Sep 20

cal.com0Sep 20

aurachat.io3Sep 20

hyperframes.dev

More like this