What font does kapwing.com use?

kapwing.com’s website uses one typeface: Open Sans (headings and body text), google Fonts.

What are kapwing.com’s brand colours?

The main colours on kapwing.com are Light Pink (#FF3DB5), Orange Red (#FF4800), Bisque (#FFE5CD), Antique White (#FFEEDE), Deep Pink (#F52F86) and White (#FFFFFF).

What colour is kapwing.com’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is kapwing.com’s logo from?

The logo shown in this guide was found on kapwing.com’s homepage. For official logo files and usage rules, check kapwing.com’s own brand or press page.

Is this kapwing.com’s official style guide?

No. SiteStyleGuide made it from kapwing.com’s public web pages on 25 October 2026, and isn’t affiliated with kapwing.com. Members can refresh a guide after 90 days to pick up changes.

kapwing.com Style Guide: Colours, Fonts & Logo

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Kapwing: Make a Video About Anything; ● 36 / 60 characters
Meta description: Generate full video projects from a single prompt using Kapwing. Join over 30 million modern creators who trust Kapwing to create, edit, and grow their content on every channel.; ▲ 177 / 160 characters
og:title: Kapwing: Make a Video About Anything
og:description: Generate full video projects from a single prompt using Kapwing. Join over 30 million modern creators who trust Kapwing to create, edit, and grow their content on every channel.
Language: en
Theme colour: #ffffff

In search results

kapwing.comhttps://www.kapwing.com/

Kapwing: Make a Video About Anything

Generate full video projects from a single prompt using Kapwing. Join over 30 million modern creators who trust Kapwing to create, edit, and grow their content o…

When shared

kapwing.com

Kapwing: Make a Video About Anything

Generate full video projects from a single prompt using Kapwing. Join over 30 million modern creators who tru…

Back to top ↑

Logo & favicons

Found as: image in the header. WEBP, 400 × 49.

Logo

On white

On black

On Light Pink

Favicons

6 found

512 px · WEBP manifest
192 px · WEBP manifest
180 px · WEBP apple-touch-icon
48 px · ICO shortcut icon
32 px · PNG icon
16 px · PNG icon

Kapwing: Make a Video About Anything

Light browser tab

Kapwing: Make a Video About Anything

Dark browser tab

Back to top ↑

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#000000) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 35.5%
Black 32.6%
Off White 12.3%
Light Pink 7.2%
Near Black 7%
Orange Red 1.8%
Bisque 1.5%
Antique White 1.2%
Deep Pink 0.9%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
21.00:1 AAA

On white
—

Background, text, theme · .MobileMenu_content__zvERu, .CustomerStories_controls__fEwdM button
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background, border · .HeaderBarLinks_ListItemHeading__Vmkqh, .HeaderBarLinks_CalloutHeading__DeVEH
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 12

On text
15.91:1 AAA

On white
1.32:1 Fail

Text, border · .HeaderBarLinks_ListItemHeading__Vmkqh[data-theme=dark], .HeaderBarLinks_CalloutHeading__DeVEH[data-theme=dark]
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 87

On text
1.29:1 Fail

On white
16.29:1 AAA

Text, background · .LogoGallery_copy__ydG_y h2, .HeaderBarLinks_NavigationMenuViewport__FG0rJ[data-theme=dark]

Colours

Brand colours and accents, most used first

Light Pink

HEX

RGB

HSL

OKLCH

CMYK
0 76 29 0

On text
6.59:1 AA

On white
3.19:1 AA large

Text, background · .HeaderBarLinks_ListItemLink__ijl3v:hover .HeaderBarLinks_ListItemHeading__Vmkqh, .HeaderBarLinks_ListItemLink__ijl3v[data-active]:hover .HeaderBarLinks_ListItemH
Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 72 100 0

On text
6.18:1 AA

On white
3.40:1 AA large

Background · .CustomerStories_card__dsA68, .RequestADemo_primaryCta__utqxe
Bisque

HEX

RGB

HSL

OKLCH

CMYK
0 10 20 0

On text
17.34:1 AAA

On white
1.21:1 Fail

Background · .LogoGallery_container__Rdt1g, .RequestADemo_container__dLyQk
Antique White

HEX

RGB

HSL

OKLCH

CMYK
0 7 13 0

On text
18.54:1 AAA

On white
1.13:1 Fail

Background · .LogoGallery_container__Rdt1g, .RequestADemo_container__dLyQk
Deep Pink

HEX

RGB

HSL

OKLCH

CMYK
0 81 45 4

On text
5.63:1 AA

On white
3.73:1 AA large

Text · .LogoGallery_highlight__eZWEv, .Storytellers_dot__lJ4ve

Gradients

linear-gradient(135deg,#ff3db5,#ff4800)
radial-gradient(circle at 50% 50%,#fff 0,#ffeede 80%,#ffe5cd 100%)
linear-gradient(#fff 30%,hsla(0,0%,100%,0)),linear-gradient(hsla(0,0%,100%,0),#fff 70%) 0 100%,radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.2),transparent),radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.2),transparent)

Back to top ↑

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Open Sans

Aa 300 Aa 800

Open Sans

Google Fonts · weights 300, 400, 500, 600, 700, 800

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Heading 1 84px / 1 weight 800

kapwing.com

Heading 2 46px / 1.14 weight 800

Kapwing: Make a Video About Anything

Heading 3 36px / 1.2 weight 800

Kapwing: Make a Video About Anything

Body —

Generate full video projects from a single prompt using Kapwing. Join over 30 million modern creators who trust Kapwing to create, edit, an…

Paragraph 18px / 1.2 weight 500

Generate full video projects from a single prompt using Kapwing. Join over 30 million modern creators who trust Kapwing to create, edit, an…

Link 14px / 1.5 weight 700

Sizes in use

Most common across the site

48pxline 1 · 3 rules
20pxline 1.55 · 4 rules
18pxline 1 · 14 rules
17pxline 1.2 · 4 rules
16pxline 1.2 · 17 rules
15pxline 1 · 10 rules
14pxline 1.2 · 24 rules
13px2 rules

Back to top ↑

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Button

Get started

.CustomerStories_controls__fEwdM button · #FFFFFF · radius 50%

Link

Read our latest news today.

a · #000000

Corner radius

5px · 6×
32px · 6×
999px · 6×
4px · 5×
50% · 5×
28px · 5×

Shadows

0 0 0 2px #acaeb2
0 20px 50px rgba(0,0,0,.12),0 0 0 8px hsla(0,0%,100%,.5)
0 0 0 1px rgba(0,0,0,.03)
0 18px 54px rgba(0,0,0,.06)

Back to top ↑

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

600

768

900

1024

1100

1200

On a scale of 0 to 1440 px.

Content widths (max-width)

1300 px

1200 px

900 px

800 px

760 px

600 px

Back to top ↑

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 36 characters, short enough to show in full in search results.
▲ CheckThe description is 177 characters. Search results usually show about 160.

Back to top ↑

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does kapwing.com use?: kapwing.com’s website uses one typeface: Open Sans (headings and body text), google Fonts.
What are kapwing.com’s brand colours?: The main colours on kapwing.com are Light Pink (#FF3DB5), Orange Red (#FF4800), Bisque (#FFE5CD), Antique White (#FFEEDE), Deep Pink (#F52F86) and White (#FFFFFF).
What colour is kapwing.com’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is kapwing.com’s logo from?: The logo shown in this guide was found on kapwing.com’s homepage. For official logo files and usage rules, check kapwing.com’s own brand or press page.
Is this kapwing.com’s official style guide?: No. SiteStyleGuide made it from kapwing.com’s public web pages on 25 October 2026, and isn’t affiliated with kapwing.com. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

kapwing-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* kapwing.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/kapwing.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-off-white: #E0E0E0;
  --colour-near-black: #202020;
  --colour-light-pink: #FF3DB5;
  --colour-orange-red: #FF4800;
  --colour-bisque: #FFE5CD;
  --colour-antique-white: #FFEEDE;
  --colour-deep-pink: #F52F86;
  --gradient-1: linear-gradient(135deg,#ff3db5,#ff4800);
  --gradient-2: radial-gradient(circle at 50% 50%,#fff 0,#ffeede 80%,#ffe5cd 100%);
  --gradient-3: linear-gradient(#fff 30%,hsla(0,0%,100%,0)),linear-gradient(hsla(0,0%,100%,0),#fff 70%) 0 100%,radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.2),transparent),radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.2),transparent);

  /* Typefaces */
  --font-other: 'Open Sans', sans-serif, system-ui;

  /* Type scale */
  --text-h1: 84px;
  --leading-h1: 1;
  --text-h2: 46px;
  --leading-h2: 1.14;
  --text-h3: 36px;
  --leading-h3: 1.2;
  --text-p: 18px;
  --leading-p: 1.2;
  --text-a: 14px;
  --leading-a: 1.5;

  /* Shape */
  --radius-1: 5px;
  --radius-2: 32px;
  --radius-3: 999px;
  --radius-4: 4px;
  --radius-5: 50%;
  --radius-6: 28px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 600px;
  --breakpoint-2: 768px;
  --breakpoint-3: 900px;
  --breakpoint-4: 1024px;
  --breakpoint-5: 1100px;
  --breakpoint-6: 1200px;
  --max-width-1: 1300px;
  --max-width-2: 1200px;
  --max-width-3: 900px;
  --max-width-4: 800px;
  --max-width-5: 760px;
  --max-width-6: 600px;
}

{
    "site": "kapwing.com",
    "source": "https://sitestyleguide.com/kapwing.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Off White",
            "hex": "#E0E0E0",
            "rgb": [
                224,
                224,
                224
            ]
        },
        {
            "name": "Near Black",
            "hex": "#202020",
            "rgb": [
                32,
                32,
                32
            ]
        },
        {
            "name": "Light Pink",
            "hex": "#FF3DB5",
            "rgb": [
                255,
                61,
                181
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#FF4800",
            "rgb": [
                255,
                72,
                0
            ]
        },
        {
            "name": "Bisque",
            "hex": "#FFE5CD",
            "rgb": [
                255,
                229,
                205
            ]
        },
        {
            "name": "Antique White",
            "hex": "#FFEEDE",
            "rgb": [
                255,
                238,
                222
            ]
        },
        {
            "name": "Deep Pink",
            "hex": "#F52F86",
            "rgb": [
                245,
                47,
                134
            ]
        }
    ],
    "fonts": [
        {
            "name": "Open Sans",
            "stack": "Open Sans, sans-serif, system-ui",
            "weights": [
                300,
                400,
                500,
                600,
                700,
                800
            ],
            "source": "Google Fonts"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run kapwing.com?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

<a href="https://sitestyleguide.com/kapwing.com" title="kapwing.com style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

kapwing.comstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Off White

Near Black

Colours

Light Pink

Orange Red

Bisque

Antique White

Deep Pink

Gradients

Open Sans

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Savvy Savers

Canva

Chase.com

Interia

Visual (Archives) Society

KapanLagi.com

Ubie

Us

kapwing.comstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Off White

Near Black

Colours

Light Pink

Orange Red

Bisque

Antique White

Deep Pink

Gradients

Open Sans

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run kapwing.com?

Also set in Open Sans

Savvy Savers

Canva

Chase.com

Interia

Similar colours

Visual (Archives) Society

KapanLagi.com

Ubie

Us

Title &
description