WhatChimp: #1 Official WhatsApp Marketing Platform

Design Specification — WhatChimp: #1 Official WhatsApp Marketing Platform

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#0F766E). All type is set in "Inter". Detected font weights: 100, 200, 300, 400, 500, 600, 700, 800, 900. Detected style signatures: soft-ui / layered elevation; gradient-rich / aurora.

Logo asset(s): https://whatchimp.com/tools/checkout-v2/assets/wc-logo.png

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(180deg, #e1e7e5 0%, #ffffff 92%)
• linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 58%), #e2302a
• linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)
• radial-gradient(circle, 1px, transparent 1.5px) right top / 20px 20px
• radial-gradient(70% 60% at 100% 0%, #000, transparent)
• linear-gradient(90deg, #00b67a 20px, transparent 0)
• radial-gradient(circle, 1px, transparent 1.5px) center top / 20px 20px
• radial-gradient(32% 70% at 0% 0%, #000, transparent), radial-gradient(32% 70% at 100% 0%, #000, transparent)
• linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 58%), #0f766e
• linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)

> 10 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: Inter — stack: "Inter"

Font stacks (most used first)

• "Inter"
• "Manrope"
• inherit
• -apple-system, "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", sans-serif
• -apple-system,"system-ui",Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif
• WCInter, Inter, "WCInter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif
• eicons
• var(--e-global-typography-text-font-family)
• "Font Awesome 5 Free"
• 'ekit-subset'

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 200, 300, 400, 500, 600, 700, 800, 900

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• inset 0 0 0 1px
• inset 0 1px 0 rgb(255 255 255 / 0.22), 0 1px 2px rgb(11 31 28 / 0.2), 0 3px 8px rgb(15 118 110 / 0.16)
• 0 1px 2px rgb(11 31 28 / 0.06), 0 2px 6px rgb(11 31 28 / 0.04)
• 0 0 0 1px rgb(11 31 28 / 0.05), 0 4px 10px rgb(11 31 28 / 0.05), 0 24px 56px rgb(11 31 28 / 0.16)
• inset 0 0 0 1px #ccd5d2
• inset 0 0 0 1px #5a6b67
• inset 0 0 0 1px #e1e7e5
• 0 0 0 1px

Layout

Container max-width: 767px

Grid columns (largest detected grid): 6

Breakpoints

• 380px
• 760px
• 767px
• 768px
• 980px
• 1023px
• 1024px
• 1240px

Animation & Motion

Transitions

• background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
• border-color .15s ease-in-out,box-shadow .15s ease-in-out
• color 120ms cubic-bezier(0.2, 0.7, 0.2, 1), background-color 120ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 120ms cubic-bezier(0.2, 0.7, 0.2, 1)
• background-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 160ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1)
• opacity 160ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 160ms
• color 120ms cubic-bezier(0.2, 0.7, 0.2, 1), background-color 120ms cubic-bezier(0.2, 0.7, 0.2, 1)
• transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1)
• border-color 120ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 120ms cubic-bezier(0.2, 0.7, 0.2, 1)
• opacity 160ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 160ms
• transform 120ms cubic-bezier(0.2, 0.7, 0.2, 1)
• opacity 120ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 120ms cubic-bezier(0.2, 0.7, 0.2, 1)

Easing curves

• cubic-bezier(0.2, 0.7, 0.2, 1)
• cubic-bezier(0.455, 0.03, 0.515, 0.955)
• cubic-bezier(.2, 1, .22, 1)

Keyframes

@keyframes skeleton-loading { 0%{background-color:#e3e6e8}to{background-color:#f0f3f5} }
@keyframes ff-progress-anim { 0%{width:0}5%{width:0}10%{width:15%}30%{width:40%}50%{width:55%}80%{width:100%}95%{width:100%}to{width:0} }
@keyframes ff_move { 0%{background-position:0 0}to{background-position:50px 50px} }
@keyframes wso-sheen { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(480%); } }
@keyframes wso-slide { to { transform: translateX(-50%); } }

Animations

• wso-slide 70s linear infinite
• none
• wso-slide 80s linear infinite reverse

CTA labels found on page

• Watch demo
• Sign up
• CREATE FREE ACCOUNT ➞
• Give Me Instant Access
• View integrations

Effects

• backdrop-filter: saturate(1.6) blur(14px)

Source Design Tokens (CSS custom properties)

:root {
  --wp-internal-comment: "Placeholder for wp_hoist_late_printed_styles() to replace with the block styles printed at wp_footer.";
  --content: after,.fluentform .ff-el-repeat .ff-el-input--content:before,.fluentform .ff-step-body:after,.fluentform .ff-step-body:before;
  --fluentform-primary: #1a7efb;
  --fluentform-secondary: #606266;
  --fluentform-danger: #f56c6c;
  --fluentform-border-color: #dadbdd;
  --fluentform-border-radius: 7px;
  --fluentform-input-select-height: auto;
  --tpg-primary-color: #0d6efd;
  --tpg-secondary-color: #0654c4;
  --tpg-primary-light: #c4d0ff;
  --canvas: #f4f6f6;
  --surface: #ffffff;
  --ink: #0b1f1c;
  --ink-2: #33433f;
  --ink-3: #5a6b67;
  --ink-4: #8b9996;
  --line: #e1e7e5;
  --line-strong: #ccd5d2;
  --accent: #0f766e;
  --accent-hover: #0d6c65;
  --accent-soft: #e2f2ef;
  --accent-wash: #f2f9f8;
  --accent-ink: #0b5c55;
  --tp: #00b67a;
  --c1: #0f766e;
  --c2: #2563eb;
  --c3: #7c3aed;
  --c4: #c2410c;
  --c5: #be185d;
  --c6: #15803d;
  --c7: #0e7490;
  --c8: #b45309;
  --tile-shadow: 0 1px 2px rgb(11 31 28 / 0.06), 0 2px 6px rgb(11 31 28 / 0.04);
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --t-2xs: 12px;
  --t-xs: 13px;
  --t-sm: 14px;
  --t-base: 15px;
  --t-md: 17px;
  --t-lg: 22px;
  --t-xl: 28px;
  --t-2xl: 44px;
  --bar-h: 68px;
  --tap: 44px;
  --tile: 40px;
  --hairline: 1px;
}

Do's and Don'ts

Do

• Do reserve the accent #0F766E for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 100, 200, 300, 400, 500, 600, 700, 800, 900.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-surface: #FFFFFF;
  --color-accent: #0F766E;
  --color-primary: #1A7EFB;
  --color-background: #FFFFFF;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #868E96;
  --color-border: #33433F;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F4F6F6;
  --color-surface-container: #EEEEEE;
  --color-surface-container-high: #E9ECEF;
  --color-surface-container-highest: #E1E7E5;
  --font-sans: "Inter";
  --font-size-display: 50px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 26px;
  --font-size-title-lg: 21px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14.7px;
  --radius-sm: 3px;
  --radius-md: 7px;
  --radius-lg: 16px;
  --radius-pill: 50%;
  --shadow-sm: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 1px 2px rgb(11 31 28 / 0.2), 0 3px 8px rgb(15 118 110 / 0.16);
  --shadow-md: 0 0 0 1px rgb(11 31 28 / 0.05), 0 4px 10px rgb(11 31 28 / 0.05), 0 24px 56px rgb(11 31 28 / 0.16);
  --shadow-lg: 0 0 0 1px;
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 17px;
  --tracking-display: -0.02em;
  --tracking-label: 0.07em;
  --container-max: 767px;
}