Components, composed.
Product UI patterns assembled from the same tokens documented on the design system page — app shell, data table, auth, modal, empty state, and toast stack. Drop them into your kit, swap in your data, keep the rhythm.
Pricing Tiers
Three-up plan grid with the middle tier polarity-flipped to ink — same move the sidebar uses to mark the active item. Mono uppercase tier name + decimal index, display numeral price, hairline-divided feature list.
For individuals getting started.
- Core features
- Up to 3 projects
- Community support
For teams ready to ship.
- Everything in Starter
- Unlimited projects
- Email support
- Advanced analytics
For organizations operating at scale.
- Everything in Pro
- SSO + audit log
- Priority support
- SLA & onboarding
Product Selector
Image gallery + variant picker + add-to-bag CTA. Color swatches use a 1px ink ring for selection; size pills polarity-flip to ink fill. The same primary button as the rest of the kit.
Field Tee, 6-Pack
Six tees in our default rotation: two bone, two stone, two ink. Ultra-soft 100% cotton, dyed with our proprietary palette, pre-washed so the first wear feels like the fiftieth.
- Hand cut and sewn locally
- Pre-washed, pre-shrunk cotton
- Reinforced collar and cuffs
- Carbon-neutral shipping
Shopping Cart
Right-anchored drawer over a 50% ink scrim. Each line is a 56px thumb + name/variant/qty stack + price + Remove text-link. Subtotal sits above a full-width ink Checkout, with a Continue link below.
App Shell
Sidebar navigation + breadcrumb topbar + page heading + KPI strip + activity feed. The everyday product surface — same tokens as the marketing pages, denser rhythm.
Data Table
Mono uppercase column headers, alternating canvas rows, status pills wired to semantic color tokens, hairline row dividers, and a footer pager. The product UI table — never marketing.
Auth Forms
Centered cards on canvas, full-width ink primary CTA, mono uppercase field labels, hairline-divided SSO fallback. The same primitives as the marketing form section, composed for sign-in and sign-up.
Modal Dialog
Centered card over a 50% ink scrim. 6px corner radius, hairline divider above the action row, secondary text-button on the left, primary on the right.
Empty State
Outlined icon tile, decimal index, declarative heading, one-sentence body, and a single primary CTA. No second-tier links — the empty state asks one question.
Nothing here yet.
Connect a source or upload a CSV to start ingesting records into this workspace.
Toast Stack
Four semantic variants — info, success, warning, error. Each is a 4px card with a 3px accent rule on the leading edge, a mono uppercase tag, and a single dismiss affordance.