Screen Studio — cinematic dark Mac recorder landing

---
version: alpha
name: Screen Studio — cinematic dark Mac recorder landing
colors:
  surface: '#000000'
  ink: '#f5f5f7'
  accent: '#4d2ff5'
  muted: '#86868b'
typography:
  display:
    fontFamily: BlinkMacSystemFont
    fontSize: 72px
    fontWeight: 600
    lineHeight: 76.0032px
  interface:
    fontFamily: BlinkMacSystemFont
    fontSize: 12px
    fontWeight: 400
    lineHeight: 15.9996px
components:
  surface:
    backgroundColor: '{colors.surface}'
  accent:
    backgroundColor: '{colors.accent}'
  heading:
    typography: '{typography.display}'
    textColor: '{colors.ink}'
  interface-copy:
    typography: '{typography.interface}'
    textColor: '{colors.ink}'
  muted-copy:
    textColor: '{colors.muted}'
---

## Overview

A black, violet-accented Mac software landing page with a centered download hero, large screen-recording demonstrations, alternating feature bands, privacy cards, social proof, pricing and FAQ.

Source: https://screen.studio/. Captured 2026-10-11T06:35:47.816861+00:00. This is an observational design reference, not an official brand specification.

## Colors

surface: #000000; ink: #f5f5f7; accent: #4d2ff5; muted: #86868b. Tokens describe observed interface surfaces and text, not every pixel in artwork. Translucent values retain source alpha; perceived colors vary with their backing surface.

## Typography

Primary sample: “Beautiful screen recordings, in minutes.” uses BlinkMacSystemFont, -apple-system, "SF Pro Display", "SF Pro", Inter, "Inter Fallback", sans-serif, 72px/76.0032px, weight 600, tracking normal. The corresponding mobile heading is 40px/44px.

The interface token samples “Screen Studio” at 12px/15.9996px, weight 400, using BlinkMacSystemFont, -apple-system, "SF Pro Display", "SF Pro", Inter, "Inter Fallback", sans-serif. These are measured local samples, not an inferred complete site-wide type scale.

## Layout

Lead with a compact navigation and centered app icon, release badge, oversized headline and violet download action. Use broad product media to demonstrate editing, framing, cursor movement and export. Alternate black and charcoal feature bands; finish with a privacy comparison, testimonial grid, two pricing cards and compact FAQ. Preserve generous vertical breathing room rather than fitting every section into a dense dashboard.

The native desktop screenshot is 1440 × 24196px, prepared at a 1440px viewport. Mobile evidence was gathered at a 390 × 844px viewport.

At 390px, the desktop navigation becomes a compact hamburger header. The hero wraps into several centered lines, descriptive copy narrows, and the download action remains prominent above a scaled product visual. Only the opening mobile viewport was visually audited; do not infer all lower-page breakpoints from it.

## Elevation & Depth

Low-contrast charcoal panels and soft radial violet illumination give the app imagery depth. The colorful recording UI supplies detail while surrounding marketing sections remain dark and quiet.

## Shapes

Use a rounded release badge, modestly rounded purple actions, large rounded media frames and restrained separators. Avoid replacing all shapes with equally sized pills.

## Components

This is a static capture. Source video demonstrations and marquees are not evidence of a tested editing workflow. Downloads, account entry, checkout and FAQ expansion were not activated in this reference. Reduced-motion preference was requested for this capture; no motion timing is claimed. The desktop reference combines native full-page screenshots at measured section boundaries: each source section was scrolled into view to load its intersection-triggered media, then cropped from a fresh full-page shot after a warm-up. It is a documented multi-state static composite, not a single instantaneous animation frame. No source CSS, DOM or text was modified.

## Do's and Don'ts

Do keep readable product media and a clear download hierarchy. Do not invent customer outcomes or treat source quotations as independent verification. Do not reproduce an animation by guessing its easing. General accessibility recommendations are adaptation guidance, not claims of a completed keyboard or contrast audit.