Updated 14:39
Card with all three slots
Body content sits between hairlines. Slots own their padding so tables and lists embed edge-to-edge.
Live · v3.0
May 2026 · SuperCat
Tokens → Primitives → Patterns
The system,
in one page.
Twelve primitives. Eight color families. Two themes. Built for the Web Marketing and Web / iPad App surfaces — and ready for any framework that reads HTML and CSS.
Foundations
The atoms. Every component on this page resolves through these tokens — no raw hex in component CSS. To restyle the system globally, edit one of these files.
Light · default
paper-1 F5F2EC
paper-2 EDE9E1
ink-1 1A1614
ink-3 5C5450
crimson 7A1218
gold B97727
Dark · override
paper-1 131211
paper-2 1F1E1C
ink-1 EBE6D7
ink-3 A8A398
crimson 8C2A2F
gold B97727
Scale · 6 stops
Geist Sans
5xl
Display
64 · 500 · -0.04em
3xl
Heading
36 · 500 · -0.035em
xl
Title
22 · 500 · -0.02em
md
Body — the workhorse paragraph at default page reading rhythm.
16 · 400 · 0
sm
Secondary body for captions and supplementary copy.
13 · 400 · 0
xs
MONO · EYEBROW · 0.16EM
11 · 500 · MONO
Scale · 4-px base--space-N
--space-14 px
--space-28 px
--space-312 px
--space-416 px
--space-624 px
--space-832 px
--space-1248 px
--space-1664 px
ScaleButton benchmark = md
xs2 px · ticks
sm4 px · sub-controls
md ★8 px · BUTTONS · INPUTS
lg12 px · cards · popovers
xl16 px · modals
pill999 px · switches · chips
Durations--duration-*
fastHover · ripple120 ms
baseDefault UI transitions200 ms
mediumDrawer · sheet open320 ms
slowPage-scale transitions520 ms
slowerHero reveal · scroll fade-up800 ms
Wordmark · 4 placements
237 × 28
Default · light
Default · dark
Monochrome · ink
Monochrome · cream
Brand mark · 4 placements
41 × 28
Gold · on cream
Gold · on dark
Cream · on crimson
Ink · on gold
Default placements — letters take
currentColor (ink on cream, cream on dark). The gold double-wave on top is the brand spike — never substitute another color in the default forms.Monochrome — both letters AND mark collapse to one ink. Use when color is unavailable (print, fax, single-color embroidery) or when the gold would compete with a content image behind it.
On crimson — cream mark only. Used on primary CTA pills, avatars, and the active sidebar accent (when crimson is the surface, not an accent).
On gold — ink mark only. Brand-on-brand surfaces (gold welcome panels, gala collateral). Keeps contrast without two competing brand colors.
Don't — recolor the gold spike, swap the mark for a text "S", outline the strokes, drop on a busy photo, or build the brand as
[icon] + "Supercat" text. The vectors are authoritative.Primitives
Eleven class-only components. Each decorates native HTML; no framework coupling, no JS for basic states. Compose: base class + size + variant.
Variants · default size.kb · .kb-{variant}
Sizes · sm → xl.kb-sm · -md · -lg · -xl ★
Icon-only · every size.kb-icon
Sizes.kf-sm · .kf-md · .kf-lg
States[data-state="error|warn|success"]
Checkbox + RadioSame primitive · 4-px corner
Sizes.kf-sm · .kf-md · .kf-lg
Wrapper · label + hint + message.kf-field
Auto-generated if blank.
Trigger · keyboard + picker.kf-date
Sizes · xs → 3xl.ki-xs · .ki-sm · .ki-md · .ki-lg · .ki-xl · .ki-2xl · .ki-3xl
Tones.ki-neutral · -primary · -accent · -gold · -ghost
Default · 52 px rows.kdt · .kdt-mono · .kdt-num · status pills
| Order # | Customer | Submitted | Status | Total |
|---|---|---|---|---|
| 112625-10 | Brent Sanders | 2025-11-26 · 14:39 | Confirmed | $12,480.00 |
| 112625-9 | Lina Park | 2025-11-26 · 14:30 | Pending | $8,940.50 |
| 112625-8 | Howard & Co. | 2025-11-26 · 14:22 | Shipped | $3,612.00 |
Anatomy.kc · .kc-head · .kc-body · .kc-foot
Metric tiles · responsive · Geist Mono numbers.kc.kc-metric · .kc-grid.kc-grid-4
50
+ 4 this month
1,287
+ 12% vs last month
342
no change
4
- 2 this week
Underline · default · count badges.ktab · .ktab-item · .ktab-count
Pills · the Settings-screen pattern.ktab.ktab-pills
Segmented · inline toggle.ktab.ktab-seg
Confirm · 400 px · Apple-feel.kmd-confirm
Delete this order?
Order #136131-112625-10 will be permanently removed. Vendor and audit log entries stay. You can't undo this.
Menu · three-dots popover · 240 px.kmd-menu
Click ⋯ to open the live menu
Preview · 720 px · contact / product / order detail.kmd-preview
Customer · 12 years
Caldera Mills
Contact
Marta Lin
VP of Operations
marta@calderamills.com
Account
Active · NET 30
Greensboro, NC
Acct #C-4471
YTD revenue$284,500
Orders · 12 mo142
Avg order$2,003
Long-tail customer — orders run heavy in Q3/Q4 (holiday inventory) and lighter in Q1. Pays on time.
Marketing · 520 px · lead-magnet / announce.kmd-marketing
See your real ROI in 25 minutes.
Book a working session with onboarding — we plug your live data into the calculator and walk through the projection. No slides, no sales call.
Patterns
Compositions, not components. The shapes the primitives take when they sit together. Copy these straight into a page; no decoration needed.
Email capture · marketing herokf-lg + kb-xl
3-up · ki-lg + body.ki ki-lg ki-circle ki-gold
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.
Data-grid toolbarkb-sm cluster
No orders this week
Once you have orders in flight, this view shows them in their delivery windows. Start by importing a catalog or seeding from last season.
Apps
Two surfaces, one system. The web shows authority and sells; the iPad ships orders on the showroom floor. Same primitives, different posture.
04.1 · Web
SuperCat Web
Marketing landing, partner dashboards, admin tooling. Heroic typography, generous whitespace, the chunky xl button.
Coming soon
04.2 · iPad
SuperCat App · iPad sales tool
Catalog browser, product detail, order review. Offline-first, MAP-aware, sized for showroom-floor use at trade shows.
Open · app/index.html
For developers
Three links, one stylesheet. The system is class-only — drop the CSS into any framework and start composing. No build step. No JS for basic states.
<link rel="stylesheet" href="ds/tokens/index.css"> <link rel="stylesheet" href="ds/primitives/button.css"> <link rel="stylesheet" href="ds/primitives/input.css"> <form> <input class="kf-input kf-lg" type="email" placeholder="work@…"> <button class="kb kb-xl kb-primary">Send</button> </form>
ds/ ├── tokens/ → ★ canonical layer │ ├── index.css → load this in any new page │ ├── color.css · type.css · space.css · radius.css │ ├── shadow.css · motion.css · semantic.css │ └── design-tokens.json → W3C export for tools │ ├── primitives/ → framework-agnostic components │ ├── button.css/.js/.md → .kb │ ├── input.css/.js → .kf-input │ ├── check.css → .kf-check (checkbox + radio) │ ├── switch.css → .kf-switch │ ├── field.css → .kf-field │ ├── date.css/.js → .kf-date │ └── icon.css/.md → .ki (decorative wrappers) │ ├── reference.html → you are here · the system reference └── NAMING.md → one-page cheat sheet