CapCut Brand Design System Deep Dive

1. Brand Overview

CapCut’s website feels like a product that knows exactly who it’s talking to: creators who want speed, clarity, and a professional polish without the corporate stiffness. It’s not trying to be playful in the way Canva does, nor is it as hyper-minimal as Apple. Instead, it sits in the middle — clean, bold, and practical.

The vibe is creative-tech. Safe enough to appeal to brands, but with enough contrast and saturated accents to feel alive. You get a lot of near-black and white surfaces, then occasional injections of deep blues and teals. There’s no pastel fluff here — the palette leans dark, confident, and slightly cinematic.

Typography is equally modern. The whole site runs on Inter — a versatile sans-serif built for digital screens — with weights from Regular to SemiBold. This keeps language crisp and legible at all scales. Headings are big, sometimes huge (72px for hero titles), which immediately gives hierarchy without relying on color. Button sizes are modest, but the padding and rounded corners make them approachable.

CapCut’s design system is clearly built around a tight 8px spacing grid. It’s modular enough to adapt across desktop and mobile without breaking rhythm. Breakpoints range from 436px up to 1440px, so it’s tuned for everything from small phones to large monitors.

The overall philosophy: functional minimalism with moments of emphasis. It’s not about overwhelming you with decoration — it’s about clarity, breathing space, and a controlled color accent strategy. This works for a product whose audience is focused on visuals and editing, not text-heavy workflows.

I like that they avoid shadows entirely — it’s flat design done right. Depth is created via contrast, borders, and movement on hover, not drop shadows. This makes the UI feel lighter and more adaptable in different contexts (light/dark modes, embedded widgets, etc.).

If you’re designing with CapCut’s system, think dark base, high-contrast text, strong typographic hierarchy, and rounded UI elements that soften the tech aesthetic.

2. Color System

2.1 Primary Colors

