SECTION 1 SPEC 1.0 Design Tokens & System Variables

Canonical Tokens: Colors, Typography, Radii & Elevation

All twelve entriso plugins share these identical CSS custom properties. No arbitrary hex values allowed outside these tokens.

Copy tokens.css tokens.css

1.1 Brand Color Palette & Accent Rule (Click any color to copy)

#695ced

Primary Violet

--color-primary

Every interactive element

#5a4dd0

Primary Hover

--color-primary-hover

Hover state for primary

#4c1d95

Primary Active

--color-primary-active

Active press state

#282249

Brand Dark (Granat)

--color-brand-dark

All headings & titles

#f0ecff

Primary Soft

--color-primary-soft

Active pill & tag bg

#f4f0ff

Primary Soft 2

--color-primary-soft-2

Active selector tile bg

#c4b5fd

Primary Border

--color-primary-border

Active element borders

#fe2b78

Accent Pink RESTRICTED

--color-accent

Charts 2nd series & KPI dots ONLY

1.2 Neutrals, Surfaces & Borders

#f4f5f8

Canvas

--color-canvas

#ffffff

Surface

--color-surface

#f8fafc

Sunken

--color-surface-sunken

#e2e4e9

Border (1px)

--color-border

#cbd5e1

Border Strong

--color-border-strong

1.3 Typography (Geist Sans & Geist Mono)

Display Scale (24px / 800)

Dynamic Campaign Intelligence

Geist 800

Section Heading H2 (18px / 700)

Automated Checkout Rules & Discounts

Geist 700

Card Title H3 & Body (12.5px / 600 & 400)

Standard administrative table cell text, description copy, and modal instructions.

Geist 400 / 600

Monospace Code & Technical IDs (10.5px / 700) [ets_banner id="101" placement="header"] · LIC-PRO-9921-OK

Geist Mono 700

1.4 Spacing Scale (4px Base Grid)

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-6

24px

--space-8

32px

1.5 Corner Radius Scale

4px (--radius-xs)

Micro pills & badges

8px (--radius-md)

Buttons & inputs

12px (--radius-lg)

Cards & accordions

16px (--radius-xl)

Modals & rule cards

Full (--radius-full)

Status badges & filter chips

1.6 Elevation & Box Shadows

--shadow-2xs

0 1px 2px rgba(0,0,0,0.03)

--shadow-card

0 1px 3px rgba(0,0,0,0.04)

--shadow-hover

0 4px 12px rgba(105,92,237,0.08)

C-BTN-01...08 4.1 Buttons & Action Controls

Buttons & Interactive States

Primary violet #695ced for actions, surface for secondary, danger for destructive, and full micro-interactions.

Copy Class 8 Variants

Core Button Styles & States

C-BTN-01 Primary .entriso-btn-primary

Save Changes Disabled State

C-BTN-02 Secondary .entriso-btn-secondary

Filter Records Disabled State

C-BTN-03 Danger .entriso-btn-danger

Delete Record Disabled State

C-BTN-04 / 05 Icons & Ghost .entriso-btn-icon

Cancel / Clear Filters

Button Sizing Scales (Default, Small, and Full-Width)

Default (10px 18px / 12.5px) Default Action

Small (6px 12px / 11.5px) Small Action

Full-Width Mobile / Modal (.entriso-btn-full) Full Width Action

Interactive Button States (Click to test in real-time)

Test Loading Spinner (C-BTN-06) Test Error Shake (C-BTN-07) Deploy Plugin Stepped (C-BTN-08)

C-BDG-01...08 · C-STA-01...03 4.2 Status Chips, Badges & WC Mapping

Status Indicators, Badges & Pills

Semantic status signals, WooCommerce order status mappings, delta indicators, and monospace IDs.

Copy Class 11 Variants

C-STA-01 Live Status Chips

Ad Engine Active

Firewall Active

Cache Rebuilding

C-BDG-01...04 Semantic Pills, PRO Badge & C-STA-02 Deltas

Active / Enabled Scheduled / Draft Expired / Error Info / Notice PRO 14

