Clearbit

Clearbit

Marketing data engine
Visit
Clearbit
Screens
19
Flows
1
Updates
Sections

Marketing Pages

12
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Landing Page
Clearbit
Landing Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Pricing Page
Clearbit
Pricing Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Customers Page
Clearbit
Customers Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Customer Story
Clearbit
Customer Stories
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit compared to Data.com
Clearbit
Comparison Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit About Page
Clearbit
About Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Press Page
Clearbit
Press Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Video Presentation
Clearbit
Product Video
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Landing Page
Clearbit
Landing Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Integrations Page
Clearbit
Integrations Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Newsletter Page
Clearbit
Newsletter Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit About Page
Clearbit
About Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Landing Page
Clearbit
Landing Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Pricing Page
Clearbit
Pricing Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Customers Page
Clearbit
Customers Page

🔒 Get SaaSFrame Pro to see 9 more marketing pages from Clearbit

Product Interfaces

7
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Signup Page
Clearbit
Signup
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Analytics Interface
Clearbit
Analytics
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Sign Up Flow
Clearbit
Account Setup
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Sign Up Flow
Clearbit
Account Setup
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Signup Page
Clearbit
Signup
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Sign Up Flow
Clearbit
Account Setup
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Login
Clearbit
Login
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Signup Page
Clearbit
Signup
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Analytics Interface
Clearbit
Analytics
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Sign Up Flow
Clearbit
Account Setup

🔒 Get SaaSFrame Pro to see 4 more product intefaces from Clearbit

Emails

0
No items found.
No items found.

🔒 Get SaaSFrame Pro to see 3 more emails from Clearbit

Clearbit

Sign Up Flow

5 screens

Clearbit Landing Page Version Comparison

Landing Page
Clearbit
May 2020
Jun 2023

Clearbit About Page Version Comparison

About Page
Clearbit
May 2020
Jun 2023
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Stats Section
Clearbit Stats Section
This is some text inside of a div block.
Clearbit Stats Section
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Feature Section
Clearbit Feature Section
This is some text inside of a div block.
Clearbit Feature Section
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Integrations Section
Clearbit Integrations Section
This is some text inside of a div block.
Clearbit Integrations Section
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Testimonial Section
Clearbit Testimonial Section
This is some text inside of a div block.
Clearbit Testimonial Section
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Contact Form Section
Clearbit Contact Form Section
This is some text inside of a div block.
Clearbit Contact Form Section
Clearbit Timeline Section
Clearbit Timeline Section
This is some text inside of a div block.
Clearbit Timeline Section
Clearbit Maps Section
Clearbit Maps Section
This is some text inside of a div block.
Clearbit Maps Section
Clearbit Timeline Section
Clearbit Timeline Section
This is some text inside of a div block.
Clearbit Timeline Section
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Clearbit Comparison Section
Clearbit Comparison Section
This is some text inside of a div block.
Clearbit Comparison Section

Visual identity

DESIGN.md
CSS Variables
Design Tokens
Notes

Clearbit — design reference

Source: https://clearbit.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.

Typography

  • font-family: var(--font-heading),ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" — selector .modular-page-markdown h1,.modular-page-markdown h2,.modular-page-markdown h3,.modular-page-markdown h4,.modular-page-markdown h5,.modular-page-markdown h6
  • font-size: .9375rem — selector .ck-banner--heading
  • font-size: .875rem — selector .ck-button.ck-button.ck-button--small
  • font-size: 1.5rem — selector .ck-drawer-header .ck-drawer--heading
  • font-size: 1rem — selector .ck-stepper-heading-title
  • font-size: 100% — selector button,input,optgroup,select,textarea
  • font-size: .8125rem — selector .ck-button-new--xs
  • font-weight: 500 — selector .ck-banner--heading
  • font-weight: 600 — selector .ck-drawer-header .ck-drawer--heading
  • font-weight: 700 — selector .modular-page-markdown h1,.modular-page-markdown h2,.modular-page-markdown h3,.modular-page-markdown h4,.modular-page-markdown h5,.modular-page-markdown h6
  • font-weight: 400 — selector .blog-content .custom-block h6,.markdown-content .custom-block h6
  • font-weight: 500!important — selector .mktoForm .mktoButton
  • line-height: 1.375 — selector .ck-banner--heading
  • line-height: 1.25rem — selector .ck-button-new
  • line-height: 3.5rem — selector .modular-page-markdown h1
  • line-height: 4.5rem — selector .modular-page-markdown h1
  • line-height: 3rem — selector .modular-page-markdown h2
  • line-height: 4rem — selector .modular-page-markdown h2
  • line-height: 2.5rem — selector .modular-page-markdown h3
  • letter-spacing: .25px — selector :root

