---
name: Screen Studio
description: "This site is a strong example of a modern, professional SaaS landing page that uses a restrained dark theme to make its product visuals pop."
version: alpha

colors:
  background: "#13151B"
  primary: "#FFFFFF"
  secondary: "#8C8C8C"
  tertiary: "#4D2FF5"
  neutral: "#A091FA"
  bg-soft: "#1B1E26"
  muted-soft: "rgba(255,255,255,0.55)"
  line: "rgba(255,255,255,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 70px
    lineHeight: 1.0
    fontWeight: 450
    letterSpacing: "-2.5px"
  h2:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 600
    letterSpacing: "-0.26px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 6px
  md: 10px
  lg: 100px
  pill: 1000px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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

- **Background (`#13151B`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#8C8C8C`)** — uses `ink-soft` token
- **Accent (`#4D2FF5`)** — uses `accent` token
- **Muted (`#A091FA`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- 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.

## Layout

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

*Rhythm:* Generous vertical spacing between sections to emphasize the product visuals.

## Elevation & Depth

- rgba(0, 0, 0, 0.4) 0px 0px 20px 10px
- Borders: 1px solid rgba(255,255,255,0.1)

## Shapes

- `sm`: 6px
- `md`: 10px
- `lg`: 100px
- `pill`: 1000px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```