BALLCAPBUDDY

Design system

Style guide

BallcapBuddy uses a monochrome luxury visual language, CSS variables shared with shadcn/ui (New York style), and Tailwind CSS v4. This page documents tokens, patterns, components, and routes used across the site.

Brand

Positioning in code and copy: high-end headwear preservation — architectural, precise, timeless. The UI stays strictly black, white, and gray; accent is structural (borders, glass surfaces), not decorative color.

Design tokens

Semantic colors are defined in src/app/globals.css as :root CSS variables and mapped into Tailwind via @theme inline. Radius is 0rem at the theme level (sharp geometry); individual components may use rounded classes where specified (e.g. cards).

background

Page canvas

foreground

card

muted

muted-foreground

primary

secondary

accent

destructive

border

ring

Typography

Body font: Inter (variable --font-inter), loaded in root layout with weights 300–900. Tailwind maps font-sans to Inter.

text-4xl font-bold

Preserve the silhouette

text-2xl font-semibold

Section title

text-base (default body)

Muted body copy uses text-muted-foreground for hierarchy without introducing new hues.

text-sm

Supporting text, form labels, table cells

text-xs uppercase tracking-widest

Eyebrow / category

Layout & spacing

  • Primary content width: max-w-[1400px] mx-auto px-6 sm:px-10 (matches header and footer).
  • Marketing pages: min-h-screen bg-background on <main>.

Custom CSS utilities

Defined in globals.css for product and hero surfaces.

.liquid-glass — frosted panel, subtle border and inset highlights

.liquid-glass-image — image well / upper card region

.shimmer-on-hover — parent must be relative overflow-hidden

Also: @keyframes marquee, .no-scrollbar, themed ::-webkit-scrollbar (8px track).

UI components

Primitives live in src/components/ui/. The project uses shadcn/ui New York style, lucide-react for icons, and Radix primitives under the hood.

Buttons

Badges

DefaultSecondaryOutlineDestructive

Form controls

Tabs

Content for tab A.

Card

Card title
Description uses muted foreground.

Cards use bg-card, border, and optional shadow.

Additional installed components include: accordion, alert-dialog, avatar, breadcrumb, calendar, carousel, chart, command, context-menu, dialog, drawer, dropdown-menu, hover-card, input-otp, menubar, navigation-menu, pagination, popover, progress, radio-group, resizable, scroll-area, sheet, sidebar, skeleton, sonner, table, textarea, toast, and tooltip — same design tokens apply.

Marketing page composition

The home page composes these sections in order (see src/app/page.tsx):

  1. Header — logo, nav (Story, Introduction, Linktree, Craft anchor), Shop Now CTA, reseller login
  2. HeroSection
  3. TargetGroupsSection
  4. ProblemSolutionSection
  5. BrandSlider
  6. StorySection
  7. ProductSection
  8. CraftsmanshipSection
  9. PurchaseSection
  10. Footer — columns, social, legal strip

Header marketing nav uses GSAP for entrance animation; the Shop Now control uses GSAP for magnetic hover and click particles. Footer uses explicit hex grays (#0a0a0a, #666, #888) for consistency with the wordmark.

Routes

Public

/Home — hero, segments, brand slider, product, craft, purchase
/storyBrand story timeline
/introductionProduct introduction steps
/linktreeLink hub
/shopProduct listing
/shop/[id]Product detail
/cartShopping cart
/checkoutCheckout
/checkout/paymentPayment step
/checkout/successOrder confirmation
/loginSign in
/reseller/loginReseller login
/registerRegistration
/galleryImage and video gallery
/style-guidesThis style book

Dashboard

/dashboardReseller home
/dashboard/ordersOrders
/dashboard/productsProducts
/dashboard/customersCustomers
/dashboard/analyticsAnalytics
/dashboard/settingsSettings
/dashboard/helpHelp
/dashboard/marketingMarketing hub
/dashboard/marketing/emailEmail
/dashboard/marketing/campaignsCampaigns
/dashboard/marketing/trackingTracking
/dashboard/marketing/deliverabilityDeliverability

Admin

/adminAdmin

Technical stack

  • Next.js (App Router), React, TypeScript
  • Tailwind CSS v4 + tw-animate-css
  • shadcn/ui (New York), Radix UI, class-variance-authority, tailwind-merge
  • Convex (data, auth) — see convex/
  • GSAP (header / story / introduction motion)
  • Vercel Analytics (production)