CURATED · OPEN · FREE

Cap

A clean, modern SaaS landing page for a screen recording tool.

productmacoss
Cap screenshot
↓ Download design system (8 MB)Open in OpenDesign

Visit: https://cap.so

📦 Browse pack contents →

01

Identity DNA

developer toolscreen recordingopen sourcescreenshot

A clean, modern SaaS dashboard for a screen recording tool

02

Color

#0D74CEAccent
#000000Ink
#202020Ink soft
#fcfcfcBG
#838383Muted
rgba(229, 231, 235, 1)Line

High-contrast black typography on near-white backgrounds with a single vibrant blue accent for primary actions.

03

Typography

sans-serif · ui-monospace

04

Spacing

4px
8px
16px
24px
32px
48px
64px
96px

Consistent 4px base unit with generous vertical spacing between sections

05

Surfaces

sm · 4px
md · 8px
lg · 12px
pill · 9999px

1px solid rgb(229, 231, 235)

rgba(0, 0, 0, 0.05) 0px 4px 10px 0px · rgba(0, 0, 0, 0.05) 0px 20px 25px -5px

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Standard centered container with 12-column grid

07

Motion & Interaction

150msmicro
150mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth hover transitions on interactive elements · Playhead animation on video timeline

Smooth color transitions on buttons and links · Subtle scale or color shift

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Cap — 桌面首屏（hero）
桌面首屏（hero）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

This is a clean, modern SaaS landing page for Cap, an open-source screen recording tool. The design DNA is characterized by a light, near-white background (#fcfcfc), high-contrast black typography, and a single vibrant blue accent (#0D74CE) for primary actions like 'Sign Up' and 'Upgrade'. The font is a neutral, humanist sans-serif used at a large scale (60px for headlines) with tight tracking. Key critical donts: 1) Do not use dark mode or dark backgrounds, as the screenshot shows a light theme. 2) Do not use sharp corners on buttons or cards; use pill shapes and rounded corners. 3) Do not use harsh shadows; use subtle, soft shadows for depth. The layout is spacious with generous whitespace, emphasizing clarity and professionalism. Interactive elements have smooth, subtle transitions. The voice is professional and straightforward, focusing on the product's utility and open-source nature.

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