System · Live SuperCat · 2026 v3.0 · May 2026

One brand. Two products.
One foundation.

The SuperCat Design System ships shared tokens + primitives that power two distinct surface families. Web Marketing is editorial — confident, premium, restrained. Web / iPad App is utilitarian — data-dense, fast, workspace-grade. Same brand, same voice, same foundation underneath.

Foundation8 color families · Geist · 4-px space
Primitives12 · framework-agnostic
ProductsWeb Marketing · Web / iPad App
ThemesLight · Dark
00 Shared Foundation Powers both products
01

Reference

The complete design system on one page — tokens, primitives, patterns, themes, framework integration. The single source of truth for both products.

Everything · one page Light + dark Live · v3.0
02

Tokens

Primitive → semantic → component-local. 8 color families · Geist · 4-px space ladder · 8/14 radii · 6 durations · 6 easings. Light + dark via [data-theme="dark"].

ds/tokens/ 3 tiers W3C JSON mirror
03

Primitives

Twelve framework-agnostic components: .kb · .kf-input · .kf-check · .kf-switch · .kf-field · .kf-date · .ki · .kc · .kdt · .ktab · .knav · .kmd · .kskel · .kfoot. Pure CSS; real HTML elements; works in React, Vue, Angular, Svelte, vanilla.

ds/primitives/ 14 classes 0 framework lock-in
01 Product 1 · Web Marketing 01 reference page
01

MaxROI · 90-Day payback

Live calculator + lead-magnet landing page for the SuperCat ROI flow. Editorial hero with precise S-curve, real customer math (5 drivers, Base/Upside scenarios), share-link permalink, intent-aware lead modal with brand mark, contextual book-a-session.

.kc + .kc-pick + .ktab-seg + .kmd + .kfoot Live calculator Live
02 Product 2 · Web / iPad App 07 reference screens
00

Sales Portal · phase comparison

Legacy vs Phase 1 (token reskin) vs Phase 3 (design-system app shell). Same dashboard content — toggle in the top bar to compare floor plans.

Legacy · Phase 1 · Phase 3 Self-contained Mockup
00b

Sales Portal · proposed skin

Before/after mockup of eCat Sales Portal chrome with design-system tokens mapped onto the existing layout (Phase 1 reskin — not a full .kshell rebuild). Toggle Legacy vs Proposed in the top bar.

Token bridge Legacy ↔ Proposed Mockup
01

Dashboard

Workspace home. Metric tiles, orders-per-day chart, best-selling products, most-active users, action shortcuts. Skeleton-loaded with a Refresh control.

.kshell + .knav-floating .kskel loading Live
02

Orders

Data table — status tabs, search + filters toolbar, sortable headers, status pills, row selection, pagination. Skeleton-loaded.

.kdt data table 1,287 rows demo Live
03

Products

Card-view grid — 4-up with rotating cover tones, vendor + SKU eyebrow, status pill + tabular-num price, New/Low corner flags. Skeleton-loaded.

.kc-grid · 16 cards Web · iPad Live
04

Company Settings

Form-heavy admin view — horizontal .ktab section nav with panel swap. Profile, branding, address, defaults, notifications, API tokens, danger zone. Sticky save bar.

7 panels .kf-* form family Live
05

Sign in

Two-panel auth flow — editorial brand panel on the left, form on the right. Email + password, eye-toggle, keep-signed-in, SSO continue. Pure system primitives (.kf-field, .kf-input, .kf-check, .kb).

2-column · responsive .kf-* + .kb Live
03 Documentation Read these first
01

SURFACES.md

Single source of truth for the Web Marketing vs Web / iPad App split. Maps every file to its surface family. Calls out the two-nav distinction.

Surface map Class-prefix legend
02

FRAMEWORK-GUIDE.md

React / Vue / Angular / Svelte / Tailwind integration with copy-paste snippets. Plus an LLM-friendliness quick contract.

5 frameworks LLM contract