Customization

Palette and type

Every colour in both frontends comes from tokens in src/app/globals.css — --color-ink, --color-accent, --color-surface, --color-line and so on. Change those and every component follows. There are no raw palette utilities (bg-pink-500) and no `dark:` variants anywhere; keep it that way and the theme stays coherent.

@theme {
  --color-ink: #22100f;            /* headings, prices, body text — cherry-black */
  --color-accent: #b0122b;         /* cherry — prices, primary actions, badges */
  --color-accent-deep: #8a0c20;    /* hover, small accent text */
  --color-accent-soft: #fbe1e2;    /* blush chips, soft buttons */
  --color-cta: #f7dd8f;            /* the butter call-to-action pill */
  --color-on-cta: #5a0a17;         /* deep-cherry type on it */
  --color-surface: #fffefb;        /* ivory cards */
  --color-surface-2: #fbf6ee;      /* the cream page, tiles and insets */
  --color-line: #eee3d6;           /* warm hairlines */
  --color-panel: #4a0b16;          /* dark bands, toasts, the dashboard rail */
  --color-plate: #ffffff;          /* the white plate under a packshot */
}

Fonts: Poppins (300–700) is the primary face for body and UI (font-sans); Urbanist sets titles (font-heading, and font-display in the storefront); Playwrite GB S is the secondary (font-accent): wrap one or two words of a title in _underscores_ (in code or in a dashboard field such as a hero line) and they render in the script. Both are self-hosted through next/font. Swap them in layout.tsx and the @theme inline block.

Copy and static content

Navigation, FAQ, locale lists, delivery slots and payment methods are not API-managed — edit apps/web/src/data/content.ts. Legal documents live in src/data/legal.ts.

The catalogue

Manage products, aisles, brands and the journal from the dashboard — images upload to your ImageKit or Cloudinary when you save. To start from an empty store instead of the demo, skip pnpm run seed; to put the demo back, run pnpm --filter api run seed:bloom-booth -- --fresh.

Adding a dashboard screen

For a standard CRUD resource, do not create a page. Add a descriptor to apps/admin/src/data/resources.ts — columns, fields, endpoint — and app/(dashboard)/[screen] serves it live. Only screens needing bespoke behaviour (products, orders, users) get a directory, and a directory *shadows* the registry.

Adding an API resource

Copy the closest trio — brandModel.ts / brandController.ts / brandRoutes.ts — mount it in server.ts, and add a check to scripts/apiCheck.ts. Every write route chains protect, admin, preventReadOnlyActions.

UI primitives

components/ui/ is shadcn/ui. Anything the shadcn CLI generates drops straight in — replace its bg-background / text-foreground defaults with the Beauty Booth tokens and keep the lowercase filename.