Frontend Overview

The frontend is split across apps/web/ (routes and app-specific code) and shared packages:

• packages/web-core/ — Shared utilities (cn), hooks, auth client, validators
• packages/web-ui/ — shadcn/ui component library
• packages/web-shell/ — App shell, layout, settings modals, shared components
• packages/web-admin/ — Global admin portal pages

All are built with React 19, Vite, and Tailwind 4.

UI Components

UI primitives come from shadcn/ui and live in packages/web-ui/src/. App shell and settings components are in packages/web-shell/src/. Admin pages are in packages/web-admin/src/.

To add a new shadcn component:

cd apps/web
bunx shadcn@latest add button

Components are generated into packages/web-ui/src/ and import cn from @red/web-core/utils.

Routing

The app uses a file-based routing convention under apps/web/src/app/routes/. Routes are wrapped in the app shell (from @red/web-shell) which provides the sidebar, header, and auth guards.

Styling

Tailwind 4 is used for styling. The theme is configured via CSS custom properties in apps/web/src/app/index.css with full light/dark mode support. Each shared package directory is registered via @source directives so Tailwind scans them for utility classes.

Branding & Color System

The “RED” identity is built on a crimson red primary over a warm stone neutral palette. All colors use the oklch color space for perceptual uniformity.

Token	Light	Dark	Role
--primary	oklch(0.505 0.213 27.518)	oklch(0.444 0.177 26.899)	Brand red — buttons, links, active states
--primary-foreground	oklch(0.971 0.013 17.38)	oklch(0.971 0.013 17.38)	Text on primary surfaces
--background	oklch(1 0 0)	oklch(0.147 0.004 49.25)	Page background
--foreground	oklch(0.147 0.004 49.25)	oklch(0.985 0.001 106.423)	Body text
--muted	oklch(0.97 0.001 106.424)	oklch(0.268 0.007 34.298)	Subtle backgrounds
--destructive	oklch(0.577 0.245 27.325)	oklch(0.704 0.191 22.216)	Error states
--border	oklch(0.923 0.003 48.717)	oklch(1 0 0 / 10%)	Borders and dividers

Key design decisions:

• Warm neutrals — neutral hues sit around 49–106° (stone/sand), avoiding cool blue-grays
• oklch color space — ensures consistent perceived brightness across hues
• Dark mode borders use white at 10–15% opacity rather than fixed grays, adapting naturally to any background
• Font — Outfit variable font for both headings and body text

Icons

All icons come from Lucide React:

import { Settings, Users, CreditCard } from "lucide-react"