# hilium.app

Source: https://hilium.app/
Captured: 2026-09-13
Tags: saas, landing, dark, both, minimal, bento, technical, premium, calm, confident, cold
Colors: #080808, #292b2b, #4f4f4f, #919191, #6e6e6e, #eeeeee, #adadad, #d0d0d0
Type (h1): -apple-system · 48px/57.6px · 700 · tracking -0.96px — "Turn your iPhone into a Mac trackpad"
Type (h2): -apple-system · 32px/44.8px · 600 — "Frequently asked questions"
Type (h3): -apple-system · 22px/30.8px · 600 — "Cursor"
Type (body): -apple-system · 20px/28px · 500 — "Control your Mac wirelessly with smooth gestures using your iPhone"
Type (small): -apple-system · 10.8693px/13.0432px · 700 — "CONNECTED"
Type (button): -apple-system · 17px/27.2px · 400 — "Download for iOS"
Button (primary): "Download for iOS" — fill #e6e6e6, text #080808, radius 999px, border 1px, padding 0px 18px, height 48px, type 17px/400
Button (secondary): "Download for Mac" — text #ffffff, radius 999px, border 1px, padding 0px 18px, height 48px, type 17px/400
Button (tertiary): "Features" — text #e6e6e6, radius 50px, border 0px, padding 6px 12px, height 39px, type 17px/500
Radii: 999px (11), 50px (4), 8px (2), 28.1462px (2), 30px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/hilium-app/hero.webp?v=87bfa302
- Page crop (mid-1): https://media.lvly.design/library/hilium-app/mid-1.webp?v=858b185e
- Page crop (mid-2): https://media.lvly.design/library/hilium-app/mid-2.webp?v=ac860456
- Hero (mobile): https://media.lvly.design/library/hilium-app/mobile-hero.webp?v=78680d7a
- Full page (desktop): https://media.lvly.design/library/hilium-app/full.jpg?v=451a1c0f
- Full page (mobile): https://media.lvly.design/library/hilium-app/mobile-full.jpg?v=92cb216f
- Clip preview (mp4): https://media.lvly.design/library/hilium-app/video-evmag5.preview.mp4?v=d1f65a08

Hilium sells an iPhone-as-Mac-trackpad app with a page that borrows Apple's own product-page grammar and strips it further back: a near-black `#080808` ground (95% of the pixels), SF Pro throughout, a centered 48px/700 headline tracked to −0.96px, and a white pill CTA paired with a ghost twin. Color barely exists — the palette is eight grays from `#080808` to `#eeeeee` — so the only chroma on the page is inside the product itself: the green-to-blue volume slider in the floating iPhone mockup, a green "connected" dot, a yellow status pip. Below the hero the layout tightens into a hairline-divided two-column grid where each cell is icon → title → muted sentence → phone mock, and a row of small pill toggles (Cursor, Click, Right-Click, Swipe…) doubles as the feature nav. The navigation itself is a floating frosted pill that condenses on scroll. It reads as a serious hardware-adjacent utility, not a startup — quiet, exact, and confident enough to let one glowing slider carry all the color.

## Steal-worthy details

- Monochrome page, chromatic product: every hue is confined to the UI inside the phone mockups, so the product looks alive against a page that is deliberately inert.
- Two-button hero with a hierarchy done by fill alone — solid `#e6e6e6` pill for iOS, same pill with a 1px hairline and dark fill for Mac. No color, no size change.
- Hero device is cropped at the viewport bottom so its dot-grid trackpad surface bleeds off the fold and pulls the eye down.
- Gesture chips (Cursor · Click · Right-Click · Swipe · Scroll · Mission Control…) as 999px-radius outlined pills with a 14px icon each; the active one flips to a solid white fill — a tab bar that reads as a feature list.
- Feature grid divided by single 1px hairlines in `#292b2b`, no card backgrounds — cells are separated, never boxed.
- Each feature cell follows one rhythm: 24px line icon, 20px/600 title, 17px muted-gray (`#919191`) body, then a phone mock cropped mid-screen so the relevant UI sits at the bottom edge.
- Nav condenses into a floating frosted pill (brand glyph + four links) on scroll, keeping the same 999px radius language as the buttons.
- The brand mark is a six-armed asterisk/spark that reappears as the "Click" chip icon — the logo is literally a gesture.

## Style recipe

Build on a near-black ground, `#080808`, never pure black, with all surface separation done by 1px hairlines in `#292b2b` — no card fills, no shadows, no gradients on the page. Use the system sans (SF Pro / -apple-system, Inter fallback): display 48px weight 700, letter-spacing −0.02em, line-height 1.2, centered; section titles 20–22px weight 600; body 17–20px weight 500 in `#919191`, primary text `#eeeeee`. Keep the palette to grays between `#080808` and `#eeeeee`; any color must live inside product imagery or a status indicator (a green dot, one accent slider), never in chrome. Buttons and chips are pills, radius 999px, height 48px (buttons) / 36px (chips), 18px horizontal padding, 17px weight 400 label with a 14–16px leading icon; primary = solid `#e6e6e6` with `#080808` text, secondary = transparent with a 1px `#4f4f4f` border. Compose content in a centered column (~960px) for hero copy and a hairline-divided two-column grid for features, each cell: icon → title → one muted sentence → an image cropped by the cell's bottom edge. Nav is a floating pill with a translucent dark fill and backdrop blur. Motion is restrained: fade-and-rise entrances, no parallax. Everything should feel like an Apple product page with the marketing removed.