---
version: alpha
name: Screen Studio — offline-first privacy comparison
colors:
  surface: '#000000'
  ink: '#f5f5f7'
  card: '#111112'
  muted: '#86868b'
  eyebrow: '#9d8bff'
typography:
  display:
    fontFamily: BlinkMacSystemFont
    fontSize: 48px
    fontWeight: 600
    lineHeight: 51.9984px
  interface:
    fontFamily: BlinkMacSystemFont
    fontSize: 21px
    fontWeight: 500
    lineHeight: 29.001px
components:
  surface:
    backgroundColor: '{colors.surface}'
  card:
    backgroundColor: '{colors.card}'
  eyebrow:
    backgroundColor: '{colors.eyebrow}'
  heading:
    typography: '{typography.display}'
    textColor: '{colors.ink}'
  interface-copy:
    typography: '{typography.interface}'
    textColor: '{colors.ink}'
  muted-copy:
    textColor: '{colors.muted}'
---

## Overview

A black privacy section contrasting on-device processing with optional cloud actions in two charcoal cards, using icon-led headings and explanatory bullet lists.

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

## Colors

surface: #000000; ink: #f5f5f7; card: #111112; muted: #86868b; eyebrow: #9d8bff. 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: “Offline first.” uses BlinkMacSystemFont, -apple-system, "SF Pro Display", "SF Pro", Inter, "Inter Fallback", sans-serif, 48px/51.9984px, weight 600, tracking normal. The corresponding mobile heading is 28px/32.0012px.

The interface token samples “Screen Studio works offline without feeling limited. Cloud features are optional, many have an on-device alternative, an” at 21px/29.001px, weight 500, 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

Place the Privacy eyebrow and compact Offline first heading over a centered explanatory paragraph. Below it, pair On your Mac and Only when you choose cards. Give each a small line icon, heading, divider and an intentionally uneven list reflecting actual content. End with a subdued analytics note below both cards.

The native desktop screenshot is 1440 × 1135px, prepared at a 1440px viewport. It contains only `#privacy`. The measured element bounds are 1440.00 × 1133.98px at desktop and 390.00 × 1760.00px at 390px. Root padding is 144px 0px on desktop and 112px 0px on mobile.

At 390px the cards stack, with local processing first. The headline changes from 48px to 28px and explanatory copy from 21px to 17px. Body lists wrap naturally and the section grows from about 1134px to 1760px tall.

## Elevation & Depth

Use flat charcoal cards against black and bright bold lead phrases inside otherwise muted list copy. The design communicates trust through structure, not glossy security badges.

## Shapes

Rounded large panels, thin horizontal rules and small outline icons. Keep list bullets modest and align multiline explanations to their text column.

## Components

The screenshot documents source copy only. No privacy claims were independently audited, and no app settings or cloud actions were exercised.

## Do's and Don'ts

Do clearly separate local and optional online behavior. Do not invent certifications, privacy guarantees or claims of audited compliance. General accessibility recommendations are adaptation guidance, not claims of a completed keyboard or contrast audit.