Colors and surfaces

  • color: rgba(39,40,42,var(--tw-text-opacity)) — selector .ck-banner--default .ck-banner--heading
  • color: rgba(201,128,0,var(--tw-text-opacity)) — selector .ck-banner--warning .ck-banner--description,.ck-banner--warning .ck-banner--heading,.ck-banner--warning .ck-banner--timestamp
  • color: rgba(16,112,201,var(--tw-text-opacity)) — selector .ck-banner--info .ck-banner--description,.ck-banner--info .ck-banner--heading,.ck-banner--info .ck-banner--timestamp
  • color: rgba(177,30,14,var(--tw-text-opacity)) — selector .ck-banner--error .ck-banner--description,.ck-banner--error .ck-banner--heading,.ck-banner--error .ck-banner--timestamp
  • color: rgba(156,79,183,var(--tw-text-opacity)) — selector .ck-banner--special .ck-banner--description,.ck-banner--special .ck-banner--heading,.ck-banner--special .ck-banner--timestamp
  • color: rgba(155,173,188,var(--tw-text-opacity)) — selector .ck-button.ck-button:disabled
  • color: rgba(255,255,255,var(--tw-text-opacity)) — selector .ck-button--bold--blue.ck-button--bold--blue
  • color: #7b8b99 — selector .ck-button--simple--default.ck-button--simple--default
  • background-color: rgba(0,0,0,0) — selector .ck-button.ck-button
  • background-color: rgba(240,244,248,var(--tw-bg-opacity)) — selector .ck-button.ck-button:disabled
  • background-color: rgba(255,255,255,var(--tw-bg-opacity)) — selector .ck-button--simple--default.ck-button--simple--default:before
  • background-color: #fafbfc — selector .ck-button--simple--default.ck-button--simple--default:not(:disabled):not(:active):hover:before
  • background-color: #f0f4f8 — selector .ck-button--simple--default.ck-button--simple--default:not(:disabled):active:before
  • background-color: #f2fafe — selector .ck-button--simple--blue.ck-button--simple--blue:not(:disabled):not(:active):hover:before
  • background-color: #dbf1fe — selector .ck-button--simple--blue.ck-button--simple--blue:not(:disabled):active:before
  • background-color: #f1fcf8 — selector .ck-button--simple--green.ck-button--simple--green:not(:disabled):not(:active):hover:before

Components and layout

  • border-radius: .375rem — selector .ck-button.ck-button
  • border-radius: .5rem — selector .ck-image-hero--container
  • border-radius: 5px!important — selector .mktoForm .mktoButton
  • border-radius: 9999px — selector .section-bg-navy-radial-gradient-blurred:before
  • border-radius: .625rem — selector .card-1-shadow,.card-2-shadow
  • box-shadow: var(--tw-ring-offset-shadow,0 0 rgba(0,0,0,0)),var(--tw-ring-shadow,0 0 rgba(0,0,0,0)),var(--tw-shadow) — selector .ck-box,.ck-box.ck-box--card
  • box-shadow: 0 1px 2px rgba(20,140,252,.4),0 1px 2px 1px rgba(123,139,153,.15) — selector .ck-button--bold--blue.ck-button--bold--blue
  • box-shadow: inset 0 0 0 1px rgba(8,56,100,.5) — selector .ck-button--bold--blue.ck-button--bold--blue:before
  • box-shadow: 0 0 0 4px rgba(152,213,253,.4) — selector .ck-button--bold--blue.ck-button--bold--blue:not(:disabled):focus
  • box-shadow: 0 1px 2px rgba(20,140,252,0),0 1px 2px 1px rgba(20,140,252,0) — selector .ck-button--bold--blue.ck-button--bold--blue:not(:disabled):active
  • box-shadow: inset 0 0 0 1px #083864 — selector .ck-button--bold--blue.ck-button--bold--blue:not(:disabled):active:before
  • box-shadow: inset 0 0 0 1px rgba(192,208,223,.4) — selector .ck-button--bold--blue.ck-button--bold--blue:disabled:before
  • box-shadow: 0 1px 2px rgba(29,196,99,.4),0 1px 2px 1px rgba(123,139,153,.15) — selector .ck-button--bold--green.ck-button--bold--green
  • max-width: 100% — selector .ck-toast-container
  • max-width: calc(var(--layoutWidth) + 2\*var(--padding-x-gap)) — selector .main-container
  • max-width: 640px — selector .container
  • max-width: 768px — selector .container
  • max-width: 1024px — selector .container
  • max-width: 1280px — selector .container
  • max-width: 1536px — selector .container
  • max-width: 1200px — selector .section-bg-blurred-spots-right:before
  • padding: 0 — selector button,input,optgroup,select,textarea
  • padding: 0 var(--padding-x-gap) — selector .main-container
  • padding: .75rem 1.5rem — selector .ck-button--large
  • padding: .5rem 1rem — selector .ck-button-new
  • padding: 0 20px!important — selector .mktoForm .mktoButton
  • gap: .5rem — selector .ck-button-new
  • gap: 2.75rem — selector .hero-container
  • transition: background .2s ease,box-shadow .2s ease — selector .ck-button.ck-button:before
  • transition: box-shadow .2s ease — selector .ck-button--bold--blue.ck-button--bold--blue
  • transition: all .3s ease-in-out — selector .ck-button-new--tertiary:hover

