Skip to content
DesignMunkDesignMunk Submit a site

Supercut

supercut.ai
Technology Tailwind Landing Inter
Share Visit site
supercut.ai DESKTOP · 1440
Supercut

AI Breakdown

Design export

---
version: alpha
name: Supercut
description: Supercut is how teams explain work better.
colors:
  primary: "#fdfff0"
  secondary: "#fc3455"
  tertiary: "#ff0055"
  neutral: "#100e0e"
  brand-baker-miller-pink: "#fc94ac"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Inter Display
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.018em
  headline-md:
    fontFamily: InterVariable
    fontSize: 31px
    fontWeight: 400
    lineHeight: 1.19
  headline-sm:
    fontFamily: Inter Display
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: -0.021em
  headline-xs:
    fontFamily: Geist
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: InterVariable
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 16px
  full: 9999px
spacing:
  xs: 2px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 12px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 12px 16px
    height: 40px
  button-link:
    textColor: "#969692"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 20px
---

# Supercut

## Overview

Supercut positions itself as the fast, polished alternative to Loom for product, sales, and support teams who need to explain work on video and hand it off to AI agents. The tone is confident and technical without being cold — dark, high-contrast, minimal ornamentation, aimed at people who record and ship things quickly. An agent building on this system should favor restraint: short headline pairs, one accent color used sparingly, and screenshots or UI chrome doing the persuading rather than long paragraphs.

## Colors

