KIBO: Unified Commerce & OMS Platform for B2B and B2C Ecommerce

Design Specification — KIBO: Unified Commerce & OMS Platform for B2B and B2C Ecommerce

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 (#FFBF00). All type is set in Poppins. Detected font weights: 100, 400, 500, 600, 900. Detected style signatures: neumorphism; soft-ui / layered elevation; gradient-rich / aurora.

Logo asset(s): https://kibocommerce.com/wp-content/uploads/2025/12/Kibo-FC-Black-3.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(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%)
• linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)
• linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%)
• linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%)
• linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)
• linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)
• linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)
• linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)
• linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)
• linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)

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

Typography

Primary typeface: Poppins — stack: Poppins

Font stacks (most used first)

• Poppins
• "Poppins", Sans-serif
• inherit
• "Poppins"
• 'Montserrat'
• 'Adamina'
• "Adamina", Sans-serif
• arial
• -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
• swiper-icons

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 400, 500, 600, 900

Line heights (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 80px 120px -80px rgba(46, 52, 62, 0.09), -14px 0 28px -14px rgba(46, 52, 62, 0.18), 14px 0 28px -14px rgba(46, 52, 62, 0.18), 0 24px 40px -18px rgba(46, 52, 62, 0.22)
• / / Top INNER shadow / / inset 0 12px 12px -12px rgba(46, 52, 62, 0.25),/ / Left OUTER shadow / / -12px 0 22px -12px rgba(46, 52, 62, 0.22),/ / Right OUTER shadow / / 12px 0 22px -12px rgba(46, 52, 62, 0.22),/ / Bottom OUTER shadow / / 0 12px 22px -12px rgba(46, 52, 62, 0.22)
• 0px 0px 20px 0px rgba(0, 0, 0, 0.13)
• none
• 1px 1px 3px 0px rgba(2,2,2,.23)
• 0 12px 24px -12px rgba(46, 52, 62, 0.25)
• 0px 4px 20px 0px #00000026
• 0px 0px 30px 0px rgba(2,2,2,0)
• 0px 0px 15px 1px rgba(2,2,2,0)
• 0px 4px 80px 0px rgba(46, 52, 62, 0.14901960784313725)

Layout

Container max-width: 1024px

Grid columns (largest detected grid): 3

Breakpoints

• 575px
• 576px
• 767px
• 768px
• 992px
• 1024px
• 1025px
• 1366px

Animation & Motion

Transitions

• scale 0.3s ease-in
• all 0.3s ease-in-out
• all .4s cubic-bezier(.46,.03,.52,.96)
• background-color .1s ease-in-out
• all .3s
• .3s
• .3s
• background .3s,border-radius .3s,opacity .3s
• all
• all
• max-height .3s
• .4s

Easing curves

• cubic-bezier(.46,.03,.52,.96)
• cubic-bezier(.58,.3,.005,1)
• linear

Keyframes

@keyframes tabProgress { to { transform: scaleX(1); } }
@keyframes components-animate__slide-in-animation { to{transform:translateX(0)} }
@keyframes components-animate__loading { 0%{opacity:.5} 50%{opacity:1} to{opacity:.5} }
@keyframes components-button__busy-animation { 0%{background-position:200px 0} }
@keyframes slide-in-left { 0%{transform:translateX(-100%)} to{transform:translateX(0)} }
@keyframes slide-in-right { 0%{transform:translateX(100%)} to{transform:translateX(0)} }
@keyframes slide-out-left { 0%{transform:translateX(0)} to{transform:translateX(-100%)} }
@keyframes slide-out-right { 0%{transform:translateX(0)} to{transform:translateX(100%)} }
@keyframes fade-in { 0%{opacity:0} to{opacity:1} }
@keyframes fade-out { 0%{opacity:1} to{opacity:0} }
@keyframes __wp-base-styles-fade-in { 0%{opacity:0}to{opacity:1} }
@keyframes __wp-base-styles-fade-out { 0%{opacity:1}to{opacity:0} }
@keyframes components-modal__appear-animation { 0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)} }
@keyframes components-modal__disappear-animation { 0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)} }
@keyframes components-resizable-box__top-bottom-animation { 0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)} }
@keyframes components-resizable-box__left-right-animation { 0%{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)} }
@keyframes components-button__appear-animation { 0%{transform:scaleY(0)}to{transform:scaleY(1)} }
@keyframes components-validated-control__indicator-jump { 0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)} }