Responsive rules

(min-width:768px)
(min-width:1024px)
(min-width:640px)
(min-width:1280px)
(min-width:1536px)
(max-width:520px)
(max-width:300px)
(min-width:1440px)
(prefers-color-scheme:dark)

Source: https://clearbit.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.

Original CSS custom-property declarations, grouped by source and selector. Up to 250 declarations; selectors preserved; media-query conditions are not attached to individual declarations.

https://clearbit.com/\_next/static/css/44b7fe241ff37a4b.css — :root

--padding-y-gap: 3rem;
--padding-x-gap: 0.938rem;
--layoutWidth: 80rem;
--paddingTop: 5rem;
--paddingBottom: 5rem;
--svg-path-opacity: 1;
--padding-y-gap: 6rem;
--padding-x-gap: 2.75rem;
--padding-y-gap: 10rem;
--gray-0: #fafbfc;
--gray-100: #f0f4f8;
--gray-200: #e1e9f0;
--gray-300: #c0d0df;
--gray-400: #9badbc;
--gray-500: #7b8b99;
--gray-600: #596168;
--gray-700: #4c5359;
--gray-800: #373c41;
--gray-900: #27282a;
--gray-1000: #131414;
--blue-0: #f2fafe;
--blue-100: #dbf1fe;
--blue-200: #98d5fd;
--blue-300: #4db1fd;
--blue-400: #2b9ffd;
--blue-500: #148cfc;
--blue-600: #127ee3;
--blue-700: #1070c9;
--blue-800: #0c5497;
--blue-900: #083864;
--blue-1000: #041c32;
--navy-0: #f2f6fa;
--navy-100: #dde8f4;
--navy-200: #a1bddc;
--navy-300: #6b90c0;
--navy-400: #3b64a0;
--navy-500: #2a456d;
--navy-600: #253e62;
--navy-700: #213757;
--navy-800: #192a42;
--navy-900: #101c2c;
--navy-1000: #080e16;
--aqua-0: #f6fcfe;
--aqua-100: #e4f8fe;
--aqua-200: #b1ecfd;
--aqua-300: #80dffd;
--aqua-400: #52d2fc;
--aqua-500: #3abefa;
--aqua-600: #34abe1;
--aqua-700: #2e98c8;
--aqua-800: #227296;
--aqua-900: #174c64;
--aqua-1000: #0b2632;
--indigo-0: #f7f8ff;
--indigo-100: #eaeeff;
--indigo-200: #c2cfff;
--indigo-300: #9cb2ff;
--indigo-400: #7793ff;
--indigo-500: #637eff;
--indigo-600: #5872e5;
--indigo-700: #4f65cc;
--indigo-800: #3b4c99;
--indigo-900: #273266;
--indigo-1000: #131933;
--purple-0: #fcf7fd;
--purple-100: #f8eafc;
--purple-200: #edc2f8;
--purple-300: #e29bf3;
--purple-400: #d576f0;
--purple-500: #c363e5;
--purple-600: #af58cd;
--purple-700: #9c4fb7;
--purple-800: #753b89;
--purple-900: #4e275b;
--purple-1000: #27132d;
--yellow-0: #fefbf1;
--yellow-100: #fef4d7;
--yellow-200: #fde08e;
--yellow-300: #fdcc50;
--yellow-400: #fdb61c;
--yellow-500: #fca000;
--yellow-600: #e28f00;
--yellow-700: #c98000;
--yellow-800: #976000;
--yellow-900: #644000;
--yellow-1000: #322000;
--red-0: #fdf3f1;
--red-100: #fbddd8;
--red-200: #f6a194;
--red-300: #f06a57;
--red-400: #ea3927;
--red-500: #de2612;
--red-600: #c72310;
--red-700: #b11e0e;
--red-800: #85160a;
--red-900: #580f07;
--red-1000: #2c0703;
--green-0: #f1fcf8;
--green-100: #d9f9ec;
--green-200: #97ecca;
--green-300: #4edc9f;
--green-400: #31d48b;
--green-500: #1dc463;
--green-600: #1ab059;
--green-700: #189c50;
--green-800: #11753c;
--green-900: #0c4e28;
--green-1000: #052713;
--black: #000;
--white: #fff;
--salesforce: #00a1e0;
--marketo: #5c4c9f;
--segment: #43af79;
--hubspot: #ff7a59;
--facebook: #1877f2;
--twitter: #1da1f1;
--linkedin: #0073b0;
--github: #27282a;
--size-xxs: 360px;
--size-xs: 480px;
--size-sm: 560px;
--size-md: 640px;
--size-lg: 720px;
--size-xl: 840px;
--size-xxl: 960px;