▲ +12.4% ▼ -3.2%

C-BDG-06 Category Tags

Payments Shipping PRO Features General

C-BDG-05 & C-STA-03 Monospace ID & Copyable Shortcodes

[ets_campaign id="45"] gateway: stripe_cc active: true LIC-ETS-8849-OK

WooCommerce Order Status Mapping (Section 4.2 Strict Rule)

WC Status	Badge Display	Label (PL)	Context / Meaning
wc-pending	Oczekuje na płatność	Oczekuje na płatność	Order created, awaiting payment authorization
wc-processing	W realizacji	W realizacji	Payment received, stock reduced, order in fulfillment
wc-on-hold	Wstrzymane	Wstrzymane	Awaiting stock or offline wire transfer confirmation
wc-completed	Zrealizowane	Zrealizowane	Shipped and finalized
wc-cancelled	Anulowane	Anulowane	Cancelled by customer or store manager
wc-refunded	Zwrócone	Zwrócone	Refund issued back to customer
wc-failed	Nieudane	Nieudane	Payment failed or declined

C-TIP-01 4.3 Tooltips & Help Popovers

Micro Tooltips (Hover & Focus Accessible)

Dark #1e1b4b background, pop shadow, 4px arrow, 44x44px touch target area, supporting keyboard focus and hover.

Accessible

Hover for Top Tooltip

Trigger live campaign placement

Hover for Bottom Tooltip

Export CSV records (Press ⌘+E)

Auction Priority Rule

?

Lower numbers take precedence during real-time auction bidding rules.

C-FRM-01...16 4.4 Form Controls & Validation

Inputs, Toggles, Selects & Form Validation

Structured inputs with 8px radius, accessible switches, custom SVG checkboxes, media pickers, and full validation suite.

16 Controls

C-FRM-01 & C-FRM-02 Inputs with Prefix / Suffix & Validation States

Campaign Name * Required unique name

Order Number Prefix

#

WooCommerce order ID

Discount Threshold

PLN

Cart total required

License Key * Key expired

C-FRM-03 Textarea with Counter & C-FRM-04 Styled Select

Banner Description Special promotion active for all VIP customers.

46 / 80

Placement Position Select an injection hook... woocommerce_before_single_product woocommerce_after_add_to_cart_button

Integration Hook (Read-only)

C-FRM-07 Radio Cards (Single Choice)

Automatic Refund

Direct to original payment gateway

Store Credit Voucher

Issues instant coupon code

C-FRM-12 Date & Datetime Range Active Campaign Period

–

Runs continuously between both dates

C-FRM-05 Toggles, C-FRM-06 Checkboxes & C-FRM-08 Slider

C-FRM-05 Toggles

Enable Click Tracking

Auto-expire Campaigns

C-FRM-06 Checkboxes

Apply to variable products

Exclude discounted items

Watermark Opacity 75%

Accent Colour (C-FRM-13)

C-FRM-14 Media Picker

No image

Select Image

Recommended: 1200x400 PNG or WebP

C-FRM-11 Drag Handle & Drop Placeholder

1. Header Notification Banner

Pos: 1

Drop Rule Card Here

Banner Creative Asset (C-FRM-15)

Drag and drop banner image or click to browse

PNG, JPG, WebP up to 5MB

C-FRM-16

Form Validation Orchestration

Failed save shakes button 400ms, smooth scrolls to first error, and renders alert banner.

Test Form Validation (C-FRM-16)

C-SEL-01...07 4.5 Selectors & Grids

Selector Tiles, Weekday Pills & Reason Cards

Multi-select grids, preset tiles, reason grids, weekday filters, and segmented controls.

7 Selectors

C-SEL-01, C-SEL-01b & C-SEL-02 Multiselect Grid

CC

Credit Card (Stripe)

stripe_cc

P24

Przelewy24 / BLIK

p24_blik

INP

InPost Paczkomat 24/7

inpost_locker

DPD

DPD Classic Courier

dpd_courier

C-SEL-05 Preset / Template Tile

Checkout Optimization

Hide COD for High Cart Values

