SuperCat Design System · Primitives

Icon wrapper .ki

Sizes · xs → 3xl

All sizes
Default (md) no size class → ki-md (40px)

Shapes · square · rounded · pill · circle

Square
Rounded · default
Pill
Circle

Tones · neutral · primary · accent · gold · ghost

All tones

Marketing · feature list (ki-lg ki-circle ki-primary)

Three pages

The customs broker's checklist condenses to one quick-reference page per phase.

Fifteen steps

Numbered, sequenced, no guesswork. Each step is one action with one decision.

Instant download

No login. No drip campaign. You get the PDF; we get a name on the list.

Empty state · ki-2xl ki-rounded ki-neutral

Nothing scheduled for this week

Once you have orders in flight, this view shows them in their delivery windows.

Hero · ki-3xl ki-pill ki-gold

KEY rate · 4.75 %

The system's biggest decorative slot — page-scale icon art for hero compositions or marketing posters.

Compare · .ki vs .kb-icon

.kb-icon (button) interactive · hover · focus ring · keyboard-focusable
.ki (decoration) decorative · no transitions · aria-hidden