https://clearbit.com/\_next/static/css/44b7fe241ff37a4b.css — .ck-animated-play

--border-angle: 0deg;
--border-angle-2: 180deg;
--border-radius: 99rem;
--spinner-color: #0f77ff90;
--spinner-width: 0.0625rem;
--spinner-length: 85%;

https://clearbit.com/\_next/static/css/44b7fe241ff37a4b.css — to

--border-angle: 360deg;
--border-angle-2: 540deg;

https://clearbit.com/_next/static/css/44b7fe241ff37a4b.css — .ck-animated-play:focus,.ck-animated-play:hover

--spinner-length: 90%;

https://clearbit.com/_next/static/css/44b7fe241ff37a4b.css — .ck-image-hero--container

--aspect-ratio: 1.135;
--scale: 1;
--scale-from: 0.8;

https://clearbit.com/\_next/static/css/44b7fe241ff37a4b.css — .ck-image-hero--bottom,.ck-image-hero--top,.ck-video-hero--bottom,.ck-video-hero--top

--scale: 1;
--scale-from: 0.5;

https://clearbit.com/\_next/static/css/44b7fe241ff37a4b.css — .modular-page-markdown-extended ol li:before,.modular-page-markdown-extended ul li:before

--size: 2rem;

Source: https://clearbit.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.

Observed design values, with source selectors. Names shown are CSS properties, not invented official token names.