There’s no screaming neon here. CapCut’s primary “action” color is actually a deep teal (#00303b) — rich, confident, and safe for accessibility. It’s paired with a lot of black (#000000) and white (#ffffff) for maximum contrast.

They also use semi-transparent navy (rgba(28, 40, 61, 0.7) → #1c283d) as overlays, and an extremely dark gray (#0c1016) for text and icons on light backgrounds. Accent hover states sometimes reference TikTok’s signature pink (#fe2c55), which hints at the brand connection without overpowering the CapCut identity.

Compared to competitors:

• Canva: lighter, more pastel-oriented.
• Adobe Express: more saturated primaries.
• CapCut: darker, more neutral, cinematic.

This works because CapCut’s product is about framing visual work — the UI should stay out of the way.

2.2 Complete Palette

2.3 Color Relationships

Contrast is strong: black on white and white on black pass WCAG AAA easily. Deep teal (#00303b) on white is also high contrast. The subtle muted blue overlays fail contrast on white for body text — but they’re used only for decorative or non-critical elements.

Dark mode is inherent — most UI surfaces are already near-black or dark navy. Light mode is more of a “inverted” dark mode for certain sections.

2.4 Usage Guide

• Works well: White text on #000000 for hero sections. #00303b links on white backgrounds. Transparent navy overlays on images.
• Avoid: Using semi-transparent colors for text — they’re not readable enough.
• Accents: Keep #fe2c55 (TikTok pink) only for hover states or micro-interactions — it’s not part of the main CapCut palette.

3. Typography

3.1 Font Families

Everything is Inter. No secondary display font — that’s a deliberate choice to keep consistency.

Fallbacks for some contexts include PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial — this covers Chinese and other scripts gracefully.

No Google Fonts or Adobe Fonts loading — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

Headings jump drastically in size — from 72px down to 36px — which makes hero sections impactful. The smaller sizes (14px, 12px) are used for captions and microcopy. The narrow line heights (1.10 for headings) make titles more compact and assertive.

4. Spacing & Layout

4.1 Spacing Scale

Base unit is 8px — but they also use 4px and odd values like 6px, 7px, and 9.5px for tighter control.

4.2 Layout

Breakpoints: 436px, 468px, 640px, 700px, 760px, 768px, 960px, 991px, 1024px, 1025px, 1200px, 1280px, 1440px.

The double breakpoints at 1024px/1025px suggest different handling between tablet landscape and small desktop.

5. Visual Elements

• Border Radius: Heavy use of rounded corners — 10px to 20px for most elements, occasional 50% for avatars.
• Shadow System: None. Flat design.
• Borders: Thin (1px) borders in low-opacity gray for dividers. Some list items use bottom borders for separation.

6. Components

6.1 Buttons

Variant 1 (Light Surface)
Default:

• Background: rgba(42, 67, 94, 0.08)
• Color: rgb(9, 12, 20)
• Padding: 9.5px 16px
• Radius: 10px
• Border: none
• Font: Inter Medium, 14px, weight 500

Hover:

• Color: var(--awesome-background-color-highlight)
• Border: 1px solid var(--awesome-text-primary)
• Background: rgba(0,0,0,0.15)
• Transform: translateY(-12.5%)

Active:

• Color: rgb(0, 153, 184)

Variant 2 (Dark Surface)
Default:

• Background: rgb(17, 26, 32)
• Color: rgb(253, 255, 254)
• Same padding & radius as above

Hover/Active: same transitions as Variant 1.

6.2 Links

Multiple styles, all no underline by default, underline on hover. Colors vary from #00303b to pure white, depending on context.

6.3 Forms

No extracted input styles — suggests they rely on browser defaults or custom components elsewhere.

6.4 Cards

No explicit card component extracted — likely built from divs with 16px+ radius and padding.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-navy-overlay: #1c283d;
  --color-white: #ffffff;
  --color-deep-teal: #00303b;
  --color-muted-blue: #283f59;
  --color-dark-gray: #0c1016;
  --color-border-gray: rgba(42, 67, 94, 0.1);

  /* Typography */
  --font-primary: "Inter", sans-serif;
  --font-fallback-cn: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial;
  --font-size-h1-xl: 72px;
  --font-size-h1-lg: 52px;
  --font-size-h1-md: 40px;
  --font-size-h1-sm: 36px;
  --font-size-h1-xs: 26px;
  --font-size-body: 16px;
  --font-size-caption: 14px;
  --font-size-small: 12px;
  --font-size-tiny: 10px;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9-5: 9.5px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-23: 23px;
  --space-28: 28px;
  --space-32: 32px;
  --space-41: 41px;
  --space-48: 48px;
  --space-80: 80px;
  --space-120: 120px;
  --space-160: 160px;
  --space-208: 208px;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-full: 50%;
}

8. AI Coding Assistant Prompt

# CapCut Design System Specification

You are a CapCut design expert. Build UIs matching their visual language exactly.

## Brand Context
CapCut’s design language is functional minimalism with a cinematic edge. The palette leans dark with controlled accent colors. Typography is bold and screen-friendly. Rounded corners soften the tech aesthetic, and depth is achieved via contrast, not shadows.

## Color Palette
- Black: #000000 — Base background, strong text
- Navy Overlay: #1c283d — Modal overlays, dark surfaces
- White: #ffffff — Text on dark, light backgrounds
- Deep Teal: #00303b — Links, interactive elements
- Muted Blue: #283f59 — Dividers, subtle accents
- Dark Gray: #0c1016 — Body text on light
- Border Gray: rgba(42, 67, 94, 0.1) — Dividers, outlines

## Typography
Font families:
- Primary: "Inter", sans-serif
- Fallbacks: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial

Type sizes:
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 XL | 72px | 600 | 1.10 | Hero titles |
| H1 LG | 52px | 500 | 1.10 | Section titles |
| H1 MD | 40px | 600 | 1.10 | Subtitles |
| H1 SM | 36px | 600 | 1.10 | Smaller headings |
| Link XL | 26px | 600 | 1.25 | Prominent links |
| Body | 16px | 400–500 | 1.00–1.30 | Paragraphs |
| Caption | 14px | 400–700 | 1.20–4.57 | Metadata |
| Small | 12px | 400–500 | 1.30–3.33 | Labels |
| Tiny | 10px | 500 | 1.30 | Superscripts |

## Spacing & Grid
Base: 8px grid.
Scale: 1px, 4px, 6px, 7px, 8px, 9.5px, 12px, 15px, 16px, 18px, 20px, 23px, 28px, 32px, 41px, 48px, 80px, 120px, 160px, 208px.

## Border Radius
- sm: 10px — buttons
- md: 16px — cards, modals
- lg: 20px — large images
- full: 50% — avatars

## Shadows & Depth
Flat design — use borders and contrast for depth. No drop shadows.

## Components

### Primary Button (Light Surface)
Default:
```css
background: rgba(42, 67, 94, 0.08);
color: rgb(9, 12, 20);
padding: 9.5px 16px;
border-radius: 10px;
border: none;
font: 500 14px/1.31 "Inter";
```
Hover:
```css
color: var(--awesome-background-color-highlight);
border: 1px solid var(--awesome-text-primary);
background: rgba(0,0,0,0.15);
transform: translateY(-12.5%);
```
Active:
```css
color: rgb(0, 153, 184);
```

### Primary Button (Dark Surface)
Same as above but background `rgb(17, 26, 32)` and text `rgb(253, 255, 254)`.

### Navigation Links
Default: no underline, color varies by context.  
Hover: underline, color `#fe2c55`.

### Cards
Background: white or dark surface, radius: 16–20px, padding: 16px+, border: 1px solid rgba(42, 67, 94, 0.1).

## Layout & Responsive Rules
Max content width: 1440px.  
Breakpoints: 436px, 468px, 640px, 700px, 760px, 768px, 960px, 991px, 1024px, 1025px, 1200px, 1280px, 1440px.

## Interaction Rules
- Transition: 150ms ease for hover/active
- Focus: border or outline in accent color
- Hover: slight upward motion (-12.5% translateY)

## DO List
- Use only colors from palette
- Stick to 8px grid
- Keep headings compact with line-height ≤ 1.10
- Use rounded corners consistently
- Respect breakpoints

## DON'T List
- Add drop shadows
- Mix sharp and rounded corners
- Use low-contrast text colors for body copy
- Invent new accent colors
- Overuse TikTok pink outside hover states

## Code Examples

Button:
```css
.btn-primary {
  background: rgba(42, 67, 94, 0.08);
  color: rgb(9, 12, 20);
  padding: 9.5px 16px;
  border-radius: 10px;
  font: 500 14px/1.31 "Inter";
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: rgba(0,0,0,0.15);
  transform: translateY(-12.5%);
}
```

Card:
```css
.card {
  background: #ffffff;
  border: 1px solid rgba(42, 67, 94, 0.1);
  border-radius: 16px;
  padding: 16px;
}
```

Input:
```css
.input {
  border: 1px solid rgba(42, 67, 94, 0.1);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
}
.input:focus {
  border-color: #00303b;
  outline: none;
}
```

9. Summary

TL;DR
CapCut’s design system is dark, clean, and typographically confident. It uses Inter everywhere, an 8px grid with occasional sub-increments, and rounded elements for approachability. No shadows — just contrast and motion.

Brand Keywords

• cinematic-minimalist
• creator-focused
• dark-confident
• typographic-driven
• flat-interactive