# spacefs.com

Source: https://spacefs.com/
Captured: 2026-09-13
Tags: saas, landing, mixed, both, minimal, swiss, calm, confident, premium, technical
Colors: #fefefe, #abb3a3, #d1d2ce, #8d8d81, #6f726b, #574e45, #3f3725, #956c54
Type (h1): Google Sans · 68px/72.08px · 400 · tracking -1.7px — "Infinite space on any computer"
Type (h2): Google Sans · 52px/54.6px · 500 · tracking -1.3px — "Never wait for file transfers again"
Type (h3): Google Sans · 36px/40px · 500 · tracking -0.9px — "Files open instantly"
Type (body): Google Sans · 15px/24.375px · 400 — "The future of filesystems. Open and edit terabytes of files locally, while using"
Type (small): -apple-system · 9px/9px · 400 — "View"
Type (button): Google Sans · 14px/20px · 500 — "Download"
Button (primary): "Download" — fill #0a0a0a, text #ffffff, radius 9999px, border 0px, padding 0px 28px, height 48px, type 14px/500
Button (secondary): "Book a demo" — text #0a0a0a, radius 9999px, border 1px, padding 0px 28px, height 48px, type 14px/500
Button (tertiary): "Menu" — text #0a0a0a, radius 9999px, border 0px, padding 6px 12px, height 32px, type 14px/500
Radii: 8px (30), 6px (27), 9999px (17), 12px (17), 4px (14)

## Images

- Hero (desktop): https://media.lvly.design/library/spacefs-com/hero.webp?v=c34d4975
- Page crop (mid-1): https://media.lvly.design/library/spacefs-com/mid-1.webp?v=c5761356
- Page crop (mid-2): https://media.lvly.design/library/spacefs-com/mid-2.webp?v=35ee74f8
- Hero (mobile): https://media.lvly.design/library/spacefs-com/mobile-hero.webp?v=3a52ee56
- Full page (desktop): https://media.lvly.design/library/spacefs-com/full.jpg?v=40f22544
- Full page (mobile): https://media.lvly.design/library/spacefs-com/mobile-full.jpg?v=a0638daf
- Clip preview (mp4): https://media.lvly.design/library/spacefs-com/video-l7mgnw.preview.mp4?v=2cc78ea0

Space sells "infinite space on your computer" with a page that is almost entirely white and lets a fan of photographs do the talking. The hero is a two-tone Google Sans headline — "Infinite space" in near-black, "on your computer" in mid-gray, 68px at weight 400 with -1.7px tracking — set over a plain white ground, with a pill "Backed by a16z speedrun" badge above and two pill buttons below (solid black Download, hairline-outlined Book a demo). The right half is a loose, rotated cascade of rounded video frames (cityscapes, a studio, a street) that stand in for the terabytes the product streams; they carry all the color on the page, which is why the palette reads as sage, stone and tan against 78% white. Further down the page becomes a numbered feature index: monospace "01 / 02 / 03" counters in the gutter, a large regular-weight title, a short right-aligned body, and a full-width hairline between rows, before the page drops into a solid #0a0a0a band. The navigation is a floating circular logo chip and a floating pill Menu button rather than a bar. It is a quiet, editorial-Swiss take on a dev-tool landing page: the type does the structure, the media does the emotion, and nothing has a drop shadow except the photographs.

## Steal-worthy details

- Two-tone headline in a single weight: line one in #0a0a0a, line two in mid-gray — hierarchy from color, not from weight or size.
- A light-weight display face at large size (68px / 400 / -1.7px tracking, 72px line-height) — the restraint reads as premium rather than loud.
- The hero's "media fan": a stack of rotated, rounded (~12px) video frames with soft ambient shadows, spilling off the right edge so the composition feels larger than the viewport.
- Floating nav chrome instead of a bar: a circular logo button top-left, a pill "Menu" button centered, and a solid-black pill CTA that appears top-right once you scroll.
- The "backed by" pill: hairline border, 9999px radius, small gray label with the investor's wordmark inline — a credibility badge that stays quiet.
- Numbered feature index rows: a tiny monospace counter ("01") in the left gutter, a large regular-weight title, and a short body column pushed to the far right, each row separated by a 1px full-bleed rule.
- Hard cut from white to a solid #0a0a0a section with no gradient or transition — the page uses black as a second "room", not as a footer.
- Button pair grammar: primary is solid black 48px pill with 28px horizontal padding, 14px/500 white label; secondary is the same pill with a hairline border and no fill.

## Style recipe

Build on a pure white ground (#ffffff) with a single near-black ink (#0a0a0a) and one mid-gray (#6f726b) for secondary text; let photographs and video supply every other color, and keep them in warm, slightly desaturated tones (sage #abb3a3, stone #d1d2ce, tan #956c54) so they sit softly on white. Set everything in one geometric sans (Google Sans or Inter as a stand-in) at weight 400 — display at 64–72px with -1.7px tracking and ~1.06 line-height, body at 15px/1.6. Create hierarchy with color, size and position only: two-tone headlines (ink on line one, gray on line two), never bold. Use pills everywhere for interactive chrome — 9999px radius, 48px tall, 28px horizontal padding, 14px/500 labels; primary is solid ink on white text, secondary is a 1px hairline outline with no fill. Replace the nav bar with floating elements: a 52px circular logo chip, a pill Menu button, and a pill CTA that docks top-right on scroll. Compose hero media as a rotated cascade of 12px-radius cards with a soft, wide, low-opacity ambient shadow, bleeding off one edge of the viewport. Structure long content as numbered index rows: a 12px monospace counter in a narrow left gutter, a 40–48px regular-weight title, a 320px body column right-aligned, and a 1px rule (#e5e5e5) spanning the full width between rows with ~160px of vertical breathing room. Introduce dark sections as hard cuts to solid #0a0a0a with white type, no gradient. Use 6–12px radii on inner UI, 9999px on controls; no drop shadows on anything except imagery.