Technical Spec Sheet
BFShop platform blueprint
BFShop is being built as a business-oriented commerce simulation with a documented frontend system, relational data model, and automation layer that can scale with new workflows.
Core Stack
Runtime and framework
Next.js App Router delivers the portal and storefront UI with a single deployment flow and predictable page routing.
Data Layer
Prisma + Neon Postgres
Prisma defines schema and query shape while Neon hosts the relational database with managed infrastructure.
Automation
n8n orchestration
n8n handles process automation and external integrations such as notifications, docs, and operational workflows.
Design System Contract
BFShop style compliance
All specification and portal views follow the shared style system rules:
- Pages default to the bg-subtle-dark-gradient utility and must preserve the tokenized gradient structure defined in globals.
- Surface selection is semantic and token-backed: surface-base for standard content, surface-raised for primary emphasis, and surface-spotlight only for singular focal nodes.
- All interactive cards/links must use is-interactive and set --interactive-accent-border to a BFShop blue value (typically rgba(56, 189, 248, 0.5-0.6)) to keep hover/focus behavior consistent.
- Typography is utility-governed, not ad hoc: use card-eyebrow, card-title, card-body, and card-meta so size, line-height, and rhythm stay aligned across pages.
- Spacing rhythm is enforced with layout utilities (card-stack, card-stack-tight, card-cluster-gap, page-section-gap) instead of one-off margin stacks.
- Accent application is constrained to navigational and status semantics (eyebrows, action text, focus/hover borders) and should not be used for long-form body copy or broad surface fills.
- Accessibility baseline: preserve focus-visible outlines, maintain readable contrast on dark surfaces, and avoid hover-only affordances for critical actions.
- Card anatomy order remains fixed for scanability: eyebrow, title, body, meta, then action when present.