app/DESIGN.md

Design system (Fluksio)

app (dashboard SPA + API) and index (marketing site) are separate repos that share one visual design. The full, canonical spec — palette, radius, elevation, motion, component map, and shell patterns — lives in the parent repo's DESIGN-GUIDELINES.md. Read it before any UI work.

Sync rule (read before touching tokens)

The @theme inline, :root, and .theme-dark blocks in app/frontend/src/index.css and index/src/index.css must be kept byte-identical, and frontend/src/lib/motion.ts is duplicated verbatim. Any palette / radius / elevation / motion-token change is made in both repos in the same change. There is intentionally no shared npm package — the duplicated blocks are the sync point. Components (src/components/ui/*) are copied per repo (the shadcn model) and may diverge; only the tokens and motion presets must match.

Both repos share components.json: style new-york, cssVariables: true, icon library lucide.

Verify with make design-check from the workspace root.

Shell

The authenticated area is a bg-card region (SidebarProvider) with a floating translucent AppSidebar (variant="floating", bg-card/80 backdrop-blur-md). The flow editor floats its chrome over a full-bleed node canvas using the same frosted-surface model. See DESIGN-GUIDELINES.md → Shells and → Overlay surfaces & content chips.

Mobile

One breakpoint, md (768px), and a phone inspects rather than arranges: no dragging, no placing, no resizing. The rules that keep it that way — and the "nothing scrolls horizontally" check that enforces them — are in DESIGN-GUIDELINES.md → Responsive.

Dashboards

A user-defined dashboard deliberately steps outside the shared design system: it has two complete component sets of its own (glass and material) and takes its colours from the document rather than from the tokens. See DESIGN-GUIDELINES.md → The dashboard is exempt. The shells, the flow editor and every admin screen are unaffected.