System direction

A calmer, more product-native BrandSync.

This refresh shifts the suite toward framed white-canvas surfaces, mono-forward chrome, restrained borders, and low-saturation status color, inspired by sop-quick-notify.

Review dashboard sample Review auth sample

Neutral-first UI Hybrid type system Shared semantic states

Token palette

Neutrals lead; status color stays soft and purposeful.

Frame #1d2430

Canvas #f6f6f3

Surface #ffffff

Active pill #171717

Info tint status-info

Success tint status-success

Typography roles

Sans for reading, mono for product chrome and compact utility surfaces.

Page reading / body

BrandSync helps teams define a brand once and reuse it across prompts, campaigns, and launch surfaces.

Chrome / navigation / tables

SERVICES TRACKER ACTIVE MISSING NEXT RESET COUNTDOWN

Editorial accent

A little more intentional. A lot less noisy.

Core controls

Shared interaction language for buttons, tabs, and summary pills.

15 active - 9 missing

Neutral Monthly Published Review Missing

Component	Usage	Status
Top navigation	Dashboard, auth, marketing	Aligned
Segmented control	View switching and filters	Reusable
Table shell	Data-heavy product screens	Tune density

JS interaction previews

These are lightweight previews for app-level patterns we can later port into shared components.

Perfect Scrollbar preview

Scroll-heavy utility panels should keep the same low-noise chrome.

Brand builder sync

Review updated positioning notes before publishing the new context pack.

PromptLab drift alert

Legacy prompt cards still use local tag colors instead of shared status tokens.

CampaignGrid request

Marketing team wants a denser table option for quarterly launch planning.

SSO polish

Auth page needs tighter spacing between trust copy and workspace list.

Page Builder feedback

Reduce heavy gradients so the marketing shell feels closer to the suite product surfaces.

Theme checklist

Confirm light and dark mode contrast before moving shared UI classes into apps.

Loading effects

Three effects, three intent signals — NProgress fires automatically on every page; Shimmer and Rainbow AI are invoked per-use.

NProgress Default · page nav Auto

Shimmer AJAX · data tables

Rainbow AI AI generation · ML ops

Effect details

Two distinct effects for two distinct intent signals.

NProgress · Default

Slim 3 px indigo→cyan top bar that fires automatically on every page navigation via data-bs-np-autoload. Use BrandSyncLoader.np.start() / .done() around any async operation that takes the user away from the current view.

Shimmer · Situational

Left-to-right white gradient sweep on the dark border frame. Reach for this when loading happens in place — skeleton screens, data tables refreshing, or form submissions where the user stays on the page.

Rainbow AI · Situational

Rotating spectrum via @property + conic-gradient with mix-blend-mode: screen. Reserved exclusively for AI generation and ML prediction flows to signal a qualitatively different kind of wait.

API

BrandSyncLoader.np.start() · .done() · .inc() · .set(n)
BrandSyncLoader.shimmer(ms?) · .ai(ms?) · .clear()