Automatically disables cash on delivery when order total exceeds 1,000 PLN.

+ Apply this template

C-SEL-07 Reason Cards (3-Up Grid)

Damaged

In transit

Wrong Size

Exchange

Other

Custom

C-SEL-04 Active Schedule Days

Pon Wt Śr Czw Pt Sob Ndz

C-SEL-06 Segmented Viewport

Desktop Tablet Mobile

C-NAV-01...06 4.6 Navigation Hierarchy

Tabs, Wizard Steps, Drawers & Breadcrumbs

Structured navigation: Breadcrumb trail, inside-page underline tabs, off-canvas drawers, and connected multi-step wizard indicators.

6 Nav Types

C-NAV-01 Header Navigation Pills (Interactive Bar)

Click any pill to switch active state

Dashboard Campaigns 6 Reports Sales Report Open Drawer (C-NAV-06)

Active State .is-active

Active Screen

bg: #f0ecff · text: #695ced · 700 weight

Default State default

Reports

text: #334155 · hover: #f4f5f8 canvas

With Count Badge C-BDG-08

Campaigns 12

Pill with live count badge

Disabled State .is-disabled

Locked Tab

opacity: 0.5 · pointer-events: none

C-NAV-04 Breadcrumb Trail

C-NAV-02 Underline Tab Row

General Placement Display Rules3 Schedule & Expiry

C-NAV-03 Wizard Step Indicator

1. Choose Type

2

2. Configure Logic

3

3. Targets

4

4. Publish

C-CNT-01...11 4.7 Containers, Cards & Modals

Rule Cards, Action Boxes, Modals & Empty States

Standard surfaces, conditional rule builders, expandable rows, upgrade gradient cards, empty states, and modal dialogs.

11 Variants

C-CNT-02 Rule Card (Condition Builder)

Active

Priority:

If Cart Subtotal Is: Greater than or equal to

Amount:

PLN

Target Customer: All Customers

Then: Hide Payment Gateway [cod]

Auto-evaluated

C-CNT-06 Empty State

No conditional rules configured yet

Create your first condition to customize payment and shipping availability for your WooCommerce store.

Create First Rule

C-CNT-04 Accordion & C-CNT-11 Two-Column Split Layout

Campaign: Summer Sale 20263 Banners

Hero Top Bar [ets_banner id="101"] Edit

C-CNT-07 Standard Modal Demo

Interactive 600px/800px dialog with focus trap.

Launch Modal

C-CNT-09 Semantic Alert Banners

License connected! All 12 plugin modules are activated and up to date.

WooCommerce cache warning: Re-save rules to synchronize cart checkout states.

C-CNT-10 Lite / PRO Upgrade Banner

Unlock WooCommerce Multi-Currency & B2B Rules

Upgrade to etsConditional PRO for country-specific payment filtering and wholesale pricing tiers.

Activate Licence →

C-TBL-01...06 · C-KPI-01 · C-CHT-01...03 4.8 Data Display, KPI Cards & Charts

Tables, KPI Cards, Progress Rings & Chart.js

Selectable row checkboxes, floating bulk action bar, inline filters, sticky totals row, Chart.js visual canvas, and pagination.

9 Components

C-KPI-01 Metric KPI Cards (4-Up Responsive Grid)

Active Campaigns

12

▲ +2 this month

Total Impressions

264,700

▲ +18.4% vs last week

Click-Through Rate

4.28%

▼ -0.4% vs benchmark

Generated Revenue

48,920 PLN

▲ +24.1%

C-CHT-01 Campaign Impressions & Clicks

Dual series: Primary violet #695ced vs Accent pink #fe2b78

30 Days 90 Days Year

C-CHT-02 Score Ring

Store Health Score

Optimal Performance

C-CHT-03 Batch Sync 64%

Processing 128 of 200 items Pause

All StatusesActive

Status: Active Clear Filters

2 items selected Bulk Actions Activate Selected Delete Selected Apply

