JustHold UI + Layout

Also follow justhold-design-tokens for colors/fonts and Shared web-service-stack for RSC defaults.

UI components

Base UI primitives (@base-ui/react) + class-variance-authority for variants, following shadcn's base-nova style. Canonical pattern: packages/ui/src/components/button.tsx — import as @justhold/ui/components/button (cva variants, cn() from @justhold/ui/lib/utils, data-slot).
One-off styled links (nav CTAs, hero buttons) are hand-rolled <Link>s with utility classes — match existing patterns (rounded-md bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90) instead of forcing Button.
Category/status pills: inline-flex items-center rounded-full bg-secondary px-3 py-1 text-xs font-medium text-secondary-foreground.
Icons from lucide-react, sized with size-* (not h-*/w-*), aria-hidden="true" when decorative.
Meta rows (author · date · reading time) use · separators and <time dateTime>; format via formatDate / formatPrice / formatPercent / formatCurrency from lib/format.ts — never format dates/numbers inline. Post metadata comes from lib/posts.ts.
Client components ('use client') sparingly — only for interactivity (mobile nav, sidenote, live ticker/chart via SWR). Prefer server components by default.
Brand mark pattern: components/logo.tsx — documented comment block + semantic Tailwind fills/strokes (fill-background, stroke-primary, fill-primary) so it tracks light/dark themes.

Public marketing (home, blog, pricing, tools, etc.) — see app/[locale]/page.tsx: