# Screen Studio · Design system migration spec

> Source: https://screen.studio  ·  Curated by OpenDesign  ·  en

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

## 1. Identity DNA

Screen Studio's visual system is built on a single, clear principle: a restrained dark canvas that lets the product's function become the focal point. Like a well-designed utility, every aesthetic choice serves to clarify, not to decorate.

**One-liner:** A minimalist, dark-themed product landing page for a professional macOS screen recording tool.
**Keywords:** Screen Recording · MacOS · Video · Productivity · Design
**Analogy:** A polished, modern macOS utility that turns complex video editing into a simple, automated process.

## 2. Color

The palette is a study in functional contrast. A deep charcoal background recedes, allowing crisp white text and a single, vibrant purple accent to command attention precisely where interaction is desired.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#13151B` | main background |
| `--bg-soft` | `#1B1E26` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#8C8C8C` | secondary text |
| `--muted` | `#A091FA` | placeholder |
| `--muted-soft` | `rgba(255,255,255,0.55)` | weak hint |
| `--accent` | `#4D2FF5` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

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

The rule is simple: one accent color for one purpose—directing the user's action.

## 3. Typography

Typographic choices favor modern clarity. A clean humanist sans-serif is set with tight negative tracking for headlines to create density, while body copy is given generous line height for comfortable reading against the dark field.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 70px | 1.0 | 450 | -2.5px | Main hero headline |
| h2 | 36px | 1.1 | 600 | -0.26px | Feature card titles |
| body | 16px | 1.5 | 400 | 0px | Standard body text |
| small | 13px | 1.3 | 400 | 0px | Secondary descriptions and labels |

**Type rules:**
- 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.

## 4. Spacing

Vertical rhythm is generous and deliberate, creating clear visual separation between content blocks to emphasize the product's visual assets.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing between sections to emphasize the product visuals.

## 5. Surfaces

Depth is suggested, not depicted. Semi-transparent borders and a soft, dark shadow beneath key elements provide just enough lift to establish a subtle hierarchy of surfaces.

- **Radius:** sm 6px · md 10px · lg 100px · pill 1000px
- **Shadows:**
  - rgba(0, 0, 0, 0.4) 0px 0px 20px 10px
- **Borders:** 1px solid rgba(255,255,255,0.1)

## 6. Layout

The layout skeleton begins as a single, centered column to focus the narrative, then expands into a multi-column grid to showcase feature parity. The structure is minimal, serving only to frame the content.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is understated and functional. Transitions are smooth and eased, providing immediate, tactile feedback on interaction without becoming decorative or distracting.

- **Durations:** micro 200ms · small 250ms · medium 500ms
- **Easing:** `cubic-bezier(0.44, 0.22, 0.26, 0.99)`
- **Patterns:**
  - Smooth, eased transitions for hover states and interactions.

- **Hover:** Subtle background color changes or slight lifts.
- **Click:** Immediate feedback with no significant animation.
- **Transition:** All properties transition smoothly over 0.3 seconds.
- **Keyboard:** Standard focus management for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional, confident, and concise. Headlines are short, benefit-driven statements, and calls to action are direct.

- **Tone:** Professional, helpful, and confident.
- **Headline style:** Short, impactful phrases that highlight the main benefit.
- **CTA style:** Direct and action-oriented (e.g., 'Download Screen Studio').
- **Avoid:** Overly technical jargon / Aggressive marketing language / Dense walls of text

### Don'ts
- ❌ 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.

The system deliberately avoids visual clutter, multiple accent colors, and complex navigation, trusting the product's value to speak with clarity.

## System Prompt (paste into AI tool)

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