TabiTabs Press

A brutalist-warm storefront for TabiTabs Press — storybooks & learning kits for ages 0–5. Big ideas for small hands.

Built with React + Vite + TypeScript, implementing the v2 design exported from Claude Design. Raw high-contrast aesthetics, oversized type, hard offset shadows, stickers & tilts — kept warm and playful for kids while staying accessible for the grown-ups shopping at 10pm.

Getting started

npm install
npm run dev      # start the dev server (http://localhost:5173)
npm run build    # typecheck + production build to dist/
npm run preview  # preview the production build

What's inside

A single-page app with five state-driven screens, navigated from the sticky top bar and the floating bottom dock nav:

• Home — kinetic hero with an interactive fanned deck of covers and Tabi's rotating READ · PLAY · GROW · REPEAT badge; infinite cover marquee; full-bleed age bands (0–1 / 1–3 / 3–5); bestseller grid; manifesto; Starter Library bundle poster; sticker/tape reviews; 10%-off newsletter capture.
• Shop — live age + type filter chips over a responsive card grid, with an empty state.
• Product — sticky typographic cover, quantity stepper, add-to-cart / buy now, "what's inside," trust badges, and "frequently read together."
• Cart & checkout — animated free-shipping progress bar, editable line items, HELLO10 promo (10% off), checkout form, and an order-placed state.
• Brand — logo lockup, the Tabi mascot, type specimen, palette, do/don't, and the tagline.

Cart, filters, and promo all update live. Extras: a desktop cursor follower, a film-grain overlay, scroll-triggered section reveals, and an ambient-motion on/off toggle (bottom-left).

Design system

• Palette — Paper #FFF4E4, Ink #1B1510, Tomato #FF4E1F, plus Cobalt, Sunny, Bubblegum, Grass & Grape stickers.
• Type — Lobster Two (display), Jost (UI & numbers), Space Grotesk (body), Space Mono (labels), Caveat (annotations).
• Marks — 3px ink outlines, hard offset shadows, generous tilt.

Project layout

src/
  App.tsx              app shell + screen router
  store.tsx            cart / filters / routing / promo state + selectors
  data.ts              catalog, palette, reviews, age bands, patterns
  components/          TabiCat, ProductCard, TopBar, DockNav, Ticker,
                       Toast, Footer, CursorFollower, MotionToggle
  screens/             Home, Shop, Product, Cart, Brand
  index.css            design tokens, keyframes, interactive primitives

The original design bundle (HTML prototypes, chat transcript, reference screenshots) is preserved under project/ and chats/.