Screen Studio — two-card subscription pricing section

---
version: alpha
name: Screen Studio — two-card subscription pricing section
colors:
  surface: '#111112'
  ink: '#f5f5f7'
  accent: '#4d2ff5'
  muted: '#86868b'
  card: '#1d1d1f'
typography:
  display:
    fontFamily: BlinkMacSystemFont
    fontSize: 56px
    fontWeight: 600
    lineHeight: 59.9984px
  interface:
    fontFamily: BlinkMacSystemFont
    fontSize: 19px
    fontWeight: 500
    lineHeight: 27.0009px
components:
  surface:
    backgroundColor: '{colors.surface}'
  accent:
    backgroundColor: '{colors.accent}'
  card:
    backgroundColor: '{colors.card}'
  heading:
    typography: '{typography.display}'
    textColor: '{colors.ink}'
  interface-copy:
    typography: '{typography.interface}'
    textColor: '{colors.ink}'
  muted-copy:
    textColor: '{colors.muted}'
---

## Overview

An isolated charcoal pricing section with equal-feature yearly and monthly cards, a violet annual offer, aligned feature lists and a small education-discount note.

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

## Colors

surface: #111112; ink: #f5f5f7; accent: #4d2ff5; muted: #86868b; card: #1d1d1f. 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: “Everything included.” uses BlinkMacSystemFont, -apple-system, "SF Pro Display", "SF Pro", Inter, "Inter Fallback", sans-serif, 56px/59.9984px, weight 600, tracking normal. The corresponding mobile heading is 32px/36px.

The interface token samples “Every Screen Studio feature is available in every plan.” at 19px/27.0009px, 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

Center a short eyebrow, headline and explanation above two equal-width cards. Align plan labels, large prices, a divider, matching feature lists and bottom actions. The yearly option uses violet emphasis while the monthly action stays dark. Keep the education link below the pair, not as a third plan.

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

At 390px, Yearly precedes Monthly in a single column. The headline reduces from 56px to 32px, and section vertical padding drops from 144px to 112px. Feature lists and actions stay inside each rounded card.

## Elevation & Depth

Cards use a slightly lighter charcoal than the full-width section, with almost no dramatic shadow. Color and surface contrast, not scale inflation, distinguish the promoted option.

## Shapes

Large card radii, small button radii, fine separators and compact violet checks provide the visual vocabulary.

## Components

Both offers are shown in their initial source state. Get started and discount links were not submitted; plan values are a dated screenshot, not a promise of current pricing. This is an in-page section, not a full pricing page.

## Do's and Don'ts

Do align corresponding feature rows and keep billing labels adjacent to prices. Do not exaggerate savings, omit billing context or convert this section into a pricing_page record. General accessibility recommendations are adaptation guidance, not claims of a completed keyboard or contrast audit.