Deselect all

	Rule / Campaign Name	Slug & Shortcode	Share & CTR	Impressions	Action
	Summer Sale Hero Banner Top bar hook placement	[ets_banner id="101"]	48.2%3.8% CTR	170,500	Edit
	Free Shipping Over 200 PLN Conditional cart rule	rule_fs_200	32.1%92.4% Conv	94,200	Edit
	Total Across Active Rules (C-TBL-05)	2 Records	80.3% Coverage	264,700

Showing 1-2 of 24 items

1 2

C-FBK-01...05 4.9 Shimmer Skeletons, Notices & Feedback

Shimmer Skeletons, Toasts, WP Notices & Spinners

Smooth 1.2s linear shimmer skeletons used during async table and card updates (never a blank screen).

5 Components

C-FBK-04 Shimmer Skeleton Placeholders (1.2s Sweep)

KPI Card Skeleton

Multiselect Skeleton (2-Col)

Table Row Skeleton

C-FBK-02 WordPress Native Notice (Full Page Post)

Settings saved successfully via admin-post.php.

C-FBK-03 Inline Spinners & C-FBK-05 Optimistic Toggle

Inline Primary Spinner

Test Optimistic Fail

C-SRC-01...05 4.10 Search & AJAX Patterns

Quick Search, Inline AJAX & Result Dropdowns

200ms debounce, loading skeletons, product suggestions, SKU search, and load more pagination.

5 Components

C-SRC-03 Inline AJAX Search with Dropdown (C-SRC-04)

WooCommerce Products

Premium Wool Hoodie

SKU: HOOD-WL-01

249.00 PLN

Air Runner Pro Sneakers

SKU: RUN-PRO-42

389.00 PLN

C-SRC-05 Secondary Load More (No Infinite Scroll)

Load More Items Showing 20 of 145 products

C-WC-01...05 4.11 WooCommerce Controls

Product Pickers, Shipping Zones & Line Items

WooCommerce integration components: shipping zone selectors, product pickers, order lines with dynamic calculations, and product selection.

5 Components

C-WC-01 WooCommerce Product Picker Modal (800px)

Wide modal with AJAX search, 48x48 product thumbnails, variations, and selection summary.

Open Product Picker

C-WC-03 Shipping Methods Grouped by Zone

Zone 1: Poland (Domestic)

3 Methods

InPost Paczkomat

14.99 PLN

DPD Courier

18.00 PLN

Free Shipping

0.00 PLN

C-WC-05 Order Line Items (Interactive Quantity & Totals)

Premium Wool Hoodie (Size L)

249.00 PLN each

Qty:

498.00 PLN

Air Runner Pro Sneakers (Size 42)

389.00 PLN each

Qty:

389.00 PLN

Selected Refund / Action Total: 887.00 PLN

C-LIC-01...06 · .eli-* 4.12 Licensing & PRO

Licence Status, Key Forms, PRO Controls & Changelog

Universal licensing card, expanding activation form, multi-plugin overview table, and version changelog.

6 Components

Licence: Active PRO

PRO Edition

Connected Domain: myshop.entriso.dev

Subscription Status: Active until 2027-08-17

Plugin Version: v2.4.0 (Latest)

Change Licence Key Disconnect Licence

Enter New Licence Key *

Save Key Cancel

C-LIC-03 Licences Overview Table (Shared Central Screen)

Plugin Name	Version	Edition	Licence Status	Expiry Date	Action
ets Banners	v2.4.0	PRO	Active	2027-08-17	Manage
ets Conditional Rules	v1.8.2	Lite	Unregistered	—	Upgrade
ets Booking	v3.1.0	PRO	Active	2027-11-04	Manage

C-LIC-05 PRO-Locked Feature (Never Hide, Show Disabled)

Automated Cart Re-targeting PRO

Available in PRO only

Push SMS notification after 2 hours abandoned cart

C-LIC-06 Version & Release Changelog Table

Version	Release Date	Package Size	Status	Key Changes
v2.4.0	2026-08-17	1.4 MB	Current	Added Gutenberg banner block preview and Lucide icon ecosystem.
v2.3.2	2026-07-22	1.3 MB	Archived	Fixed WooCommerce 9.0 cart fragment caching.