- **Primary (#fdfff0):** Warm off-white used for headline text, body copy on dark surfaces, and the primary button fill — the dominant 'light' value in the system.
- **Secondary (#fc3455):** Hot pink-red accent reserved for a single high-attention element, such as a record/action button; not used for body text or large fills.
- **Tertiary (#ff0055):** A slightly hotter pink-red variant, held in reserve alongside secondary for accent or hover states.
- **Neutral (#100e0e):** Near-black base for the page surface, nav, and card backgrounds; almost never pure black, giving the UI a soft warmth.
- **Brand Baker-Miller Pink (#fc94ac):** A softened pink used for supporting accents or illustrative UI details rather than primary actions.
- **Surface / On-surface:** Surface maps to neutral, on-surface maps to primary — meaning any new panel or card should default to dark-background, ivory-text unless explicitly stated otherwise.

## Typography

Inter Display carries the large headline-lg (40px/500) and headline-sm (24px/400) roles; it is self-hosted via Supercut's CDN, not on Google Fonts, so an agent without access to those files should substitute Inter (Google-hosted) or Neue Haas Grotesk / General Sans, all of which share its grotesque proportions and tight aperture. InterVariable handles headline-md (31px/400) and body-md (14px/400) and is likewise self-hosted — Inter (Google) is the direct, near-identical substitute since it's the same family shipped differently. Geist, used for headline-xs (18px/400), IS available via Google Fonts and can be loaded directly. In practice, treat Inter (Google) as the safe universal stand-in across every text role on this page.

## Layout

Spacing runs on a tight scale — 2px, 8px, 16px, 24px, 32px — favoring small, deliberate increments over generous whitespace jumps, which suits the dense product-screenshot sections. Content sits in a centered column with a wide, dark canvas around it; the four feature steps (Capture, Share, Polish, Move) stack vertically as alternating text/screenshot pairs rather than a rigid grid.

## Elevation & Depth

No shadows are used anywhere in the system (sm, md, lg, xl, and inner all resolve to none). Depth and hierarchy come instead from tonal contrast between the near-black neutral surface and ivory on-surface text, plus the isolated hit of secondary pink-red on interactive elements — a flat, high-contrast approach rather than a layered one.

## Shapes

Two radii only: rounded-sm at 16px for cards and panels, rounded-full (9999px) for every button. The pill button paired with a modestly-rounded card gives a soft-but-precise feel — nothing sharp, nothing overly rounded.

## Components

**button-primary** is a full pill, ivory (#fdfff0) fill with neutral (#100e0e) text, 40px tall with 12px/16px padding. **button-secondary** shares the same pill shape and height but uses ivory text with no fill, for secondary actions like 'Talk to us'. **button-link** drops the pill entirely — 0px radius, muted grey (#969692) text — for inline nav-style links. **card** uses the 16px radius, neutral background, ivory text, 20px padding, seen in feature panels and testimonial blocks.

### Product Screenshot Panel
A layered dark UI composite showing a Float sidebar (playlists, watched/activity counts), a central webcam recording bubble labeled with device inputs ('FaceTime HD Camera', 'Shure MV7'), a 4K resolution badge, and a right-hand terminal pane running an AI agent session. This is the page's real centerpiece, built from stacked overlapping panels rather than a single flat image.

### Logo Row
A row of monochrome partner wordmarks (perplexity, ramp, doist, flodesk) set in a muted grey against the black background, directly under the 'Trusted by product, sales & support teams at…' line.

### Feature Step Blocks
Four repeating sections (Capture, Share, Polish, Move), each pairing a two-line slanted headline with a short description and a single text link styled in button-link — a consistent rhythm that structures the whole middle of the page.

### Testimonial Quote
A large-type pull quote ('Supercut has completely replaced Loom for me. It's so clean.') attributed to a named customer, set against the same dark neutral field with no card border.

### Enterprise Trust Block
A compliance-focused section pairing SOC2/ISO27001/GDPR badges with two buttons ('Visit Trust Center', 'Explore Enterprise') — the only place logos double as clickable proof points.

## Do's and Don'ts

- Do keep the ivory-on-near-black contrast as the primary hierarchy tool; don't introduce drop shadows to create depth.
- Do reserve the pink-red (#fc3455/#ff0055) for a single action per view — it loses impact if spread across multiple elements.
- Do use the full pill radius (9999px) on every button; don't mix in sharp-cornered buttons alongside rounded cards.
- Do let product screenshots carry technical claims (resolution, integrations, device names) rather than writing them out in body copy.
- Don't set body copy in Inter Display — that family is reserved for headline sizes only; body-md is InterVariable at 14px.
- Do keep spacing increments small (2–32px) and let repetition of layout (alternating text/screenshot rows) create rhythm instead of large gaps.

## Agent Prompt Guide

Quick reference — Text: #fdfff0 on dark, #969692 for muted links. Background: #100e0e. Accent: #fc3455 / #ff0055. Border/soft accent: #fc94ac. Radii: 16px (cards), 9999px (buttons).

1. Build a dark hero with a #100e0e background, an Inter Display (or Inter, Google-hosted) headline at 40px/500 with -0.018em tracking in #fdfff0, a 14px InterVariable subhead in a muted tone, and two buttons: a pill primary (#fdfff0 fill, #100e0e text, 40px height, 9999px radius) and a pill secondary (transparent fill, #fdfff0 text, same radius).
2. Create a four-step feature list alternating headline/description text blocks with screenshots, each headline in Inter Display 24px/400 at -0.021em, description in InterVariable 14px/400, and a single button-link in #969692 with 0px radius under each block.
3. Design a testimonial section: a large pull-quote in Inter Display or headline-md styling, centered on a #100e0e field, attribution in 14px InterVariable, no card border or shadow.
4. Build a compliance/trust card: 16px-radius card (#100e0e background, #fdfff0 text, 20px padding) listing SOC2/ISO27001/GDPR with a pill primary and pill secondary button pair beneath.
5. Add a single-accent CTA element (e.g. a record button) filled in #fc3455 with white or ivory iconography — keep it as the only saturated color on the screen.

## Similar Brands

Loom shares the dark-adjacent, screen-recording-first positioning but leans lighter and more playful in its marketing site; Supercut is starker and more enterprise-toned. Linear shares the near-black neutral surface, pill buttons, and restrained single-accent color discipline. Arc/The Browser Company share the warm-ivory-on-black palette instinct. Cron (before Notion Calendar) and Raycast share the tight Inter-family typography and flat, shadow-free component style aimed at technical, fast-moving users.

More like this

Browse Technology →
ravenna.ai
Ravenna AI
Ravenna
Automate the routine. Focus on impact.
Landing · 10 hours ago
simplystatic.com
Simply Static Technology
Simply Static
Secure, fast, zero-maintenance Static WordPress—host, manage, and monitor.
Landing · 13 hours ago
signalwire.com
SignalWire Communication
SignalWire
Compose AI agents and real-time communications into one programmable system.
Landing · 1 day ago
midnightlabs.ai
Midnight Labs AI
Midnight Labs
Enterprise brand protection powered by predictive AI—stopping piracy, impersonation, theft.
Landing · 2 days ago