PropertyDeclared valueSelector
font-familyvar(--font-heading),ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji".modular-page-markdown h1,.modular-page-markdown h2,.modular-page-markdown h3,.modular-page-markdown h4,.modular-page-markdown h5,.modular-page-markdown h6
font-size.9375rem.ck-banner--heading
font-size.875rem.ck-button.ck-button.ck-button--small
font-size1.5rem.ck-drawer-header .ck-drawer--heading
font-size1rem.ck-stepper-heading-title
font-size100%button,input,optgroup,select,textarea
font-size.8125rem.ck-button-new--xs
font-weight500.ck-banner--heading
font-weight600.ck-drawer-header .ck-drawer--heading
font-weight700.modular-page-markdown h1,.modular-page-markdown h2,.modular-page-markdown h3,.modular-page-markdown h4,.modular-page-markdown h5,.modular-page-markdown h6
font-weight400.blog-content .custom-block h6,.markdown-content .custom-block h6
font-weight500!important.mktoForm .mktoButton
line-height1.375.ck-banner--heading
line-height1.25rem.ck-button-new
line-height3.5rem.modular-page-markdown h1
line-height4.5rem.modular-page-markdown h1
line-height3rem.modular-page-markdown h2
line-height4rem.modular-page-markdown h2
line-height2.5rem.modular-page-markdown h3
letter-spacing.25px:root
colorrgba(39,40,42,var(--tw-text-opacity)).ck-banner--default .ck-banner--heading
colorrgba(201,128,0,var(--tw-text-opacity)).ck-banner--warning .ck-banner--description,.ck-banner--warning .ck-banner--heading,.ck-banner--warning .ck-banner--timestamp
colorrgba(16,112,201,var(--tw-text-opacity)).ck-banner--info .ck-banner--description,.ck-banner--info .ck-banner--heading,.ck-banner--info .ck-banner--timestamp
colorrgba(177,30,14,var(--tw-text-opacity)).ck-banner--error .ck-banner--description,.ck-banner--error .ck-banner--heading,.ck-banner--error .ck-banner--timestamp
colorrgba(156,79,183,var(--tw-text-opacity)).ck-banner--special .ck-banner--description,.ck-banner--special .ck-banner--heading,.ck-banner--special .ck-banner--timestamp
colorrgba(155,173,188,var(--tw-text-opacity)).ck-button.ck-button:disabled
colorrgba(255,255,255,var(--tw-text-opacity)).ck-button--bold--blue.ck-button--bold--blue
color#7b8b99.ck-button--simple--default.ck-button--simple--default
background-colorrgba(0,0,0,0).ck-button.ck-button
background-colorrgba(240,244,248,var(--tw-bg-opacity)).ck-button.ck-button:disabled
background-colorrgba(255,255,255,var(--tw-bg-opacity)).ck-button--simple--default.ck-button--simple--default:before
background-color#fafbfc.ck-button--simple--default.ck-button--simple--default:not(:disabled):not(:active):hover:before
background-color#f0f4f8.ck-button--simple--default.ck-button--simple--default:not(:disabled):active:before
background-color#f2fafe.ck-button--simple--blue.ck-button--simple--blue:not(:disabled):not(:active):hover:before
background-color#dbf1fe.ck-button--simple--blue.ck-button--simple--blue:not(:disabled):active:before
background-color#f1fcf8.ck-button--simple--green.ck-button--simple--green:not(:disabled):not(:active):hover:before
border-radius.375rem.ck-button.ck-button
border-radius.5rem.ck-image-hero--container
border-radius5px!important.mktoForm .mktoButton
border-radius9999px.section-bg-navy-radial-gradient-blurred:before
border-radius.625rem.card-1-shadow,.card-2-shadow
box-shadowvar(--tw-ring-offset-shadow,0 0 rgba(0,0,0,0)),var(--tw-ring-shadow,0 0 rgba(0,0,0,0)),var(--tw-shadow).ck-box,.ck-box.ck-box--card
box-shadow0 1px 2px rgba(20,140,252,.4),0 1px 2px 1px rgba(123,139,153,.15).ck-button--bold--blue.ck-button--bold--blue
box-shadowinset 0 0 0 1px rgba(8,56,100,.5).ck-button--bold--blue.ck-button--bold--blue:before
box-shadow0 0 0 4px rgba(152,213,253,.4).ck-button--bold--blue.ck-button--bold--blue:not(:disabled):focus
box-shadow0 1px 2px rgba(20,140,252,0),0 1px 2px 1px rgba(20,140,252,0).ck-button--bold--blue.ck-button--bold--blue:not(:disabled):active
box-shadowinset 0 0 0 1px #083864.ck-button--bold--blue.ck-button--bold--blue:not(:disabled):active:before
box-shadowinset 0 0 0 1px rgba(192,208,223,.4).ck-button--bold--blue.ck-button--bold--blue:disabled:before
box-shadow0 1px 2px rgba(29,196,99,.4),0 1px 2px 1px rgba(123,139,153,.15).ck-button--bold--green.ck-button--bold--green
max-width100%.ck-toast-container
max-widthcalc(var(--layoutWidth) + 2\*var(--padding-x-gap)).main-container
max-width640px.container
max-width768px.container
max-width1024px.container
max-width1280px.container
max-width1536px.container
max-width1200px.section-bg-blurred-spots-right:before
padding0button,input,optgroup,select,textarea
padding0 var(--padding-x-gap).main-container
padding.75rem 1.5rem.ck-button--large
padding.5rem 1rem.ck-button-new
padding0 20px!important.mktoForm .mktoButton
gap.5rem.ck-button-new
gap2.75rem.hero-container
transitionbackground .2s ease,box-shadow .2s ease.ck-button.ck-button:before
transitionbox-shadow .2s ease.ck-button--bold--blue.ck-button--bold--blue
transitionall .3s ease-in-out.ck-button-new--tertiary:hover

Source: https://clearbit.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.

Evidence and limitations

  • Values come directly from downloaded stylesheets. Selector context is retained to distinguish elements; individual media-query conditions are not retained.
  • CSS cascade, active viewport, runtime styles, interactive states and private product UI were not verified. Colors or dimensions in utility classes may be unused on this page.
  • No inferred dark theme, semantic color roles or framework defaults have been added.
  • 140 custom-property declarations found; 1469 relevant property declarations parsed.

Stylesheet sources