Soft paper, deep ink, one electric accent.
Colors, type scale, spacing, radius, buttons, chips, badges, fields, cards, and native zero-JS accordions. All built strictly on CSS variables from tokens.css.
Colors & Surfaces
Warm paper, near-black teal ink, pastel gradient family, and single electric lime accent.
Core Brand
Gradient Family
Semantic Colors
Gradients
--grad-hero: linear-gradient(92deg, #E5D3F4, #D7C6E5 15%, #8BBFFA 65%, #DFF803)
--grad-glow: linear-gradient(180deg, #DFF803 5%, #77E9EE 17%, #D7EAFF 34%, #fff 84%)
--grad-dark: radial glows over linear-gradient(#04141B, #071C22)
Typography
Inter with a system fallback. The scale is Tailwind v4's, so utilities and tokens stay in sync. Headings use tight tracking (−0.025em).
| Role | Size | Line height | Weight | Tracking | Sample |
|---|---|---|---|---|---|
| Display | 72px / 4.5rem | 1.05 | 600 | −0.025em | Build it |
| H1 | 60px / 3.75rem | 1.05 | 600 | −0.025em | Heading one |
| H2 | 36px / 2.25rem | 1.11 | 600 | −0.02em | Heading two |
| H3 | 24px / 1.5rem | 1.33 | 600 | −0.01em | Heading three |
| Lead | 18px / 1.125rem | 1.55 | 400 | 0 | Lead paragraph |
| Body | 16px / 1rem | 1.5 | 400 | 0 | Body paragraph |
| Small | 14px / 0.875rem | 1.43 | 500 | 0 | Small and UI label |
| Caption | 12px / 0.75rem | 1.33 | 600 | +0.1em, caps | Eyebrow |
Spacing, Grid and Radius
4px base unit. Container max-width 1058px, wide layouts up to 1280px. Section padding 96px desktop and 64px mobile.
Spacing Scale (4px base)
| Token | Value | Visual |
|---|---|---|
| space-1 | 4px | |
| space-2 | 8px | |
| space-3 | 12px | |
| space-4 | 16px | |
| space-6 | 24px | |
| space-8 | 32px | |
| space-12 | 48px | |
| space-16 | 64px | |
| space-24 | 96px |
Breakpoints & Grid
sm 640 · md 768 · content 1058 · lg 1024 · xl 1280 · 2xl 1536.
Grid: 4 cols mobile, 8 tablet, 12 desktop, 24px gutters.
Corner Radius Tokens
Motion & Animation
Micro: 150ms · Panels: 300ms · Ease: cubic-bezier(.4,0,.2,1) · Marquee 50s linear · Carousel 30s linear · Honor prefers-reduced-motion.
Cards
28px radius (--r-card), 24px padding and a 1px hairline border. Hover lifts 4px over 300ms.
Default Base Card
Hairline border with 28px card radius and responsive hover lift. Use for general content containers.
FeatureCard Component
Icon tile, 20px title, 14px muted body. Perfect for 3 or 4 column feature rows across storefront and dashboard.
TemplateCard Component
4:3 media container with 16px radius, followed by bold headline and descriptive meta.
Tint Gradient Card
Soft sky-to-lilac wash. Used for featured pricing plans, primary incentives, and special callouts.
Dark Stat Card (--grad-dark + Glows)
Average Order Value Lift
Powered by native Wix Service Plugins (SPI) without coupon code friction or client-side DOM latency.
Accordion (Zero JavaScript)
Built with native semantic <details> and <summary> tags. Fully accessible and lightweight.
Do my customers need to enter coupon codes?
No, never. CartBoost integrates directly with Wix's native Custom Triggers and Service Plugins (SPI). Discounts trigger automatically upon reaching the volume tier or bundle threshold.
Does CartBoost slow down my Wix store's page load speed?
Not at all. Built natively with the Wix CLI, CartBoost renders lightweight HTML/CSS with virtually 0ms impact on your Core Web Vitals, keeping your store 100/100 fast on mobile and desktop.
Does it support Wix Studio, Editor, and Harmony?
Yes, 100%. CartBoost is built to support the entire Wix ecosystem with universal 1-click App Market installation.
