Skip to content
DesignMunkDesignMunk Submit a site

Screen

screen.movie
Record, edit, animate, and polish cinematic screen videos in minutes.
Apps & Mobile Software Framer Homepage Inter
Share Visit site
screen.movie DESKTOP · 1440
Screen

AI Breakdown

Design export

---
version: alpha
name: Screen
description: Record, edit, animate, and polish cinematic screen videos in minutes.
colors:
  primary: "#ffffff"
  secondary: "#383838"
  neutral: "#000000"
  border: "#374151"
  brand-kindred: "#75a1d9"
  brand-rosy-tan: "#c9aba6"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Inter Display
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.21
    letterSpacing: -0.007em
  headline-md:
    fontFamily: Inter Display
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.06em
  headline-sm:
    fontFamily: Inter Display
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.21
    letterSpacing: -0.047em
  headline-xs:
    fontFamily: Inter
    fontSize: 29px
    fontWeight: 600
    lineHeight: 1.16
    letterSpacing: -0.033em
  body-md:
    fontFamily: Inter Display
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.02em
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 6px
  sm: 14px
  md: 30px
  lg: 80px
  xl: 140px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#0000ee"
    rounded: "{rounded.md}"
    padding: 8px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Screen Movie: Cinematic Dark Mode with Mac-Native Typography

## Overview

Screen Movie is a dark-mode, cinematic UI aimed at macOS creators who want speed and polish. The tone is high-contrast and confident: white type on black, neon imagery, and a single white primary CTA. Spacing alternates between generous section padding and compact feature lists. When tokens don't cover a case, prefer stark contrast, centered hierarchy, and minimal chrome.

## Colors