Animations

• tabProgress var(--tab-duration, 15s) linear forwards
• none !important
• hide-scroll .3s backwards
• initial

CTA labels found on page

• Find out How
• Login
• Support

Source Design Tokens (CSS custom properties)

:root {
  --wp--preset--aspect-ratio--square: 1;
  --wp--preset--aspect-ratio--4-3: 4/3;
  --wp--preset--aspect-ratio--3-4: 3/4;
  --wp--preset--aspect-ratio--3-2: 3/2;
  --wp--preset--aspect-ratio--2-3: 2/3;
  --wp--preset--aspect-ratio--16-9: 16/9;
  --wp--preset--aspect-ratio--9-16: 9/16;
  --wp--preset--color--black: #000000;
  --wp--preset--color--cyan-bluish-gray: #abb8c3;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--pale-pink: #f78da7;
  --wp--preset--color--vivid-red: #cf2e2e;
  --wp--preset--color--luminous-vivid-orange: #ff6900;
  --wp--preset--color--luminous-vivid-amber: #fcb900;
  --wp--preset--color--light-green-cyan: #7bdcb5;
  --wp--preset--color--vivid-green-cyan: #00d084;
  --wp--preset--color--pale-cyan-blue: #8ed1fc;
  --wp--preset--color--vivid-cyan-blue: #0693e3;
  --wp--preset--color--vivid-purple: #9b51e0;
  --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);
  --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
  --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);
  --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);
  --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
  --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
  --wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
  --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
  --wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
  --wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
  --wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
  --wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
  --wp--preset--font-size--small: 13px;
  --wp--preset--font-size--medium: 20px;
  --wp--preset--font-size--large: 36px;
  --wp--preset--font-size--x-large: 42px;
  --wp--preset--spacing--20: 0.44rem;
  --wp--preset--spacing--30: 0.67rem;
  --wp--preset--spacing--40: 1rem;
  --wp--preset--spacing--50: 1.5rem;
  --wp--preset--spacing--60: 2.25rem;
  --wp--preset--spacing--70: 3.38rem;
  --wp--preset--spacing--80: 5.06rem;
  --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
  --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
  --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
  --wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
  --wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
  --wp--style--global--content-size: 800px;
  --wp--style--global--wide-size: 1200px;
  --wp--style--block-gap: 24px;
  --b: 2px;
  --display: flex;
  --min-height: 100%;
  --flex-direction: column;
  --container-widget-width: 100%;
  --container-widget-height: initial;
  --container-widget-flex-grow: 0;
  --container-widget-align-self: initial;
  --flex-wrap-mobile: wrap;
  --gap: 4px 4px;
}

Do's and Don'ts

Do

• Do reserve the accent #FFBF00 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, 400, 500, 600, 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-primary: #FFCE01;
  --color-accent: #FFBF00;
  --color-background: #FFFFFF;
  --color-surface: #EAEDF2;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #2E343E;
  --color-border: #333333;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #000000;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #EEEEEE;
  --color-surface-container: #EAEDF2;
  --color-surface-container-high: #DDDDDD;
  --color-surface-container-highest: #D5D8DC;
  --font-sans: Poppins;
  --font-size-display: 50px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --shadow-sm: inset 0 80px 120px -80px rgba(46, 52, 62, 0.09), -14px 0 28px -14px rgba(46, 52, 62, 0.18), 14px 0 28px -14px rgba(46, 52, 62, 0.18), 0 24px 40px -18px rgba(46, 52, 62, 0.22);
  --shadow-md: 0px 0px 15px 1px rgba(2,2,2,0);
  --shadow-lg: 0px 4px 80px 0px rgba(46, 52, 62, 0.14901960784313725);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 36px;
  --space-xl: 66px;
  --container-max: 1024px;
}