Cap — design system & UI screens

Design · 1 screen · 10 sections · cap.so

A bright, near-white SaaS landing for the Cap screen recorder whose signature is the asymmetric split hero: a tight left "Record and edit locally" headline column with stacked dark CTA buttons paired against a large editor mockup on the right showing a dark abstract recording canvas with a central blue play button and a color-swatch toolbar. Below, a vertical rhythm of identically-framed feature blocks each pair a centered heading with a single large bordered app-screenshot card and a row of small checklist chips, broken up by a grayscale logo wall, a tilted scattered-card testimonial cluster, and a clean two-column blue-accented pricing comparison. The distinctive touch is the oversized faint ghost-text "Record. Edit. Share." band near the page bottom acting as a typographic divider before the CTA and mega-footer.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/cap.

Decoded design system

Cap's decoded design system: background #F2F2F2, text #000000, accent #3B82F6, link #3B82F6, primary #2563EB; type scale h1 60px / h2 36px / body 13px; 4px spacing base; 8px base radius. The single interactive/action color is #2563EB — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#F2F2F2`
surface	`#E3E3E3`
border	`#CDCDCD`
text	`#000000`
text_muted	`#5B5B5B`
primary	`#2563EB`
accent	`#3B82F6`
link	`#3B82F6`
secondary	`#8B5CF6`
button_bg	`#2563EB`
button_text	`#FFFFFF`

Using these colors

Action color #2563EB — the single interactive color; only on things you click or must notice, never large fills.
primary, button_bg are all #2563EB — one role, not several (the action color).
accent, link are all #3B82F6 — one role, not several (the action color).
accent #3B82F6 — accent for emphasis — keep it rare on the page.
secondary #8B5CF6 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Mono: ui-monospace
h1: 60px
h2: 36px
body: 13px

Spacing

base unit: 4px
scale: 2px, 4px, 6px, 8px, 10px, 12px, 14px, 16px, 20px, 24px

Radii

base: 8px
button: 9999px

Shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 1.5px 0px 0px inset

Shadows (elevation)

subtle: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 20px 25px -5px, rgba(0, 0, 0, 0.05) 0px 8px 10px -6px
card: rgba(0, 0, 0, 0.05) 0px 4px 10px 0px
overlay: rgba(0, 0, 0, 0.28) 0px 25px 50px -12px, rgba(0, 0, 0, 0.16) 0px 12px 24px -8px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 200ms · 600ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · ease
animated properties: color, background-color, border-color, text-decoration-color

Native design tokens

Token	Value
`--red-1`	`#fffcfc`
`--red-2`	`#fff7f7`
`--red-3`	`#feebec`
`--red-4`	`#ffdbdc`
`--red-5`	`#ffcdce`
`--red-6`	`#fdbdbe`
`--red-7`	`#f4a9aa`
`--red-8`	`#eb8e90`
`--red-9`	`#e5484d`
`--red-10`	`#dc3e42`

…and 95 more measured on the page.

Button states (measured)

primary hover: background #1D4ED8
primary focus: outline 1px auto rgb(16, 16, 16)

Layout (measured)

container max-width: 960px
nav: 58px fixed
common grid: 2 columns

Motion choreography (measured)

Load order: div.flex → div.absolute → div.absolute → div.absolute×2 → div.absolute×2 → button.flex-1×2

Scroll reveal: 17 elements rest at opacity 0, translateY(20px), animate in over 0.15s cubic-bezier(0.4, 0, 0.2, 1).

Stagger: span ×20 — 28ms apart.

Stagger: div ×6 — 70ms apart.

Responsive (measured)

breakpoints: 480px · 640px · 768px · 1024px · 1280px · 1536px
mobile (390px): hero 36px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Screen-recorder landing with split hero player and stacked product-shot feature blocks