- Primary (#ffffff): Core text and high-contrast elements, including the primary button fill.
- Secondary (#383838): Muted gray for subtle UI, secondary text on light surfaces, and subdued icons.
- Neutral (#000000): Site background and card surfaces in dark mode.
- Border (#374151): Hairline dividers and card outlines; also suitable for input borders in dark mode.
- Brand-kindred (#75a1d9): Cool accent for gradients, links, small highlights, and illustrative flourishes.
- Brand-rosy-tan (#c9aba6): Warm accent for gradient blends and micro-highlights alongside Kindred Blue.
- Surface ({colors.neutral}): Default surface color (black) for sections and cards.
- On-surface ({colors.primary}): Default content color on dark surfaces (white).

## Typography

- Inter Display (headlines lg/md/sm): Custom/self-hosted; an agent cannot load it directly. Use Inter (Google) first, then Manrope or Plus Jakarta Sans as substitutes for a tall x-height, neutral grotesk feel.
- Inter (headline-xs): Google font; safe to load. Use for smaller headings, subheads, and UI labels.
- Headline scale: lg 48px/600/1.21, md 40px/600/1.2, sm 34px/600/1.21, xs 29px/600/1.16 with tight negative tracking. Use lg for hero, md/sm for section leads, xs for sub-section intros.
- Body-md: 24px/600/1.5 is used as emphatic body copy on this page; pair with ample spacing to avoid density on long lines.

## Layout

Spacing scale runs small to very large (6, 14, 30, 80, 140). Use lg (80px) for section padding on desktop and xl (140px) for the hero. md (30px) separates headings, paragraphs, and CTAs; sm (14px) for intra-component gaps; xs (6px) for micro-gaps in chips or icon rows. A centered single-column hero leads into two-column features and full-bleed showcases.

## Elevation & Depth

Shadows are off (none) across sizes; hierarchy relies on contrast, gradients, and whitespace. Borders in Slate Divider (#374151) and tonal shifts segment content. The optional inner inset glow can be used on dark cards for a subtle lit edge, but keep it restrained.

## Shapes

Two radii define the language: 8px for primary controls and cards (default), 4px for compact controls and chips. Rounded corners communicate approachability without feeling playful; use 8px for hero CTAs and pricing, 4px for tags and small pills.

## Components

- Button Primary: White fill (#ffffff), text in #0000ee, 8px radius, 40px height, 8px 16px padding. Use for the main CTA only.
- Button Secondary: Text-only on black with white text, 4px radius, 40px height. Pair alongside the primary or for less critical actions.
- Button Link: Inline action with no radius and white text for dark backgrounds.
- Card: Black background, white text, 8px radius, 16px padding; use borders (#374151) for separation when stacking.

### Neon Ribbon Hero
Centered lg headline (48px), short supporting copy (24px), and a single primary button. Background uses cool/warm gradient art; keep content max-width narrow with md (30px) gaps.

### Capability Marquee
A single-line row of small feature labels under the hero CTA. Use xs (6px) gaps between items and Border (#374151) for faint separators if needed.

### Testimonial Quote
Name as a small heading (xs 29px/600) above a short paragraph. Stack quotes with md (30px) gaps and optional border dividers.

### Feature + Editor Preview
Two-column section: left copy (sm 34px heading, 24px body), right visual. Section padding lg (80px) with md (30px) between heading and body.

### Notch Launcher Strip
Wide horizontal module with compact icons and labels demonstrating quick actions. Use a black card with 8px radius, inner inset glow optional, and xs–sm spacing.

### Pricing Ladder
Primary price in a card (8px radius) with a succinct bullet list. Use Border (#374151) dividers, a single accent line in #75a1d9 for "spots left," and md gaps.

### FAQ Accordion
Stacked items with 1px borders in #374151, headings at xs (29px) and md (30px) vertical rhythm.

### Sister Apps Showcase
Two or more app cards linking out. Use black cards, 8px radius, white text, and sm (14px) internal spacing.

## Do's and Don'ts

- Do reserve the white primary button for one action per view.
- Do use lg/xl spacing for section padding; keep md for element grouping.
- Do keep borders subtle (#374151) and avoid drop shadows; rely on tone instead.
- Don't introduce new radii; stay with 8px for large surfaces and 4px for compact elements.
- Don't flood headings with accent colors; keep headlines white and use #75a1d9/#c9aba6 only for small highlights.
- Don't mix multiple button styles in one row beyond primary + secondary.

## Agent Prompt Guide

Quick color reference — Text: #ffffff; Background: #000000; Border: #374151; Accent A: #75a1d9; Accent B: #c9aba6.

1) Build a hero section
- Background #000000, centered container max 720px.
- H1: 48px Inter Display (or Inter), weight 600, letter-spacing -0.007em, line-height 1.21, color #ffffff.
- Paragraph: 24px Inter (or Inter Display), weight 600, line-height 1.5, color #ffffff at 80% opacity.
- Primary CTA: 40px height, 8px radius, padding 8px 16px, background #ffffff, text #0000ee.
- Vertical spacing: 30px between elements, 140px top/bottom section padding.

2) Create a two-column feature block
- Section background #000000 with 80px padding.
- Left: Heading 34px Inter Display 600, -0.047em, color #ffffff; body 24px Inter 600.
- Right: Screenshot framed in a card: background #000000, 8px radius, 1px border #374151.
- Gap between columns: 30px; stack to single column on small screens.

3) Design a pricing card
- Card: background #000000, 8px radius, padding 16px, 1px border #374151.
- Price: 40px Inter Display 600; supporting bullets 24px Inter 600.
- Primary button inside: 40px height, 8px radius, background #ffffff, text #0000ee.
- Use #75a1d9 for a thin progress/accent line and counters.

4) Build a testimonial list
- Each item: name in 29px Inter 600; quote in 24px Inter 600, 1.5 line-height.
- Stack items with 30px gaps; optional bottom border #374151 on each.

5) Make a capability marquee
- Row of short labels separated by 1px borders in #374151.
- Text style: 24px Inter 600 at 70–80% white.
- Use xs (6px) internal padding per chip and 4px radius if chips are used.

## Similar Brands

- Raycast: Dark, high-contrast marketing with restrained color; Screen uses warmer gradients and more motion imagery.
- Apple (macOS product pages): Cinematic hero art and sparse chrome; Screen borrows the mood but is bolder with neon accents.
- Linear: Tight grotesk typography and dark UI; Screen is less minimal and more expressive with gradients.
- Descript: Media-creation focus with large type; Screen keeps a darker palette and a simpler component set.
- CapCut: Creator-oriented editing app; Screen opts for fewer colors and a more native Mac tone.

More like this

Browse Apps & Mobile →
letsjive.io
Letsjive Apps & Mobile
Letsjive
Don’t make connecting awkward—Jive makes it easy to connect and follow up.
Homepage · 49 minutes ago
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 6 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 18 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 19 hours ago