CURATED · OPEN · FREE

Screen Studio

A minimalist, dark-themed product landing page for a professional macOS screen recording tool.

productmac

Screen Studio screenshot

↓ Download design system (17 MB)Open in OpenDesign

Visit: https://screen.studio

📦 Browse pack contents →

01

Identity DNA

Screen RecordingMacOSVideoProductivityDesign

A polished, modern macOS utility that turns complex video editing into a simple, automated process.

02

Color

#4D2FF5Accent

#FFFFFFInk

#8C8C8CInk soft

#13151BBG

#1B1E26BG soft

#A091FAMuted

rgba(255,255,255,0.1)Line

High-contrast dark UI with a single vibrant purple accent to guide the user's eye.

03

Typography

humanist-sans · monospace

display70px · 450
h236px · 600
body16px · 400
small13px · 400

Headlines use a tight negative letter-spacing for a dense, modern feel. · Body text maintains a comfortable line height for readability against the dark background.

04

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous vertical spacing between sections to emphasize the product visuals.

05

Surfaces

sm · 6px

md · 10px

lg · 100px

pill · 1000px

1px solid rgba(255,255,255,0.1)

rgba(0, 0, 0, 0.4) 0px 0px 20px 10px

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Single-column centered layout that transitions to a multi-column grid for feature cards.

07

Motion & Interaction

200msmicro

250mssmall

500msmedium

cubic-bezier(0.44, 0.22, 0.26, 0.99)easing

Smooth, eased transitions for hover states and interactions.

Subtle background color changes or slight lifts. · Immediate feedback with no significant animation.

08

Components

button Primary buttons are solid purple with white text and pill-shaped; secondary buttons are transparent with subtle borders.
card Dark gray cards with subtle borders, containing an image and descriptive text.
chip A thin, rounded pill-shaped badge with a subtle border and white text.
input Standard text inputs with dark backgrounds and subtle borders.
hero A large, centered headline with a prominent badge and a large visual asset below it.

09

Voice & Don'ts

Tone Professional, helpful, and confident.
Headlines Short, impactful phrases that highlight the main benefit.
CTAs Direct and action-oriented (e.g., 'Download Screen Studio').

Don't use a busy or cluttered background — screenshot shows a clean, dark theme with a subtle radial gradient.
Don't use neon or overly bright colors — screenshot shows a muted purple accent and white text.
Don't use serif fonts — screenshot shows a modern sans-serif typeface.
Don't use sharp, square corners — screenshot shows rounded corners on buttons, cards, and badges.
Don't use small, cramped text — screenshot shows generous spacing and clear hierarchy.
Don't use complex, multi-step navigation — screenshot shows a simple, flat top navigation bar.
Avoid: Overly technical jargon
Avoid: Aggressive marketing language
Avoid: Dense walls of text

10

Inside the pack — real screenshots

Screen Studio — 桌面首屏（hero） — 桌面首屏（hero）

Screen Studio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Screen Studio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Screen Studio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Screen Studio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Screen Studio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Screen Studio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Screen Studio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Screen Studio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Screen Studio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Screen Studio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Screen Studio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Screen Studio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Screen Studio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Screen Studio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Screen Studio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Screen Studio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Screen Studio — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

This is a minimalist, dark-themed product landing page for Screen Studio, a macOS screen recording tool. The design uses a high-contrast palette with a deep charcoal background (#13151B) and a vibrant purple accent (#4D2FF5). The typography is a clean, modern humanist-sans-serif with tight letter-spacing for headlines. Key features include a large, centered hero section with a product badge, followed by feature cards with dark backgrounds. Critical rules: do not use multiple accent colors, do not use serif fonts, and do not clutter the layout with unnecessary elements.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko